VG 動畫有很多種實現(xiàn)方法，也有很大SVG動畫庫，現(xiàn)在我們就來介紹 svg動畫實現(xiàn)方法都有哪些？

一、SVG 的 animation

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

• set
• animate
• animateColor
• animateTransform
• animateMotion

1.1、set

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

使用語法：

<set attributeName="" attributeType="" to="" begin="" />

• attributeName ：是要改變的元素屬性名稱。
• attributeType ：是表明attributeName屬性值的列表，支持三個固定參數(shù) CSS/XML/auto，如x,y以及transform屬于XML，opacity屬于CSS。auto是瀏覽器自動判別的意思，也是默認(rèn)值，如果你不知道該選哪個就填auto，瀏覽器自己判別。
• to ：動畫結(jié)束的屬性值。
• begin ：動畫延遲時間。

eg：繪制一個半徑為200的圓，4秒之后，半徑變?yōu)?0。

<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>

1.2、animate

是基礎(chǔ)的動畫元素，實現(xiàn)單屬性的過渡效果。

使用語法：

<animate 
 attributeName="r" 
 from="200" to="50" 
 begin="4s" dur="2s" 
 repeatCount="2"
></animate>

• from ：過渡效果的屬性開始值。
• to：過渡效果的屬性結(jié)束值。
• begin：動畫開始時間。
• dur：動畫過渡時間，控制動畫速度。
• repeatCount：動畫重復(fù)次數(shù)。

eg：繪制一個半徑為200的圓，4秒之后半徑在2秒內(nèi)從200逐漸變?yōu)?0。

<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>

1.3、animateColor

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

1.4、animateTransform

實現(xiàn)transform變換動畫效果，與css3的transform變換類似。實現(xiàn)平移、旋轉(zhuǎn)、縮放等效果。

使用語法：

<animateTransform attributeName="transform"  type="scale" 
 from="1.5" to="0" 
 begin="2s"  dur="3s" 
 repeatCount="indefinite"></animateTransform>

• repeatCount：重復(fù)次數(shù)，設(shè)置為 indefinite 表示無限循環(huán)，一直執(zhí)行。
• type：添加 transform 變換類型。
• eg：繪制一個半徑為200的圓，4秒之后開始縮放，在2秒內(nèi)從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>

1.5、animateMotion

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

使用語法：

<animateMotion 
 path="M 0 0 L 320 320" 
begin="4s" dur="2s"></animateMotion>

• path：定義路徑，使用語法與《HTML5(八)——SVG 之 path 詳解》path的d屬性一致。
• begin：延遲時間。
• dur：動畫執(zhí)行時間。

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>

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

二、JavaScript 控制

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

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

eg：使用SVG繪制地一條線，點擊線條地時候改變 x1 ,實現(xiàn)旋轉(zhuǎn)效果。

<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 來實現(xiàn)一幀一幀的改變。

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

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

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

使用之前需要先引入Raphael.js庫文件。cdn的地址為：https://cdn.bootcdn.net/ajax/libs/raphael/2.3.0/raphael.js

3.1、創(chuàng)建畫布

Rapheal有兩種創(chuàng)建畫布的方式：

第一種：瀏覽器窗口上創(chuàng)建畫布

創(chuàng)建語法：

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

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

第二種：在一個元素中創(chuàng)建畫布

創(chuàng)建語法：

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

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

3.2、繪制圖形

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

paper.circle(cx, cy, r); // (cx , cy)圓心坐標(biāo) r 半徑
paper.rect(x, y, width, height, r); // (x,y)左上角坐標(biāo) width寬度 height高度 r圓角半徑(可選)
paper. ellipse(cx, cy, rx, ry); // (cx , cy)圓心坐標(biāo) 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>

運行結(jié)果如下：

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

使用語法：paper.path(pathString)

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

eg：繪制一個三角形。

let sj = paper.path("M 0,0 L100,100 L100,0 'Z'")

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

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

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

3.3、設(shè)置屬性

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

使用語法：circle.attr({"屬性名","屬性值","屬性名","屬性值",...})

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

注意：如果只設(shè)置一個屬性時，可以省略‘{}’。如：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>

3.4、添加事件

RaphaelJS一般具有以下事件：
click、dblclick、drag、hide、hover、mousedown、mouseout、mouseup、mouseover等以及對應(yīng)的解除事件，只要在前面加上“un”就可以了（unclick、undblclick）。

使用語法：

obj.click(function(){
 //需要操作的內(nèi)容
})

3.5、添加動畫

animate為指定圖形添加動畫并執(zhí)行。

使用語法：

obj.animate({
 "屬性名1":屬性值1,
 "屬性名2":屬性值2,
  ...
},time,type)

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

time：動畫所需時間。

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

• linear - 線性漸變
• ease-in | easeIn | < - 由慢到快
• ease-out | easeOut | > - 由快到慢
• ease-in-out | easeInOut | <> - 由慢到快再到慢
• back-in | backIn - 開始時回彈
• back-out | backOut - 結(jié)束時回彈
• 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>

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

在好多人都把HTML5和前端的概念弄混淆了。例如，H5是HTML5的簡稱，而現(xiàn)在好多人把HTML5看成了是前端開發(fā)的總稱。今天達(dá)妹就為各位普及一下，到底前端和HTML5有哪些區(qū)別？

什么是前端開發(fā)

以一個網(wǎng)站為例包括網(wǎng)站設(shè)計、前端開發(fā)、程序開發(fā)等。網(wǎng)站設(shè)計就是網(wǎng)站的外觀，平面的東西。程序開發(fā)也好理解就是功能實現(xiàn)。

而前端開發(fā)，簡單來說，就是把平面效果圖轉(zhuǎn)換成網(wǎng)頁，把靜態(tài)轉(zhuǎn)換成動態(tài)。

它的工作包括了:切圖、寫樣式、做鼠標(biāo)效果和圖片切換效果等。而優(yōu)秀的前端開發(fā)可以保障實現(xiàn)這些效果的同時，即不能影響網(wǎng)站的打開速度、瀏覽器兼容性還有搜索引擎的收錄，還可以讓用戶體驗更加舒適，使網(wǎng)站在訪問中顯得更精細(xì)、更用心。

訪客使用起來更簡便。另外，現(xiàn)在前端工作還不僅僅只是網(wǎng)頁的制作，還有微網(wǎng)站、APP的制作，游戲制作，例如可以將你開發(fā)的Web頁面直接打包成手機使用的APP應(yīng)用，游戲的互動界面更是以前端開發(fā)技術(shù)為主。

前端開發(fā)學(xué)習(xí)什么？

學(xué)習(xí)HTML、CSS和DIV+CSS技術(shù)用來制作Web頁面;學(xué)習(xí)Java、DOM、BOM等用建立開發(fā)基礎(chǔ);學(xué)習(xí) photoshop和Axure等軟件應(yīng)用，完成頁面UI設(shè)計;

也要認(rèn)識一下NodeJS和PHP加上數(shù)據(jù)庫等這樣的后端語言，方便前后端開發(fā)配合;學(xué)習(xí) HTML5、CSS3、響應(yīng)式頁面布局、微網(wǎng)站制作等開發(fā)移動互聯(lián)網(wǎng)的應(yīng)用;像Ajax、JQuery、jQueryMobile、Bootstrap、AngularJS等更是前端開發(fā)必學(xué)的高級技術(shù);

HTML5地理位置應(yīng)用、離線應(yīng)用、webworker多線程實現(xiàn)、websocket、跨平臺開發(fā)技術(shù)和webAPP開發(fā)等，這些企業(yè)級應(yīng)用技術(shù)也是現(xiàn)在開發(fā)的主流。

現(xiàn)在前端開發(fā)最熱門、要人最多，就是使用canvas開發(fā)網(wǎng)頁游戲動畫，以及會用 Cocos2d-js制作游戲等開發(fā)。

什么是HTML5？

HTML5就是HTML最新標(biāo)準(zhǔn)，是現(xiàn)在Web程序開發(fā)的核心、標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用HTML的第五次重大修改，這是一項推薦標(biāo)準(zhǔn)。

雖然 CSS3和HTML5是兩個語言，但通常說HTML5也都泛指包括CSS3，因為它們兩個常在一起配合使用的。當(dāng)然還不指這些，從技術(shù)本身分析來看，現(xiàn)在完成一些頁面制作、WebAPP、微網(wǎng)站開發(fā)以及網(wǎng)頁游戲等，現(xiàn)在都是使用HTML5標(biāo)準(zhǔn)完成的。

雖然開發(fā)這類的應(yīng)用其實是以JS為主，但因為HTML5 這個概念很流行，所以微網(wǎng)站開發(fā)、WebAPP或是微網(wǎng)站等應(yīng)用，很多人都會說使用HTML5開發(fā)。

前端與HTML5的區(qū)別？

現(xiàn)在好多人都把HTML5和前端的概念弄混淆了。例如，H5是HTML5的簡稱，而現(xiàn)在好多人把HTML5看成了是前端開發(fā)的總稱。

HTML5其實只是前端開發(fā)中重要的一部分技術(shù)，是現(xiàn)在前端開發(fā)的標(biāo)準(zhǔn)組件，特別是在移動端的特效開發(fā)、游戲開發(fā)，以及APP的開發(fā)方向上非常流行。如果把前端開發(fā)比作要建設(shè)的一座“大廈”，HTML5就相當(dāng)于“鋼筋水泥”。

現(xiàn)在好多人都說開發(fā)“XX功能”使用“HTML5”技術(shù)，其實理解的有一些問題，他們所說的HTML5其實說的就是前端技術(shù)，只不過HTML5這個詞比較活躍也比較流行，所以多數(shù)人都將前端技術(shù)叫成了HTML5了。

通過以上的講解，相信大家都已經(jīng)對前端有了一個深刻的認(rèn)識了吧！如果你是了解過Web前端的人，那么你就有一顆想轉(zhuǎn)行的心，因為相比于其他行業(yè)，web前端相對容易只要你有過硬的技術(shù)，有足夠的項目實戰(zhàn)經(jīng)驗，很容易就拿到高薪，再加上如今IT行業(yè)發(fā)展形勢大好，軟件開發(fā)人員匱乏，未來幾年前端開發(fā)都將是高薪行業(yè)！

小編是一個多年開發(fā)經(jīng)驗的程序員，今年年初整理了一批WEB前端學(xué)習(xí)資料作為粉絲福利，不論你是計算機專業(yè)想往WEB前端方向發(fā)展，還是零基礎(chǔ)想要轉(zhuǎn)行學(xué)習(xí)WEB前端，這份資料都能幫助到你，在自學(xué)過程中遇見問題了也可以隨時問我。只要關(guān)注我，私信我【前端】，即可領(lǐng)取粉絲福利。