2018年值得期待11個Javascript動畫庫

　　在瀏覽網頁尋找一個整潔的Javascript動畫庫時，我發現很多“recommended”的動畫庫一段時間都沒有維護。

　　經過一些研究，我收集了11個最好的庫，在你的應用程式中使用。我還新增了一些，主要是非維護的，有用的庫。

　　使用UI元件時，您還可以使用Bit輕鬆地在不同應用程式之間共享這些元件，而不是複製貼上它們，從不同專案進行更改並與其他專案協作。

　　Bit - 使用程式碼元件共享和構建_Bit可幫助您在專案和應用程式之間共享，發現和使用程式碼元件，以構建新功能和... _bitsrc.io

　　使用純CSS

　　在深入研究這些庫之前，不要忘記使用純CSS。為什麼？因為它是標準的，它可以提高效能（GPU），提供向後和向前相容性，它可能是建立動畫的最有效方法。這裡有10個純粹的純CSS動畫示例。

　　純CSS土星呼啦圈

　　1. Three.js

　　超過43K的星級，這個流行的庫是使用WebGL在瀏覽器上建立3D動畫的好方法。提供<canvas>，<svg>，CSS3D和WebGL渲染器，這個庫讓我們可以跨裝置和瀏覽器建立豐富的互動式體驗。該圖書館於2010年4月首次推出，目前仍由近1,000名參與者開發。

　　mrdoob/three.js _three.js — JavaScript 3D library._github.com

　　2. Anime.js

　　超過20K的 stars，Anime是一個JavaScript動畫庫，可以處理CSS屬性，單個CSS轉換，SVG或任何DOM屬性以及JavaScript物件。此庫允許您連結多個動畫屬性，將多個例項同步，建立時間軸等。

　　juliangarnier/anime _anime — JavaScript Animation Engine_github.com

　　3. Mo.js

　　這個庫是14K星，是一個用於Web的動態圖形工具帶，具有簡單的宣告API，跨裝置相容性和超過1500個單元測試。您可以在DOME或SVG DOME周圍移動東西或建立唯一的mo.js物件。雖然文件有些稀缺，但是示例很豐富，這裡有CSS技巧的介紹。

　　legomushroom/mojs _mojs — motion graphics toolbelt for the web_github.com

　　4. Velocity

　　在15Kstars,，Velocity是一個快速的Javascript動畫引擎，具有與jQuery的$ .animate（）相同的API。它具有色彩動畫，變換，迴圈，緩動，SVG支援和滾動。這是Velocity高效能引擎的細分 ，這裡是使用該庫的SVG動畫介紹。

　　julianshapiro/velocity _velocity — Accelerated JavaScript animation._github.com

　　5. Popmotion

　　在14Kstars,，這個功能和反應動畫庫只重11kb。它允許開發人員從動作建立動畫和互動，動作是可以啟動和停止的，並使用CSS，SVG，React，three.js和任何接受數字作為輸入的API建立。

　　Popmotion/popmotion _popmotion — A functional, reactive animation library._github.com

　　6. Vivus

　　在超過10K的stars，Vivus是一個零依賴的JavaScript類，可以讓你為SVG製作動畫，讓它們具有被繪製的外觀。您可以使用許多可用動畫之一，或建立自定義指令碼來繪製SVG。檢視Vivus-instant獲取實時示例，親自動手。

　　maxwellito/vivus _vivus — JavaScript library to make drawing animation on SVG_github.com

　　7. GreenSock JS

　　GSAP是一個JavaScript庫，用於建立高效能，零依賴性，跨瀏覽器動畫，聲稱在超過400萬個網站中使用。 GSAP非常靈活，可以與React，Vue，Angular和vanilla JS一起使用。GSDevtools還可以幫助改進使用GSAP構建的動畫。

　　greensock/GreenSock-JS _GreenSock-JS — GreenSock’s GSAP JavaScript animation library (including Draggable)._github.com

　　8. Scroll Reveal

　　憑藉15K星和零依賴，該庫為Web和移動瀏覽器提供了簡單的滾動動畫，以動畫的方式顯示滾動內容。它支援多種簡潔的效果，甚至可以讓您使用自然語言定義動畫。這是一個簡短的SitePoint教程。

　　jlmakes/scrollreveal _scrollreveal — Easy scroll animations for web and mobile browsers._github.com

　　9. Hover (CSS)

　　嗯，這是一個CSS庫。在20K星級，Hover提供了CSS3動力懸停效果的收集，可應用於連結，按鈕，徽標，SVG，特色影像等，可在CSS，Sass和LESS中使用。您可以複製並貼上要在自己的樣式表中使用的效果或引用樣式表。

　　IanLunn/Hover _Hover — A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so…_github.com

　　10. Kute.js

　　一個完全成熟的原生JavaScript動畫引擎，具有跨瀏覽器動畫的基本功能。重點是程式碼質量，靈活性，效能和大小（核心引擎是17k min和5.5k gzipped） - 這是一個demo。該庫也是可擴充套件的，因此您可以新增自己的功能。

　　thednp/kute.js _kute.js — KUTE.js is a native Javascript animation engine featuring great code quality, badass performance, SVG…_github.com

　　11. Typed.js

　　T這個6K星庫基本上允許您以選定的速度為字串建立打字動畫。您還可以在頁面上放置HTML div並從中讀取以允許搜尋引擎和禁用JavaScript的使用者訪問。由Slack和其他人使用，這個庫既流行又令人驚訝地有用。

　　mattboldt/typed.js _typed.js — A JavaScript Typing Animation Library_github.com

• 還可以看看: iTyped

　　延遲補充：Airbnb的Lottie

　　Lottie是一個用於Web的移動庫，iOS用於解析使用 Bodymovin匯出為json的 Adobe After Effects 動畫，並將其原生呈現。

　　airbnb/lottie-web _lottie-web - Render After Effects animations natively on Web, Android and iOS, and React Native…_github.com