设计之家 > 教程 > 網頁教程 > HTML教程 >

帶你輕鬆打開SVG動畫的大門

作者:佚名 來源:騰訊ISUX 時間:2016-06-08

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

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

1

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

1

點擊查看Demo

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

2

動起來是這個樣子的(gif循環之後234三個demo將無法區分,所以這裏的gif隻循環一次,需要多次查看效果請刷新或者進入demo查看):

2

點擊查看Demo

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

3

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

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

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

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

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

4

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

3

點擊查看Demo

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

5

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

4

點擊查看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,他可以接受一組數值,比如我們想作出圓的呼吸效果,那麼隻需要

6

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

5

點擊查看Demo

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

7

現在這個動畫是這個樣子的(gif並不能很好的展示出透明度的漸變,建議使用標準瀏覽器打開demo查看):

6

點擊查看Demo

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

8

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

7

點擊查看Demo

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

9

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

10

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

8

點擊查看Demo

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

11

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

12

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

9

點擊查看Demo

好像哪裏不對勁,對了,五角星沿著路徑轉動的時候能不能隨著角度傾斜?那麼就需要用到

13

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

10

點擊查看Demo

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

原文鏈接: 騰訊ISUX

标签:SVG動畫

相關文章:

推薦設計

最新文章