由頭：最近在公司第一次使用Golang做了一個beta版的小型Saas項目，在編寫項目前端主頁的時候看到很多類似項目首頁都多少添加了動畫效果，這種展示方式結(jié)合文案顯得格外生動。于是我就準(zhǔn)備在項目中添加動畫元素。

? 經(jīng)過搜索引擎的內(nèi)容索引，我發(fā)現(xiàn)現(xiàn)在這個階段可以實現(xiàn)動畫效果有幾種方式：gif, css3, openGL，canvas，Javascript等。我首先排除了gif這種方式，原因很簡單這種動畫方式會隨著網(wǎng)頁的縮放失真，我們無法預(yù)期用戶展開網(wǎng)站之后的尺寸所以就先pass掉了。其他幾種方式都已經(jīng)成為了新的web標(biāo)準(zhǔn)，而且都是通過矢量方式實現(xiàn)動畫效果，不會損失渲染后的效果。?對于我來說接下來還有個難題，那就是如何在短時間內(nèi)上手其中之一應(yīng)用到項目，畢竟我沒有在項目開發(fā)周期中預(yù)留這部分的時間，這也算是個讓人難以抉擇的問題。

??做項目就是這樣，想要把新的東西引入到項目，會面對很多不確定性。然而為了拓展一下邊界，總是得面對這種不確定性，才能在不確定性中受益。依照我web項目開發(fā)的經(jīng)驗，既然這幾種動畫效果的實現(xiàn)方式都已經(jīng)成為web標(biāo)準(zhǔn)，那么肯定有很多人已經(jīng)或者至少想過封裝出更加易用的工具庫或者是腳手架。繼續(xù)搜索??"web animation package", 然后找到了一個匹配度很高的JS庫：anime,使用anime可以為dom結(jié)構(gòu)，css屬性，svg圖片，JS對象創(chuàng)建動畫效果，看了下文檔，簡單的動畫效果很容易實現(xiàn)?，F(xiàn)在有動畫制作的工具庫了，接下來就準(zhǔn)備著手準(zhǔn)備動畫素材。

??本人沒有任何繪制矢量圖的能力和經(jīng)驗，所以這些素材也要在互聯(lián)網(wǎng)上找。我對于素材的預(yù)期有一個標(biāo)準(zhǔn)那就是盡可能的讓所有的素材風(fēng)格統(tǒng)一，沒有人喜歡看一堆風(fēng)格不統(tǒng)一的元素亂湊在一起，顯得非常不專業(yè)。于是我又物色到了一個開源的svg素材網(wǎng)站：undraw和阿里巴巴icon。undraw有豐富的基于web項目的svg素材：

阿里巴巴icon有豐富icon的可供選擇：

? 我可以從這兩個網(wǎng)站下載svg素材，然后使用Figma為svg做一些簡單編輯：

? 以上都是準(zhǔn)備階段的闡述，好像略微有些啰嗦。我的目的主要是為了盡量詳細(xì)的陳述我在做這件事的整個過程，包括思維和各種嘗試突破我已有的知識體系可以探索的邊界。接下來重點來啦，那么如何使用animejs結(jié)合圖片素材制作web動畫？在此我只講一個簡單的小案例非常簡單。

提示：代碼塊如果有樣式問題可以通過CScript公眾號查看

首先根據(jù)你的web project類型選擇安裝anime的方式，如果只是個簡單的html靜態(tài)頁面不依賴任何前端編譯工具，那么你只要使用script標(biāo)簽引入html：

“<script?src="anime.min.js"></script>”

如果你的項目使用了npm那么可以：

引入anime之后就可以簡單的調(diào)用了，例如我想制作一個svg素材動畫。先看下動畫效果：

徐徐上升的火箭下面有四朵熊熊燃燒火焰，那么是如何實現(xiàn)的呢？

四個上下擺動的火焰是svg的四個Vector節(jié)點：

這種方式可以制作簡單的動畫效果，但是想要制作出比較豐富的動畫效果還是需要花時間去了解web動畫的標(biāo)準(zhǔn)庫例如CSS3，這只是一種可以快速實現(xiàn)的方式當(dāng)時，今天的分享就到這里。

相關(guān)鏈接：

? ? ?https://github.com/juliangarnier/anime/

?? ??https://undraw.co/illustrations

? ? ? https://www.figma.com/files/recent

更多關(guān)于CScrit頻道的信息:

• 愛發(fā)電主頁: https://afdian.net/@CScript
  

• Telegram群組: https://t.me/CScriptGroup?

• Norton的微博: https://www.weibo.com/u/25934729

• 加入微信交流群請?zhí)砑宇l道小助手微信