2022 年最好的 10 個 JavaScript 動畫庫
如果你想抓住你的網站訪問者的注意力，還有什麼能比動畫更好呢？使用網絡上免費提供的許多應用引擎，你可以很容易地讓你的網站元素褪色、跳動或嗖嗖作響。在今天的文章中，我們將看到 JavaScript 動畫庫如何幫助實現這一切。
首先，介紹一下 JavaScript 的動畫
添加只需要一個動作的簡單動畫（例如，切換）是一回事。對於這一點，你總是可以使用簡單的 CSS 動畫。但是，對於更復雜或高級的效果。JavaScript 是一個更好的工具。不言而喻，使用 JavaScript 來創建動畫比使用 CSS 更具挑戰性。
然而，JavaScript 可以處理 CSS 所不能處理的事情。這給了開發者更多的權力來控制需要協調多個移動部件的複雜動畫。
JavaScript 動畫是通過在一個元素的樣式上添加漸變來實現的。你可以把它們作爲你代碼的一部分在線添加，或者把它們包含在其他對象中。在渲染時，這些變化由一個定時器調用。另外，你可以通過調整變化的時間間隔來控制動畫的連續性。
1. Anime.js
讓我們從 Anime.js 開始這個 JavaScript 動畫庫的列表。這個輕量級的動畫庫在 GitHub 上有 35K 多顆星。通過一個強大的 API 工作，你可以用它來爲 HTML、CSS、JS、SVG 和 DOM 屬性製作動畫。通過一個內置的交錯系統，它可以使創建波紋、定向運動、跟隨和重疊的效果顯得很簡單。這個系統在定時和屬性上都是可用的。
使用內置的回調和控制函數，你可以做很多事情。例如，你可以同步播放、暫停、控制、逆轉和觸發事件。
2. Velocity.js
Velocity.js 結合了 jQuery 和 CSS 轉換的優點。它的評分接近 17K 星，在 GitHub 上有接近 17K 顆星，並擁有像 WhatsApp 和 Motorola 這樣的傑出用戶。Mailchimp. 循環、反轉、延遲、隱藏 / 顯示元素、屬性數學（+、-、*、/）和硬件加速，都是其功能的一部分。
你可以使用 Velocity.js 來滾動 browser windows. 它既可以與瀏覽器中加載的 jQuery 一起工作，也可以獨立於它，甚至可以撤消之前的動畫效果。
3. Popmotion
在接近 18K 星，Popmotion 是一個適用於任何 JavaScript 環境的功能性動畫庫。它幾乎可以與任何接受數字輸入的 API 一起工作，如 React，Three.js，A-Frame 和 PixiJS。
Popmotion 的重量只有 11.7kB，但卻很有衝擊力。它的特點是動畫，如關鍵幀、衰減、用於同步多個實例的時間線等。你可以錯開任何系列的動畫或函數，也可以使用純函數來組成你自己的配置。
4. Three.js
Three.js 以 60K 以上的星級在這個 JavaScript 動畫庫列表中排名第一。它依靠的是 WebGL 來創建和渲染瀏覽器中的 3D 動畫。
有大量的文檔可以幫助你，一旦你通過了學習曲線，使用這個庫就沒有什麼不能完成的。首先，使用 Three.js 編輯器，你可以創建一個場景。此後，你可以添加幾何圖形，並調整燈光和攝像機。材料、紋理、物體、顏色和霧化都可以進行調整，最後的文件可以發佈到你的項目中。
5. GreenSock JS
GreenSock 的 GSAP 與一組小的 JavaScript 文件一起工作，使動畫在所有主要的瀏覽器中看起來很好。它能順利地將多個動畫屬性連接起來，並消除瀏覽器的錯誤。
GSAP 的動作包括在 Canvas 上創建動畫，以及爲場景中的任何對象製作動畫。還可以逐步揭示、變形或沿路徑移動任何對象。爲此，它與一堆軟件應用一起工作，如 SVGPlugins、PixiPlugin、WebGL、Adobe Animate 和 EaseJS。它的模塊化結構有助於你選擇你需要的功能。擁有 800 萬用戶和 10K + 顆星的 GitHub 上有 800 萬用戶和 10K 多顆星，這個強大的庫有很多優點。
6. AniJS
在這個列表中的 JavaScript 庫中，AniJS 有些獨特。它允許你在一個簡單的 "句子" 結構中爲元素添加動畫，這對剛接觸動畫的人來說是很好的。更重要的是，它的非特定性質使得幾乎每個人都可以在日常的用戶體驗設計中使用它。
上 GitHub，AniJS 的評分超過了 3.5K 星。它不依賴任何第三方庫，通常有助於加快開發速度。它在安卓和 iOS 上都能很好地工作。Android and iOS，也可以在所有流行的瀏覽器中使用。
7. Mo.js
運動圖形在動畫中起着很大的作用，Mo.js 是一個可以讓你產生影響的選擇。由於有大量的教程和演示幫助，初學者可能不會發現創建幾何形狀和時間動畫的難度。
這些 API 可能看起來很簡單，但你可以用它們做很多事情。在這個工具包中，你會發現一個曲線編輯器和時間線編輯器來幫助你建立你的動畫，以及一個播放器來控制你的動畫。有不同的模塊用於交錯、緩和、時間線和更多。所有這些爲 Mo.js 贏得了接近 16K 星的評價。
8. Vivus.js
如果你想在屏幕上實時地模仿鋼筆畫，你會用 Vivus 達到目的。它可以讓你對 SVG 進行動畫處理，給人以被繪製的感覺。由於它沒有任何依賴性，所以它是快速和輕便的。
你可以選擇任何一種可用的動畫 - 延遲、同步或 OneByOne。否則，你也可以創建一個自定義腳本來繪製你的 SVG。爲了提高靈活性，你可以用一個簡單的 JavaScript 函數來覆蓋每個路徑的動畫。超過 1.3 萬名用戶對這個庫豎起了大拇指。
9. ScrollReveal JS
如果你希望在你的網頁元素滾動進入視圖時爲它們製作動畫，ScrollReveal 不會讓你失望。這個簡單易學的動畫庫沒有任何依賴性，在 GitHub 上有 18.5K 多顆星。
ScrollReveal 支持不同類型的效果，在網絡和移動瀏覽器上運行良好。它故意用一個裸露的配置來工作，所以你可以把它作爲你的創造力的畫布。爲了使動畫的效果最大化，創作者建議你少用它。
10. Typed.js
Typed.js 是一個簡單的庫（更像是一個插件，真的），用於在你的屏幕上對打字進行動畫處理。一旦你輸入任何字符串，訪問者就可以看到它以設定的速度被打出來。不僅如此，你還可以操作退格按鈕，以及開始一個新的句子。如果你希望讓禁用 JS 的訪問者也能看到，你只需要在頁面上放置一個 HTML div。這樣一來，機器人和搜索引擎也能查看輸入的文字。
該庫在 GitHub 的評分爲 9.5K + 星，強大的用戶包括 Slack 和 Envato。
11. Lottie by AirBnB
Lottie 是一種輕量級的動畫圖形格式，平衡了高質量的圖形和渲染成本。它使應用程序更小，幷包括動態功能。它可以用於網絡、安卓、iOS 和物聯網，不需要額外的軟件。
Lottie 可以在任何支持 JavaScript 的瀏覽器上運行。動畫是以純文本形式存儲的，是人類可讀的。由於文本數據是以 JSON 格式存儲的，它很容易被任何 JavaScript 環境同化。這使得它成爲一種流行的動畫圖形格式，以增強移動前端。僅僅是安卓版本就有接近 3 萬顆星。
來源： https://www.toutiao.com/a7073953172049445411/?log_from=3dbc5814ba02e_1647307822071
本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/YfYpe2qAabzylT8udjHs-A