使用Anime.js製作火箭升空的動畫效果

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

             動畫效果展示

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

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

  本人沒有任何繪製矢量圖的能力和經驗，所以這些素材也要在網際網路上找。我對於素材的預期有一個標準那就是儘可能的讓所有的素材風格統一，沒有人喜歡看一堆風格不統一的元素亂湊在一起，顯得非常不專業。於是我又物色到了一個開源的svg素材網站：undraw和阿里巴巴icon。undraw有豐富的基於web項目的svg素材：

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

  我可以從這兩個網站下載svg素材，然後使用Figma為svg做一些簡單編輯：

Figma操作界面

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

首先根據你的web project類型選擇安裝anime的方式，如果只是個簡單的html靜態頁面不依賴任何前端編譯工具，那麼你只要使用script標籤引入html：

//下載anime.min.js，引入本地文件<script src="anime.min.js"></script>
如果你的項目使用了npm那麼可以：
npm install animejs //ESM方式引入import anime from 'animejs/lib/anime.es.js';// 或者 commonJS方式引入const anime = require('animejs');
引入anime之後就可以簡單的調用了，例如我想製作一個svg素材動畫。先看下動畫效果：

徐徐上升的火箭下面有四朵熊熊燃燒火焰，那麼是如何實現的呢？
四個上下擺動的火焰是svg的四個Vector節點：
          <svg id="rocket-svg"               width="1136"               height="815"               viewBox="0 0 1136 815"               fill="none"               xmlns="http://www.w3.org/2000/svg">               ....              <g id="fire1">                <path id="Vector_41"                      d="M424.86 649.65H424.21C421.149 649.65 418.214 648.434 416.05 646.27C413.886 644.106 412.67 641.171 412.67 638.11V585.25H436.4V638.11C436.4 641.171 435.184 644.106 433.02 646.27C430.856 648.434 427.921 649.65 424.86 649.65Z"                      fill="url(#paint3_linear)" />              </g>              <g id="fire2">                <path id="Vector_42"                      d="M501.19 651.4H500.54C497.479 651.4 494.544 650.184 492.38 648.02C490.216 645.856 489 642.921 489 639.86V587H512.73V639.86C512.73 642.921 511.514 645.856 509.35 648.02C507.186 650.184 504.251 651.4 501.19 651.4Z"                      fill="url(#paint4_linear)" />              </g>              <g id="fire3">                <path id="Vector_43"                      d="M550.19 650.4H549.54C546.479 650.4 543.544 649.184 541.38 647.02C539.216 644.856 538 641.921 538 638.86V586H561.73V638.86C561.73 641.921 560.514 644.856 558.35 647.02C556.186 649.184 553.251 650.4 550.19 650.4Z"                      fill="url(#paint5_linear)" />              </g>              <g id="fire4">                <path id="Vector_44"                      d="M628.19 649.4H627.54C624.479 649.4 621.544 648.184 619.38 646.02C617.216 643.856 616 640.921 616 637.86V585H639.73V637.86C639.73 640.921 638.514 643.856 636.35 646.02C634.186 648.184 631.251 649.4 628.19 649.4Z"                      fill="url(#paint6_linear)" />              </g>                              ....
<script>
import anime from 'animejs/lib/anime.es.js';    anime({      targets: "#fire1",       translateY: 30,       direction: "alternate",      loop: true,      easing: "linear",    });    anime({      targets: "#fire2",      translateY: 40,      direction: "alternate",      loop: true,      easing: "linear",    });    anime({      targets: "#fire3",      translateY: 45,      direction: "alternate",      loop: true,      easing: "linear",    });    anime({      targets: "#fire4",      translateY: 35,      direction: "alternate",      loop: true,      easing: "linear",    });</script>



這種方式可以製作簡單的動畫效果，但是想要製作出比較豐富的動畫效果還是需要花時間去了解web動畫的標準庫例如CSS3，這只是一種可以快速實現的方式當時，今天的分享就到這裡。
相關連結：
     https://github.com/juliangarnier/anime/
     https://undraw.co/illustrations
      https://www.figma.com/files/recent
更多關於CScrit頻道的信息:
愛發電主頁: https://afdian.net/@CScript
Telegram群組: https://t.me/CScriptGroup 
Norton的微博: https://www.weibo.com/u/25934729
加入微信交流群請添加頻道小助手微信
小助手微信
如果你覺得本公眾號對你有幫助的話，請點讚！轉發！在看！關注！你們的支持是我創作的最大動力✌️✌️
👇👇👇【閱讀全文】更多趣味編程在這裡！