如何實現svg動畫

這篇文章主要為大家展示了“如何實現svg動畫”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“如何實現svg動畫”這篇文章吧。

　　一、SVG 的 animation

　　SVG animation 有五大元素，他們控制著各種不同類型的動畫，分別為：

　　set

　　animate

　　animateColor

　　animateTransform

　　animateMotion

　　set 為動畫元素設置延遲，此元素是SVG中最簡單的動畫元素，但是他并沒有動畫效果。

　　使用語法：

　　attributeName ：是要改變的元素屬性名稱。

　　attributeType ：是表明attributeName屬性值的列表，支持三個固定參數 CSS/XML/auto，如x,y以及transform屬于XML，opacity屬于CSS。auto是瀏覽器自動判別的意思，也是默認值，如果你不知道該選哪個就填auto，瀏覽器自己判別。

　　to ：動畫結束的屬性值。

　　begin ：動畫延遲時間。

　　eg：繪制一個半徑為200的圓，4秒之后，半徑變為50。

　　<svg width="320" height="320">

　　<circle cx="0" cy="0" r="200" style="stroke: none; fill: #0000ff;">

　　<set attributeName="r" attributeType="XML" to="50" begin="4s" />

　　</circle>

　　</svg>

　　?

　　是基礎的動畫元素，實現單屬性的過渡效果。

　　使用語法：

　　from ：過渡效果的屬性開始值。

　　to：過渡效果的屬性結束值。

　　begin：動畫開始時間。

　　dur：動畫過渡時間，控制動畫速度。

　　repeatCount：動畫重復次數。

　　eg：繪制一個半徑為200的圓，4秒之后半徑在2秒內從200逐漸變為50。

　　<circle cx="0" cy="0" r="200" style="stroke: none; fill: #0000ff;">

　　<animate attributeName="r" from="200" to="50"

　　begin="4s" dur="2s" repeatCount="2"></animate>

　　</circle>

　　?

　　控制顏色動畫，animate也可以實現這個效果，所以該屬性目前已被廢棄。

　　實現transform變換動畫效果，與css3的transform變換類似。實現平移、旋轉、縮放等效果。

　　使用語法：

　　repeatCount：重復次數，設置為 indefinite 表示無限循環，一直執行。

　　type：添加 transform 變換類型。

　　eg：繪制一個半徑為200的圓，4秒之后開始縮放，在2秒內從1.5縮小到0倍。

　　<svg width="320" height="320">

　　<circle cx="0" cy="0" r="200" style="stroke: none; fill: #0000ff;">

　　<animateTransform attributeName="transform" begin="4s"

　　dur="2s" type="scale" from="1.5" to="0"

　　repeatCount="indefinite"></animateTransform>

　　</circle>

　　</svg>

　　可以定義動畫路徑，讓SVG各個圖形，沿著指定路徑運動。

　　使用語法：

　　path：定義路徑，使用語法與《HTML5(八)&mdash;&mdash;SVG 之 path 詳解》path的d屬性一致。

　　begin：延遲時間。

　　dur：動畫執行時間。

　　eg：繪制一個半徑為10的圓，延遲4秒從左上角運動的右下角。

　　<svg width="320" height="320">

　　<circle cx="0" cy="0" r="10" style="stroke: none; fill: #0000ff;">

　　<animateMotion

　　path="M 0 0 L 320 320"

　　begin="4s" dur="2s"

　　></animateMotion>

　　</circle>

　　</svg>

　　?

　　實際制作動畫的時候，動畫太單一不酷，需要同時改變多個屬性時，上邊的四種元素可以互相組合，同類型的動畫也能組合。以上這些元素雖然能夠實現動畫，但是無法動態地添加事件，所以接下來我們就看看 js 如何制作動畫。

　　二、JavaScript 控制

　　上篇文章我們介紹js可以操作path，同樣也可以操作SVG的內置形狀元素，還可以給任意元素添加事件。

　　給SVG元素添加事件方法與普通元素一樣，可以只用on+事件名 或者addEventListener添加。

　　eg：使用SVG繪制地一條線，點擊線條地時候改變 x1 ,實現旋轉效果。

　　<svg width="800" height="800" id="svg">

　　<line id="line" x1="100" y1="100"

　　x2="400" y2="300"

　　stroke="black" stroke-width="5"></line>

　　</svg>

　　<script>

　　window.onload=function(){

　　var line=document.getElementById("line")

　　line.onclick=function(){

　　let start=parseInt(line.getAttribute("x1")),

　　end=400,dis=start-end

　　requestAnimationFrame(next)

　　let count=0;

　　function next(){

　　count++

　　let a=count/200,cur=Math.abs(start+ dis*a)

　　line.setAttribute('x1',cur)

　　if(count<200)requestAnimationFrame(next)

　　}

　　}

　　}

　　</script>

　　?

　　js制作的SVG動畫，主要利用 requestAnimationFrame 來實現一幀一幀的改變。

　　我們上述制作的 SVG 圖形、動畫等，運行在低版本IE中，發現SVG只有IE9以上才支持，低版本的并不能支持，為了兼容低版本瀏覽器，可以使用 VML ,VML需要添加額外東西，每個元素需要添加 v:元素，樣式中還需要添加 behavier ，經常用于繪制地圖。由于使用太麻煩，所以我們借助 Raphael.js 庫。

　　三、Rapha?l.js (拉斐爾)

　　Raphael.js是通過SVG/VML+js實現跨瀏覽器的矢量圖形，在IE瀏覽器中使用VML，非IE瀏覽器使用SVG，類似于jquery，本質還是一個javascript庫，使用簡單，容易上手。

　　使用之前需要先引入Raphael.js庫文件。cdn的地址為：

　　Rapheal有兩種創建畫布的方式：

　　第一種：瀏覽器窗口上創建畫布

　　創建語法：

　　var paper=Raphael(x,y,width,height)

　　x,y是畫布左上角的坐標，此時畫布的位置是絕對定位，有可能會與其他html元素重疊。width、height是畫布的寬高。

　　第二種：在一個元素中創建畫布

　　創建語法：

　　var paper=Raphael(element, width, height);

　　element是元素節點本身或ID width、height是畫布的寬度和高度。

　　畫布創建好之后，該對象自帶SVG內置圖形有矩形、圓形、橢圓形。他們的方法分別為：

　　paper.circle(cx, cy, r); // (cx , cy)圓心坐標 r 半徑

　　paper.rect(x, y, width, height, r); // (x,y)左上角坐標 width寬度 height高度 r圓角半徑(可選)

　　paper. ellipse(cx, cy, rx, ry); // (cx , cy)圓心坐標 rx水平半徑 ry垂直半徑

　　eg：在div中繪制一個圓形，一個橢圓、一個矩形。

　　<div id="box"></div>

　　<script>

　　var paper=Raphael("box",300,300)

　　paper.circle(150,150,150)

　　paper.rect(0,0,300,300)

　　paper.ellipse(150,150,100,150)

　　</script>

　　?

　　運行結果如下：

　　?

　　除了簡單圖形之外，還可以繪制復雜圖形，如三角形、心型，這時就使用path方法。

　　使用語法：paper.path(pathString)

　　pathString是由一個或多個命令組成，每個命令以字母開始，多個參數是由逗號分隔。

　　eg：繪制一個三角形。

　　還可以繪制文字，如果需要換行，使用 \n 。

　　文字語法：paper.text(x,y,text)

　　(x,y)是文字坐標，text是要繪制的文字。

　　圖形繪制之后，我們通常會添加stroke、fill、stroke-width等讓圖形更美觀，Raphael使用attr給圖形設置屬性。

　　使用語法：circle.attr()

　　如果只有屬性名沒有屬性值，則是獲取屬性，如果有屬性值，則是設置屬性。

　　注意：如果只設置一個屬性時，可以省略&lsquo;{}&rsquo;。如：rect.attr('fill','pink')

　　eg：給上邊的矩形添加邊框和背景色。

　　<div id="box"></div>

　　<script>

　　var paper=Raphael("box",300,300)

　　let rect=paper.rect(100,100,150,200)

　　rect.attr({'fill':'red','stroke':'blue','stroke-width':'10'})

　　</script>

　　?

　　RaphaelJS一般具有以下事件：

　　click、dblclick、drag、hide、hover、mousedown、mouseout、mouseup、mouseover等以及對應的解除事件，只要在前面加上“un”就可以了（unclick、undblclick）。

　　使用語法：

　　animate為指定圖形添加動畫并執行。

　　使用語法：

　　屬性名和屬性值就根據你想要的動畫類型加就ok。

　　time：動畫所需時間。

　　type：指動畫緩動類型。常用值有：

　　linear - 線性漸變

　　ease-in | easeIn | < - 由慢到快

　　ease-out | easeOut | > - 由快到慢

　　ease-in-out | easeInOut | <> - 由慢到快再到慢

　　back-in | backIn - 開始時回彈

　　back-out | backOut - 結束時回彈

　　elastic - 橡皮筋

　　bounce - 彈跳

　　eg：點擊矩形，矩形緩緩變大。

　　<div id="box"></div>

　　<script>

　　var paper=Raphael("box",800,500)

　　let rect=paper.rect(100,100,150,100)

　　rect.attr({'fill':'red','stroke':'blue','stroke-width':'10'})

　　rect.attr('fill','pink')

　　rect.click(function(){

　　rect.animate({

　　"width":300,

　　"height":300

　　},1000,"bounce")

　　})

　　</script>

　　?

　　復制上邊的代碼，分別在各個瀏覽器和低版本IE瀏覽器運行，發現都可以正常運行。SVG的動畫庫挺多了，我們介紹了拉斐爾，有興趣的小伙伴可以自行找找其他庫。

以上是“如何實現svg動畫”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！