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

作者:佚名 來源:騰訊ISUX 時間:2016-06-08 標簽: SVG動畫

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

相關文章:

推薦文章

最新文章

熱門標簽

快乐炸金花 绥中县 | 山阳县 | 咸丰县 | 绥江县 | 灵石县 | 文昌市 | 廊坊市 | 响水县 | 合水县 | 修武县 | 新安县 | 山阴县 | 杭锦旗 | 曲阳县 | 昂仁县 | 新郑市 | 深州市 | 淅川县 | 三江 | 桃园县 | 吉林市 | 全椒县 | 垫江县 | 城固县 | 宽城 | 古田县 | 花垣县 | 乐至县 | 灌阳县 | 通城县 | 满城县 | 客服 | 大城县 | 武鸣县 | 汤原县 | 类乌齐县 | 宜春市 | 江津市 | 富川 | 广德县 | 綦江县 | 涟源市 | 重庆市 | 江安县 | 铜梁县 | 新巴尔虎左旗 | 津南区 | 六枝特区 | 登封市 | 手机 | 社会 | 灵武市 | 靖西县 | 会宁县 | 勃利县 | 凌海市 | 衡阳市 | 襄樊市 | 枝江市 | 苏尼特左旗 | 台安县 | 城步 | 石景山区 | 宣城市 | 内丘县 | 犍为县 | 友谊县 | 宾川县 | 行唐县 | 锦州市 | 射阳县 | 大新县 | 剑河县 | 米泉市 | 察隅县 | 江口县 | 昌宁县 | 扶沟县 | 辽源市 | 乌兰县 | 沙坪坝区 | 凤山市 | 定安县 | 乌拉特后旗 | 丰都县 | 和顺县 | 宁安市 | 始兴县 | 灵武市 | 略阳县 | 宁南县 | 延川县 | 古浪县 | 同德县 | 九龙县 | 岱山县 | 晋中市 | 会理县 | 瑞昌市 | 道真 | 黑龙江省 | 鹤庆县 | 巴林右旗 | 上杭县 | 罗平县 | 固阳县 | 平度市 | 剑阁县 | 河源市 | 湄潭县 | 丹江口市 | 新沂市 | 临城县 | 保山市 | 广饶县 | 河间市 | 玉山县 | 皮山县 | 龙泉市 | 甘泉县 | 历史 | 玛多县 | 板桥市 | 晋州市 | 若羌县 | 大关县 | 荔浦县 | 巴南区 | 海阳市 | 盐山县 | 江津市 | 漳州市 | 军事 | 宜兴市 | 师宗县 | 商都县 | 郎溪县 | 灌阳县 | 湄潭县 | 天祝 | 察哈 | 家居 | 泸水县 | 隆子县 | 宣威市 | 江油市 | 英山县 | 石狮市 | 阳泉市 | 墨竹工卡县 | 石泉县 | 宁津县 | 喀喇沁旗 | 桂东县 | 原平市 | 黎川县 | 巫山县 | 芮城县 | 南平市 | 长岛县 | 巨野县 | 利川市 | 威海市 | 孝感市 | 泗洪县 | 四平市 | 永年县 | 会理县 | 仪征市 | 高陵县 | 神池县 | 钟山县 | 乌鲁木齐县 | 横峰县 | 石棉县 | 疏附县 | 板桥市 | 特克斯县 | 同德县 | 汉中市 | 福贡县 | 贡山 | 钦州市 | 定陶县 | 漠河县 | 图木舒克市 | 昌吉市 | 洪江市 | 凉山 | 天台县 | 镇原县 | 萝北县 | 渑池县 | 黎平县 | 麟游县 | 盐源县 | 雅江县 | 自治县 | 类乌齐县 | 昆明市 | 湖口县 | 巴彦淖尔市 | 乌拉特前旗 | 平山县 | 德安县 | 安宁市 | 容城县 | 枝江市 | 饶平县 | 紫阳县 | 阿图什市 | 灵石县 | 商都县 | 和顺县 | 巴马 | 古蔺县 | 黎川县 | 巴彦淖尔市 | 西乌珠穆沁旗 | 姜堰市 | 元氏县 | 石首市 | 宁河县 | 郴州市 | 华池县 | 石楼县 | 醴陵市 | 贺兰县 | 大石桥市 | 宜阳县 | 宁明县 | 宝坻区 | 综艺 | 信丰县 | 驻马店市 | 鹤山市 | 周口市 | 四子王旗 | 灵台县 | 桦南县 | 灵丘县 | 读书 | 耒阳市 | 二连浩特市 | 武清区 | 孝感市 | 密山市 | 民权县 | 腾冲县 | 文安县 | 天祝 |