首先我們定義一塊畫(huà)布，然后在上面畫(huà)一個(gè)圓形。
他看起來(lái)應(yīng)該是這個(gè)樣子的：（每一個(gè)實(shí)例我都會(huì)附加圖片以及demo鏈接，方便直觀的理解與源代碼的查看，查看的時(shí)候請(qǐng)使用標(biāo)準(zhǔn)瀏覽器）
現(xiàn)在我們就讓這個(gè)圓動(dòng)起來(lái)
動(dòng)起來(lái)是這個(gè)樣子的（gif循環(huán)之后234三個(gè)demo將無(wú)法區(qū)分，所以這里的gif只循環(huán)一次，需要多次查看效果請(qǐng)刷新或者進(jìn)入demo查看）：
我們可以看到圓動(dòng)起來(lái)的時(shí)候，circle元素里邊不再是空的，多了一個(gè)animate的元素，這個(gè)animate含有下面幾個(gè)屬性：
attributeName：動(dòng)畫(huà)屬性名，顧名思義，你想要改變哪個(gè)屬性
attributeType：動(dòng)畫(huà)屬性的類別，常見(jiàn)的兩個(gè)值，XML和css，取決于屬性是在xml里還是在style里，下面改變opacity的demo里，就是使用的css。不寫(xiě)的時(shí)候默認(rèn)值為auto，他會(huì)先搜索css，建議寫(xiě)上。
from to ：性的開(kāi)始和結(jié)束值，from可選，當(dāng)不寫(xiě)的時(shí)候會(huì)取默認(rèn)值。
begin dur ：動(dòng)畫(huà)的開(kāi)始時(shí)間與結(jié)束時(shí)間。如果你想打開(kāi)頁(yè)面過(guò)幾秒才開(kāi)始動(dòng)畫(huà)，那么就定義begin就好了。
觀察上邊的動(dòng)畫(huà)，我們發(fā)現(xiàn)動(dòng)畫(huà)結(jié)束的時(shí)候又回到了第一幀，如果我們想讓他停在最后一幀，就需要用到 fill 屬性（animate的fill屬性與svg的fill填充要區(qū)分一下）
fill支持參數(shù)有：freeze與remove. 其中remove是默認(rèn)值，表示動(dòng)畫(huà)結(jié)束直接回到開(kāi)始的地方，現(xiàn)在再看這個(gè)動(dòng)畫(huà)的樣子：
這樣看起來(lái)動(dòng)畫(huà)還是沒(méi)有滿足我的需求，我想讓動(dòng)畫(huà)一直循環(huán)播放怎么辦？這就要用到 repeatCount
屬性的取值可以是一個(gè)數(shù)字，也可以是“indefinite”表示無(wú)限循環(huán)。現(xiàn)在動(dòng)畫(huà)變成了這樣：
現(xiàn)在動(dòng)畫(huà)是循環(huán)了，可我還是覺(jué)得哪里別扭，第一幀和最后一幀并沒(méi)有銜接起來(lái)，看起來(lái)有突兀。這時(shí)候我們就回過(guò)頭再看看動(dòng)畫(huà)的開(kāi)始和結(jié)束。
from和to只能定義開(kāi)始和終結(jié)兩個(gè)時(shí)間點(diǎn)，另外還有一個(gè)屬性by，是可以替代to的，to表示的是一個(gè)絕對(duì)值，by表示的是一個(gè)offset，比如from為50，to為80，表示從50到80，by為80的話，表示offset為80，那么最終的結(jié)果就是130,如果我們的demo使用by，那么就是by 30.除了by意外，還有一個(gè)屬性values，他可以接受一組數(shù)值，比如我們想作出圓的呼吸效果，那么只需要
現(xiàn)在我們?cè)倏匆谎蹌偛诺膭?dòng)畫(huà)
可是現(xiàn)在的效果我還是不滿意，我想讓這個(gè)圓形呼吸的同時(shí)改變透明度，這就是svg在單個(gè)對(duì)象上面做多重動(dòng)畫(huà)了。我們?cè)?attributeName=”r” 下面，增加一個(gè)animate元素，用來(lái)改變圓的透明度
現(xiàn)在這個(gè)動(dòng)畫(huà)是這個(gè)樣子的（gif并不能很好的展示出透明度的漸變，建議使用標(biāo)準(zhǔn)瀏覽器打開(kāi)demo查看）：
寫(xiě)到這里，我上邊的呼吸效果已經(jīng)實(shí)現(xiàn)了，但是我現(xiàn)在又有了新的想法，我想放一排的圓，讓一個(gè)動(dòng)完，才讓下一個(gè)接著動(dòng)。這也就是我們編程里的“同步”概念，在svg里就是 同步動(dòng)畫(huà)。同步動(dòng)畫(huà)的實(shí)現(xiàn)很簡(jiǎn)單，只需要有動(dòng)畫(huà)id，然后下一個(gè)動(dòng)畫(huà)的 begin 值 為上一個(gè)的 id.end, 比如
我們來(lái)看一下同步動(dòng)畫(huà)的實(shí)例：
更為強(qiáng)大的是，begin的值可以是表達(dá)式，比如
這樣就實(shí)現(xiàn)了同步的同時(shí)，帶有5s的偏移，也就是第一個(gè)結(jié)束5s之后，第二個(gè)動(dòng)畫(huà)才開(kāi)始。OK，同步動(dòng)畫(huà)實(shí)現(xiàn)了，不過(guò)現(xiàn)在我要改需求……..把剛才的圓還給我，我要讓他旋轉(zhuǎn)。SVG的旋轉(zhuǎn)動(dòng)畫(huà)需要用到另一個(gè)<animateTransform>元素，他的用法和animate并沒(méi)有本質(zhì)的區(qū)別，只不過(guò)屬性需要換一批。比如我們相讓剛才那個(gè)圓形旋轉(zhuǎn)起來(lái)，等等，圓形原地旋轉(zhuǎn)的話，好像我們并看不出他在旋轉(zhuǎn)呀，那好吧，我們換一個(gè)旋轉(zhuǎn)起來(lái)視覺(jué)效果比較強(qiáng)的圖形，現(xiàn)場(chǎng)寫(xiě)一個(gè)五角星出來(lái)，并給他加animateTransform ：
查看一下他動(dòng)起來(lái)的樣子：
和前邊的例子并沒(méi)有本質(zhì)區(qū)別，唯一不同的地方在于from部分，from和to都是三個(gè)值，第一個(gè)值是角度，從0到360度的旋轉(zhuǎn)，第二個(gè)和第三個(gè)組成一個(gè)坐標(biāo)，這個(gè)坐標(biāo)決定了svg圍繞哪個(gè)點(diǎn)來(lái)進(jìn)行旋轉(zhuǎn)，關(guān)于這方面的知識(shí)推薦新同學(xué)了解一下SVG的坐標(biāo)系相關(guān)知識(shí)。transform的type可以包括translate，scale,skew等，和css相通，用法也與rotate大同小異，這里就不一一的列舉實(shí)例。實(shí)現(xiàn)了旋轉(zhuǎn)以后，我們?cè)贀Q一個(gè)更強(qiáng)大的動(dòng)畫(huà)元素，<animateMotion>.我們可以用他來(lái)實(shí)現(xiàn)引導(dǎo)線動(dòng)畫(huà)，讓你的圖形沿著復(fù)雜的路徑運(yùn)動(dòng)。比如我們先畫(huà)一條路徑
哎呀一不小心畫(huà)的太圓了，不過(guò)沒(méi)關(guān)系，我們現(xiàn)在把用過(guò)的二手五角星拿過(guò)來(lái)
加入了animateMotion元素，animateMotion的path決定了五角星的運(yùn)動(dòng)路線，可以先看一下效果，是這樣的
好像哪里不對(duì)勁，對(duì)了，五角星沿著路徑轉(zhuǎn)動(dòng)的時(shí)候能不能隨著角度傾斜？那么就需要用到
這個(gè)屬性會(huì)讓你的圖形隨著你的路徑自動(dòng)做角度的調(diào)整。加上之后的最終動(dòng)效是這樣的
總結(jié)語(yǔ)：看完上邊的實(shí)例，你其實(shí)已經(jīng)站在SVG動(dòng)畫(huà)的門(mén)里了，剩下的就是進(jìn)階知識(shí)的獲取，以及熟練度的達(dá)成。下一次我繼續(xù)和大家一起學(xué)習(xí)SVG動(dòng)畫(huà)一些進(jìn)階的技巧！
原文鏈接: 騰訊ISUX
]]>