作者yshlptt (小y)
看板Web_Design
標題[分享] 四個 SVG 動畫應用範例
時間Thu Nov 13 15:15:16 2014
版友們大家好！
這次我整理了一些 SVG 動畫的作法及原理：
http://mzl.la/4-svg-anim-examples
文中有四個 codepen 範例，
完整的應用也可以參考文內附的 github 原始碼連結。
會開始使用 SVG 動畫一開始是在 GardenStudio 網站上看到描邊動畫，
http://gardenestudio.com.br/
發現是用 SVG 做的，於是開始研究各種 SVG 動畫的用法。
基本上 SVG 在網頁上使用起來不會太難，
而且能做到跟 Flash 類似的動畫效果（形狀漸變、導引線動畫等），
也不怕縮放後會有鋸齒顆粒。
可惜的是 IE9 以上才開始有靜態 SVG 的支援，
且目前為止仍不支援 SVG SMIL Animation。
想要在 IE9 以上運作 SVG 動畫，
只能透過 Javascript 來操作物件的屬性，
或者透過額外的 Javascript 套件如 Snap.svg 等。
要使用何種作法、或是否採用 SVG，
就要看網頁在哪些瀏覽器呈現最佳的效果囉！
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 118.163.10.190
※ 文章網址: http://webptt.com/m.aspx?n=bbs/Web_Design/M.1415862920.A.64D.html
1F：推 crossdunk: 推 11/13 16:03
2F：→ GoalBased: SVG很酷..雖然對我工作沒幫助 但很想學 11/13 18:32
3F：→ GoalBased: 重點是，可以做立體的 11/13 18:32
4F：推 ilovekebi: 推 11/13 20:39
5F：推 toshii: SVG用的好很酷呀, 正在學 11/14 10:23