我在通過浏覽網頁尋找一個整潔好用的JavaScript動畫庫時，發現許多“推薦”的動畫庫都已經有一段時間沒有維護了。
經過一些研究，我已經收集了11個最好的庫可以在你的應用程式中使用。
Three.js
擁有超過43K stars，這個流行的庫擁有一個強大的方式在浏覽器中來建立三維動畫，以WebGL作為更直覺的方式。這個庫提供了、、css3d和webgl渲染器，使我們能夠在裝置和浏覽器之間建立豐富的互動體驗。該庫于2010年4月首次面世，目前仍有近1000名參與者開發。
項目位址：https://github.com/mrdoob/three.js/
Anime.js
擁有超過20K星，Anime.JS是一個javascript動畫庫，與CSS屬性，獨立的CSS transforms，svg或任何dom屬性和javascript對象一起工作。此庫允許您連結多個動畫屬性、将多個執行個體同步在一起、建立時間線等。
Github上的項目位址：https://github.com/juliangarnier/anime
Mo.js
擁有14kStars，這個庫是一個用于Web的運動圖形工具帶，具有簡單的聲明性API、跨裝置相容性和超過1500個單元測試。您可以圍繞DOME或SVG DOME移動物體，或者建立獨特的mo.js對象。盡管文檔有點稀少，但示例也很多。
Github上的項目位址：https://github.com/legomushroom/mojs
Popmotion
擁有14K星，這個功能性和reactive的動畫庫的體積隻有11kb。它允許開發人員從動作中建立動畫和互動，這些動作是可以啟動和停止的值，并使用css、svg、react、three.js和任何接受數字作為輸入的API來建立。
在Github上的項目位址：https://github.com/Popmotion/popmotion
Vivus
擁有超過10萬顆星，vivus是一個零依賴性的javascript類，它可以讓你對SVG進行動畫處理，讓它們看起來像是被繪制的。您可以使用許多可用動畫之一，或建立自定義腳本來繪制SVG。立即檢視vivus，擷取一個實時示例，動手操作吧。在Github上的項目位址為：https://github.com/maxwellito/vivus
GreenSockJS
GreenSockJS是一個用于建立高性能、零依賴性、跨浏覽器動畫的JavaScript庫，據稱該庫已用于400多萬個網站。GreenSockJS具有靈活性，可與React、Vue、Angular和Vanilla JS配合使用。gsdevtools還可以幫助使用gsap建構Dubug動畫。
在Github上的位址為：https://github.com/greensock/GreenSock-JS
Scroll Reveal
該庫擁有15K星，無依賴關系，為Web和移動浏覽器提供了簡單的滾動動畫，以動畫方式顯示滾動内容。它支援多種簡潔的效果類型，甚至允許您使用自然語言定義動畫。
在Github上的項目位址為：https://github.com/jlmakes/scrollreveal
Hover(CSS)
這是一個CSS動畫庫。有20K星，hover提供了CSS3支援的懸停效果的集合，可應用于連結、按鈕、徽标、SVG、特色圖檔等，可以在CSS、SASS和LESS中使用。您可以複制和粘貼您想在自己的樣式表中使用的效果，或者引用樣式表。
Github上的項目位址為：https://github.com/IanLunn/Hover
Kute.js
一個成熟的原生javascript動畫引擎，具有跨浏覽器動畫的基本功能。重點是代碼品質、靈活性、性能和大小(核心引擎最小17K，gzip為5.5K)。庫也是可擴充的，是以您可以添加自己的功能。
在Github上的項目位址：https://github.com/thednp/kute.js/
Typed.js
這個6K星的庫基本上允許您以標明的速度為字元串來建立輸入打字動畫。您還可以在頁面上放置一個HTML DIV并從中讀取，以允許對禁用javascript的搜尋引擎和使用者進行通路。這個庫既受歡迎，也非常有用。
在Github上的位址：https://github.com/mattboldt/typed.js
Lottie
lottie是一個用于的移動端類庫，在Android和iOS端渲染Adobe After Effects的動畫，并以本地方式呈現。同樣适用于Web、ReactNative和Windows平台。由AirBnb公司出品。
在Github上的位址為：https://github.com/airbnb/lottie-web
如果覺得這篇文章對你有所幫助，請點贊加關注^^