十分鍾教你用svg做出精美的動畫!


前言

經常在Codepen上看到大俠們用SVG畫出不可思議的動畫,我一直很好奇他們是怎么運作的,總覺得這需要對SVG有足夠透徹的了解,並且自己畫出那些SVG圖案,才有辦法讓他動起來。

但其實不然,今天教大家一個簡單的小技巧,讓你快速實現一個svg動畫!

打開Codepen,點擊界面中的build按鈕,就可以使用動畫構建一個房子,並且讓它升起寥寥炊煙!🏭

codepen

尋找精美的svg圖案

既然自己畫不出來,那我們就去找現成的庫,svg庫有很多,如FlaticoniconfontIconfindericons8等網站會提供很多免費的svg圖案。

分析svg圖案

打開devtool觀察 svg 圖案,你會看到下面的結果:

element里頭pathcircle都是svg的DOM元素,分別表示svg圖案內的線條與圓形。

舉個例子🌰:

<path d="M 10 25 L 10 75 L 60 75 L 10 25"> 復制代碼

上面代碼中的d的內容:M代表將筆移動到(10, 25),接着L畫一條線到(10, 75),最后回到起點畫出一個三角形。

通過devtool,我們可以看到每個path對應圖案的哪個部分:

這時候應該形成思路,既然我們可以知道每個元素對應到圖案的哪個部分,我們就可以針對想要套上動畫的DOM 元素來操作!

TimelineLite/TimelineMax 工具

如果單純通過id、className 來使用 CSS 或JavaScript 自行處理動畫,難度還是頗高,更重要的是,要耗費大量的時間

所以我們得借用工具,Timeline(Lite|Max)跟TweenMax是知名的GreenSock Animation Platform(簡稱GSAP)推出的可創建時間軸(timeline)作為動畫或其他時間軸的容器,這使得整個動畫控制和精確管理時間變得簡單。

GSAP甚至為我們提供了Ease Visualizer來展示每種Ease function的效果,更順帶附上代碼:

codepen

簡單幾句代碼就能達到如下效果:

上手GSAP

GSAP的API功能十分強大👍,還有相關社區:官網文檔論壇TimelineMax中文手冊

在一開始的房子構建🌰中,我主要使用的是TimelineMax的fromstaggerFrom,這兩個API只需要設定初始值,他會在指定時間內將補間動畫完成:

  tl.from("#House > rect:nth-child(24)", 1, { scaleX: 0, transformOrigin: "center", ease: Power2.easeOut }) 復制代碼

這一步我們將CSS Selector #House > rect:nth-child(24) 這個元素,從scaleX為0開始,以center(中心)為變形起點,利用Power2.easeOut,在一秒內回復到原始狀態,並執行補間動畫。

    .staggerFrom(
      ["#House > path:nth-child(34)", "#House > path:nth-child(32)"], 0.8, { scaleY: 0, transformOrigin: "bottom", ease: Bounce.easeOut, stagger: 0.2 }, 0, "scene1+=0.5" ) 復制代碼

from相似,只是staggerFrom可以一次放入多個CSS Selector,用stagger這個屬性來設置數組中的Selector要以怎樣的時間差出現。

詳細API參數可以參考官方文檔

接着回到我們的SVG,在devtool的幫助下,要取出svg內部元素的 CSS Selector 非常容易,在element面板中找到對應的DOM元素點擊右鍵,選擇 Copy -> Copy selector,就可以直接復制到該元素的CSS Selector:

現在我們能取得svg 中任意部分的CSS Selector,也知道怎么用GSAP API 來進行補間動畫,現在是時候將其結合起來!

我們先調整下基本布局,一般在空白Html內直接放入svg時,圖案大多會緊靠頁面左上角,我們可以套用個margin: 0 auto將其置中,看起來會順眼一些,你也能額外加些padding。我們在頁面添加一個按鈕來調用動畫:

<!--html part--> <button onclick="animateBike()"> Build! </button> <!--css part--> <style> #Capa_1 { margin: 0 auto; display: block; width: 256px; height: 100%; } </style> 復制代碼

接着我們使用TimelineMax提供的staggerFrom函數,利用devtool將滑板車的輪子部分找出來,復制它們的CSS Selector,放入staggerFrom函數參數中,設定x與y軸的scale都從0開始,由center增長,采用Bounce.easeOut的ease function ,而四個Selector間以stagger: 0.2的屬性值作為補間動畫出現的時間差:

  const tl = new TimelineMax(); tl.staggerFrom( [ "#Capa_1 > g > path:nth-child(1)", "#Capa_1 > circle:nth-child(7)", "#Capa_1 > path:nth-child(6)", "#Capa_1 > circle:nth-child(5)" ], 1, { scaleY: 0, scaleX: 0, transformOrigin: "center", ease: Bounce.easeOut, stagger: 0.2 } ) 復制代碼

簡單幾行代碼,就能讓我們的滑板車動起來!

codepen

補間是一個術語,用於描述逐幀序列,有時也稱為"中間"。 在那個地方,一個動作導致下一個動作產生一個流暢的動作。 
復制代碼

完善動畫

你可以把TimelineMax想像成時間軸,動畫按指定順序執行,而staggerFrom則可以同時讓多個DOM元素以微小時間差的順序啟動,另外我們還可以設置一些Flag來指定要等到哪幾個動畫完成后,才接續其他動畫。

最后,發揮自己的創意,使用各種API打出一套組合拳 👊:

codepen

結論🎉

最后給大家分享一個很酷的demo

參考文章 📜

GreenSock Animation Platform

How to Create Beautiful SVG Animations Easily


作者:三余
鏈接:https://juejin.cn/post/6930412294149472269
來源:掘金
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM