SVG動畫

定義一塊畫布，而後在上面畫一個圓形

他看起來應該是這個樣子的：

如今咱們就讓這個圓動起來

動起來是這個樣子的（gif循環以後234三個demo將沒法區分，因此這裏的gif只循環一次，須要屢次查看效果請刷新或者進入demo查看）：

咱們能夠看到圓動起來的時候，circle元素裏邊再也不是空的，多了一個animata的元素，這個animata含有下面幾個屬性：

 

attributeName：動畫屬性名，顧名思義，你想要改變哪一個屬性

attributeType：動畫屬性的類別，常見的兩個值，XML和css，取決於屬性是在xml裏仍是在style裏，下面改變opacity的demo裏，就是使用的css。不寫的時候默認值爲auto，他會先搜索css，建議寫上。

from to ：性的開始和結束值，from可選，當不寫的時候會取默認值。

begin dur ：動畫的開始時間與結束時間。若是你想打開頁面過幾秒纔開始動畫，那麼就定義begin就行了。

觀察上邊的動畫，咱們發現動畫結束的時候又回到了第一幀，若是咱們想讓他停在最後一幀，就須要用到 fill 屬性（animate的fill屬性與svg的fill填充要區分一下）

這樣看起來動畫仍是沒有知足個人需求，我想讓動畫一直循環播放怎麼辦？這就要用到 repeatCount

屬性的取值能夠是一個數字，也能夠是「indefinite」表示無限循環。如今動畫變成了這樣：

如今動畫是循環了，可我仍是以爲哪裏彆扭，第一幀和最後一幀並無銜接起來，看起來有突兀。這時候咱們就回過頭再看看動畫的開始和結束。
from和to只能定義開始和終結兩個時間點，另外還有一個屬性by，是能夠替代to的，to表示的是一個絕對值，by表示的是一個offset，好比from爲50，to爲80，表示從50到80，by爲80的話，表示offset爲80，那麼最終的結果就是130,若是咱們的demo使用by，那麼就是by 30.除了by意外，還有一個屬性values，他能夠接受一組數值，好比咱們想做出圓的呼吸效果，那麼只須要

如今咱們再看一眼剛纔的動畫

但是如今的效果我仍是不滿意，我想讓這個圓形呼吸的同時改變透明度，這就是svg在單個對象上面作多重動畫了。咱們在 attributeName=」r」 下面，增長一個animate元素，用來改變圓的透明度

 

如今這個動畫是這個樣子的（gif並不能很好的展現出透明度的漸變，建議使用標準瀏覽器打開demo查看）：

寫到這裏，我上邊的呼吸效果已經實現了，可是我如今又有了新的想法，我想放一排的圓，讓一個動完，才讓下一個接着動。這也就是咱們編程裏的「同步」概念，在svg裏就是 同步動畫。同步動畫的實現很簡單，只須要有動畫id，而後下一個動畫的 begin 值 爲上一個的 id.end, 好比

咱們來看一下同步動畫的實例：

更爲強大的是，begin的值能夠是表達式，好比

 

這樣就實現了同步的同時，帶有5s的偏移，也就是第一個結束5s以後，第二個動畫纔開始。OK，同步動畫實現了，不過如今我要改需求……..把剛纔的圓還給我，我要讓他旋轉。SVG的旋轉動畫須要用到另外一個<animateTransform>元素，他的用法和animate並無本質的區別，只不過屬性須要換一批。好比咱們相讓剛纔那個圓形旋轉起來，等等，圓形原地旋轉的話，好像咱們並看不出他在旋轉呀，那好吧，咱們換一個旋轉起來視覺效果比較強的圖形，現場寫一個五角星出來，並給他加animateTransform ：

查看一下他動起來的樣子：

和前邊的例子並無本質區別，惟一不一樣的地方在於from部分，from和to都是三個值，第一個值是角度，從0到360度的旋轉，第二個和第三個組成一個座標，這個座標決定了svg圍繞哪一個點來進行旋轉，關於這方面的知識推薦新同窗瞭解一下SVG的座標系相關知識。transform的type能夠包括translate，scale,skew等，和css相通，用法也與rotate大同小異，這裏就不一一的列舉實例。實現了旋轉之後，咱們再換一個更強大的動畫元素，<animateMotion>.咱們能夠用他來實現引導線動畫，讓你的圖形沿着複雜的路徑運動。好比咱們先畫一條路徑

哎呀一不當心畫的太圓了，不過不要緊，咱們如今把用過的二手五角星拿過來

 

加入了animateMotion元素，animateMotion的path決定了五角星的運動路線，能夠先看一下效果，是這樣的

好像哪裏不對勁，對了，五角星沿着路徑轉動的時候能不能隨着角度傾斜？那麼就須要用到

這個屬性會讓你的圖形隨着你的路徑自動作角度的調整。加上以後的最終動效是這樣的

來源：https://isux.tencent.com/svg-animate.html