經(jīng)常在Codepen上看到大俠們用SVG畫(huà)出不可思議的動(dòng)畫(huà)，我一直很好奇他們是怎么運(yùn)作的，總覺(jué)得這需要對(duì)SVG有足夠透徹的了解，并且自己畫(huà)出那些SVG圖案，才有辦法讓他動(dòng)起來(lái)。

但其實(shí)不然，今天教大家一個(gè)簡(jiǎn)單的小技巧，讓你快速實(shí)現(xiàn)一個(gè)svg動(dòng)畫(huà)！

打開(kāi)Codepen，點(diǎn)擊界面中的build按鈕，就可以使用動(dòng)畫(huà)構(gòu)建一個(gè)房子，并且讓它升起寥寥炊煙！

演示地址：https://codepen.io/johnYu243/pen/bGBVEwv

尋找精美的svg圖案

既然自己畫(huà)不出來(lái)，那我們就去找現(xiàn)成的庫(kù)，svg庫(kù)有很多，如Flaticon、iconfont、Iconfinder或icons8等網(wǎng)站會(huì)提供很多免費(fèi)的svg圖案。

分析svg圖案

打開(kāi)devtool觀察 svg 圖案，你會(huì)看到下面的結(jié)果：

element里頭path跟circle都是svg的DOM元素，分別表示svg圖案內(nèi)的線條與圓形。

舉個(gè)例子：

<path d="M 10 25          L 10 75          L 60 75          L 10 25">

上面代碼中的d的內(nèi)容：M代表將筆移動(dòng)到(10, 25)，接著L畫(huà)一條線到(10, 75)，最后回到起點(diǎn)畫(huà)出一個(gè)三角形。

通過(guò)devtool，我們可以看到每個(gè)path對(duì)應(yīng)圖案的哪個(gè)部分：

這時(shí)候應(yīng)該形成思路，既然我們可以知道每個(gè)元素對(duì)應(yīng)到圖案的哪個(gè)部分，我們就可以針對(duì)想要套上動(dòng)畫(huà)的DOM 元素來(lái)操作！

TimelineLite/TimelineMax 工具

如果單純通過(guò)id、className 來(lái)使用 CSS 或JavaScript 自行處理動(dòng)畫(huà)，難度還是頗高，更重要的是，要耗費(fèi)大量的時(shí)間

所以我們得借用工具，Timeline(Lite|Max)跟TweenMax是知名的GreenSock Animation Platform（簡(jiǎn)稱GSAP）推出的可創(chuàng)建時(shí)間軸（timeline）作為動(dòng)畫(huà)或其他時(shí)間軸的容器，這使得整個(gè)動(dòng)畫(huà)控制和精確管理時(shí)間變得簡(jiǎn)單。

GSAP甚至為我們提供了Ease Visualizer來(lái)展示每種Ease function的效果，更順帶附上代碼：

演示地址：https://codepen.io/johnYu243/pen/jOVbMzX

簡(jiǎn)單幾句代碼就能達(dá)到如下效果：

上手GSAP

GSAP的API功能十分強(qiáng)大，還有相關(guān)社區(qū)：官網(wǎng)文檔、論壇、TimelineMax中文手冊(cè)

在一開(kāi)始的房子構(gòu)建例子中，我主要使用的是TimelineMax的from與staggerFrom，這兩個(gè)API只需要設(shè)定初始值，他會(huì)在指定時(shí)間內(nèi)將補(bǔ)間動(dòng)畫(huà)完成：

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

這一步我們將CSS Selector #House > rect:nth-child(24) 這個(gè)元素，從scaleX為0開(kāi)始，以center(中心)為變形起點(diǎn)，利用Power2.easeOut，在一秒內(nèi)回復(fù)到原始狀態(tài)，并執(zhí)行補(bǔ)間動(dòng)畫(huà)。

    .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可以一次放入多個(gè)CSS Selector，用stagger這個(gè)屬性來(lái)設(shè)置數(shù)組中的Selector要以怎樣的時(shí)間差出現(xiàn)。

詳細(xì)API參數(shù)可以參考官方文檔

接著回到我們的SVG，在devtool的幫助下，要取出svg內(nèi)部元素的 CSS Selector 非常容易，在element面板中找到對(duì)應(yīng)的DOM元素點(diǎn)擊右鍵，選擇 Copy -> Copy selector，就可以直接復(fù)制到該元素的CSS Selector：

現(xiàn)在我們能取得svg 中任意部分的CSS Selector，也知道怎么用GSAP API 來(lái)進(jìn)行補(bǔ)間動(dòng)畫(huà)，現(xiàn)在是時(shí)候?qū)⑵浣Y(jié)合起來(lái)！

我們先調(diào)整下基本布局，一般在空白Html內(nèi)直接放入svg時(shí)，圖案大多會(huì)緊靠頁(yè)面左上角，我們可以套用個(gè)margin: 0 auto將其置中，看起來(lái)會(huì)順眼一些，你也能額外加些padding。我們?cè)陧?yè)面添加一個(gè)按鈕來(lái)調(diào)用動(dòng)畫(huà)：

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

接著我們使用TimelineMax提供的staggerFrom函數(shù)，利用devtool將滑板車(chē)的輪子部分找出來(lái)，復(fù)制它們的CSS Selector，放入staggerFrom函數(shù)參數(shù)中，設(shè)定x與y軸的scale都從0開(kāi)始，由center增長(zhǎng)，采用Bounce.easeOut的ease function ，而四個(gè)Selector間以stagger: 0.2的屬性值作為補(bǔ)間動(dòng)畫(huà)出現(xiàn)的時(shí)間差：

  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       }     )

簡(jiǎn)單幾行代碼，就能讓我們的滑板車(chē)動(dòng)起來(lái)！

演示地址：https://codepen.io/johnYu243/pen/poNjNzz

補(bǔ)間是一個(gè)術(shù)語(yǔ)，用于描述逐幀序列，有時(shí)也稱為"中間"。 在那個(gè)地方，一個(gè)動(dòng)作導(dǎo)致下一個(gè)動(dòng)作產(chǎn)生一個(gè)流暢的動(dòng)作。

完善動(dòng)畫(huà)

你可以把TimelineMax想像成時(shí)間軸，動(dòng)畫(huà)按指定順序執(zhí)行，而staggerFrom則可以同時(shí)讓多個(gè)DOM元素以微小時(shí)間差的順序啟動(dòng)，另外我們還可以設(shè)置一些Flag來(lái)指定要等到哪幾個(gè)動(dòng)畫(huà)完成后，才接續(xù)其他動(dòng)畫(huà)。

最后，發(fā)揮自己的創(chuàng)意，使用各種API打出一套組合拳：

演示地址：https://codepen.io/johnYu243/pen/yLVYVey

結(jié)論

看到這里，躍躍欲試了嗎？

總之，我自己覺(jué)得蠻有趣的，希望或多或少對(duì)讀到這篇文章的人有點(diǎn)幫助。

最后給大家分享一個(gè)很酷的demo，來(lái)自我的文章封面

參考文章

GreenSock Animation Platform

How to Create Beautiful SVG Animations Easily