為什麼這篇SVG 動畫鄉民發文收入到精華區:因為在SVG 動畫這個討論話題中,有許多相關的文章在討論,這篇最有參考價值!作者yshlptt (小y)看板Web_Design標題[分享] 四個 SVG 動畫應用範例時間Th...
SVG 動畫 在 大辛先生 ︳社群經營/簡報設計 Instagram 的精選貼文
2021-07-11 08:50:54
原訂九月會執行的線上課程,因為疫情的關係,決定提前開始啦~ ⭐報名連結在我的主頁⭐ 這次的【BXT簡報改造計劃】為全新的簡報設計課程,為期兩個月,四次兩小時的線上直播課程,讓學員們能全方位的學習簡報設計的技巧,且留有足夠的時間讓大家練習及做作業,讓學習不僅更加紮實,還確保學員們能夠靈活運用學...
版友們大家好!
這次我整理了一些 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://www.ptt.cc/bbs/Web_Design/M.1415862920.A.64D.html