練小習：初學SVG的時候，感覺那一坨一坨的代碼難讀難懂，現在回過頭仔細想想，是因為那時候看文檔缺少一些具體的實例，導致學習起來很枯燥。如今SVG已經在前端各個領域都有所作為，無論是項目里的應用還是demo都所處可見，這里我就用一個實例的寫法帶新同學輕松的打開SVG動畫的大門。

首先我們定義一塊畫布，然后在上面畫一個圓形。

他看起來應該是這個樣子的：（每一個實例我都會附加圖片以及demo鏈接，方便直觀的理解與源代碼的查看，查看的時候請使用標準瀏覽器）

點擊查看Demo

現在我們就讓這個圓動起來

動起來是這個樣子的（gif循環之后234三個demo將無法區分，所以這里的gif只循環一次，需要多次查看效果請刷新或者進入demo查看）：

點擊查看Demo

我們可以看到圓動起來的時候，circle元素里邊不再是空的，多了一個animate的元素，這個animate含有下面幾個屬性：

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

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

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

begin?dur ：動畫的開始時間與結束時間。如果你想打開頁面過幾秒才開始動畫，那么就定義begin就好了。

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

fill支持參數有：freeze與remove. 其中remove是默認值，表示動畫結束直接回到開始的地方，現在再看這個動畫的樣子：

點擊查看Demo

這樣看起來動畫還是沒有滿足我的需求，我想讓動畫一直循環播放怎么辦？這就要用到 repeatCount

屬性的取值可以是一個數字，也可以是“indefinite”表示無限循環。現在動畫變成了這樣：

點擊查看Demo

現在動畫是循環了，可我還是覺得哪里別扭，第一幀和最后一幀并沒有銜接起來，看起來有突兀。這時候我們就回過頭再看看動畫的開始和結束。

from和to只能定義開始和終結兩個時間點，另外還有一個屬性by，是可以替代to的，to表示的是一個絕對值，by表示的是一個offset，比如from為50，to為80，表示從50到80，by為80的話，表示offset為80，那么最終的結果就是130,如果我們的demo使用by，那么就是by 30.除了by意外，還有一個屬性values，他可以接受一組數值，比如我們想作出圓的呼吸效果，那么只需要

現在我們再看一眼剛才的動畫

點擊查看Demo

可是現在的效果我還是不滿意，我想讓這個圓形呼吸的同時改變透明度，這就是svg在單個對象上面做多重動畫了。我們在 attributeName=”r” 下面，增加一個animate元素，用來改變圓的透明度

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

點擊查看Demo

寫到這里，我上邊的呼吸效果已經實現了，但是我現在又有了新的想法，我想放一排的圓，讓一個動完，才讓下一個接著動。這也就是我們編程里的“同步”概念，在svg里就是 同步動畫。同步動畫的實現很簡單，只需要有動畫id，然后下一個動畫的 begin 值 為上一個的 id.end, 比如

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

點擊查看Demo

更為強大的是，begin的值可以是表達式，比如

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

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

點擊查看Demo

和前邊的例子并沒有本質區別，唯一不同的地方在于from部分，from和to都是三個值，第一個值是角度，從0到360度的旋轉，第二個和第三個組成一個坐標，這個坐標決定了svg圍繞哪個點來進行旋轉，關于這方面的知識推薦新同學了解一下SVG的坐標系相關知識。transform的type可以包括translate，scale,skew等，和css相通，用法也與rotate大同小異，這里就不一一的列舉實例。實現了旋轉以后，我們再換一個更強大的動畫元素，<animateMotion>.我們可以用他來實現引導線動畫，讓你的圖形沿著復雜的路徑運動。比如我們先畫一條路徑

哎呀一不小心畫的太圓了，不過沒關系，我們現在把用過的二手五角星拿過來

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

點擊查看Demo

好像哪里不對勁，對了，五角星沿著路徑轉動的時候能不能隨著角度傾斜？那么就需要用到

這個屬性會讓你的圖形隨著你的路徑自動做角度的調整。加上之后的最終動效是這樣的

點擊查看Demo

總結語：看完上邊的實例，你其實已經站在SVG動畫的門里了，剩下的就是進階知識的獲取，以及熟練度的達成。下一次我繼續和大家一起學習SVG動畫一些進階的技巧！

「技多不壓身的設計師才有高薪資！」

1. 平面設計：《超贊！設計師完全自學指南》
2. 交互設計：《交互設計師修煉指南！教你從零開始成為優秀交互設計師》
3. UI設計：《超實用新手指南！零基礎如何自學UI設計？》
4. 前端開發：《天貓高手來教你！零基礎如何系統地學習前端開發？》
5. 摳圖技巧：《從菜鳥到高手！PHOTOSHOP摳圖全方位攻略》
6. 配色方案：《色彩搭配速成！3個實用方法幫你全面搞定配色》
7. DPI指南：《基礎知識學起來！為設計師量身打造的DPI指南》
8. 交互設計自學路徑圖：《零基礎入門！給非科班生的自學路徑圖之交互設計篇》

原文地址：isux.tencent

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量130萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com