在瀏覽網(wǎng)頁(yè)尋找一個(gè)整潔的Javascript動(dòng)畫(huà)庫(kù)時(shí)，我發(fā)現(xiàn)很多“recommended”的動(dòng)畫(huà)庫(kù)一段時(shí)間都沒(méi)有維護(hù)。

經(jīng)過(guò)一些研究，我收集了11個(gè)最好的庫(kù)，在你的應(yīng)用程序中使用。我還添加了一些，主要是非維護(hù)的，有用的庫(kù)。

使用UI組件時(shí)，您還可以使用Bit輕松地在不同應(yīng)用程序之間共享這些組件，而不是復(fù)制粘貼它們，從不同項(xiàng)目進(jìn)行更改并與其他項(xiàng)目協(xié)作。

Bit - 使用代碼組件共享和構(gòu)建_Bit可幫助您在項(xiàng)目和應(yīng)用程序之間共享，發(fā)現(xiàn)和使用代碼組件，以構(gòu)建新功能和... _bitsrc.io

使用純CSS

在深入研究這些庫(kù)之前，不要忘記使用純CSS。為什么？因?yàn)樗菢?biāo)準(zhǔn)的，它可以提高性能（GPU），提供向后和向前兼容性，它可能是創(chuàng)建動(dòng)畫(huà)的最有效方法。這里有10個(gè)純粹的純CSS動(dòng)畫(huà)示例。

純CSS土星呼啦圈

1. Three.js

超過(guò)43K的星級(jí)，這個(gè)流行的庫(kù)是使用WebGL在瀏覽器上創(chuàng)建3D動(dòng)畫(huà)的好方法。提供<canvas>，<svg>，CSS3D和WebGL渲染器，這個(gè)庫(kù)讓我們可以跨設(shè)備和瀏覽器創(chuàng)建豐富的交互式體驗(yàn)。該圖書(shū)館于2010年4月首次推出，目前仍由近1,000名參與者開(kāi)發(fā)。

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

2. Anime.js

超過(guò)20K的 stars，Anime是一個(gè)JavaScript動(dòng)畫(huà)庫(kù)，可以處理CSS屬性，單個(gè)CSS轉(zhuǎn)換，SVG或任何DOM屬性以及JavaScript對(duì)象。此庫(kù)允許您鏈接多個(gè)動(dòng)畫(huà)屬性，將多個(gè)實(shí)例同步，創(chuàng)建時(shí)間軸等。

juliangarnier/anime _anime?—?JavaScript Animation Engine_github.com

3. Mo.js

這個(gè)庫(kù)是14K星，是一個(gè)用于Web的動(dòng)態(tài)圖形工具帶，具有簡(jiǎn)單的聲明API，跨設(shè)備兼容性和超過(guò)1500個(gè)單元測(cè)試。您可以在DOME或SVG DOME周圍移動(dòng)?xùn)|西或創(chuàng)建唯一的mo.js對(duì)象。雖然文檔有些稀缺，但是示例很豐富，這里有CSS技巧的介紹。

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

4. Velocity

在15Kstars,，Velocity是一個(gè)快速的Javascript動(dòng)畫(huà)引擎，具有與jQuery的$ .animate（）相同的API。它具有色彩動(dòng)畫(huà)，變換，循環(huán)，緩動(dòng)，SVG支持和滾動(dòng)。這是Velocity高性能引擎的細(xì)分 ，這里是使用該庫(kù)的SVG動(dòng)畫(huà)介紹。

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

5. Popmotion

在14Kstars,，這個(gè)功能和反應(yīng)動(dòng)畫(huà)庫(kù)只重11kb。它允許開(kāi)發(fā)人員從動(dòng)作創(chuàng)建動(dòng)畫(huà)和交互，動(dòng)作是可以啟動(dòng)和停止的，并使用CSS，SVG，React，three.js和任何接受數(shù)字作為輸入的API創(chuàng)建。

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

6. Vivus

在超過(guò)10K的stars，Vivus是一個(gè)零依賴的JavaScript類，可以讓你為SVG制作動(dòng)畫(huà)，讓它們具有被繪制的外觀。您可以使用許多可用動(dòng)畫(huà)之一，或創(chuàng)建自定義腳本來(lái)繪制SVG。查看Vivus-instant獲取實(shí)時(shí)示例，親自動(dòng)手。

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

7. GreenSock JS

GSAP是一個(gè)JavaScript庫(kù)，用于創(chuàng)建高性能，零依賴性，跨瀏覽器動(dòng)畫(huà)，聲稱在超過(guò)400萬(wàn)個(gè)網(wǎng)站中使用。 GSAP非常靈活，可以與React，Vue，Angular和vanilla JS一起使用。GSDevtools還可以幫助改進(jìn)使用GSAP構(gòu)建的動(dòng)畫(huà)。

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

8. Scroll Reveal

憑借15K星和零依賴，該庫(kù)為Web和移動(dòng)瀏覽器提供了簡(jiǎn)單的滾動(dòng)動(dòng)畫(huà)，以動(dòng)畫(huà)的方式顯示滾動(dòng)內(nèi)容。它支持多種簡(jiǎn)潔的效果，甚至可以讓您使用自然語(yǔ)言定義動(dòng)畫(huà)。這是一個(gè)簡(jiǎn)短的SitePoint教程。

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

9. Hover (CSS)

嗯，這是一個(gè)CSS庫(kù)。在20K星級(jí)，Hover提供了CSS3動(dòng)力懸停效果的收集，可應(yīng)用于鏈接，按鈕，徽標(biāo)，SVG，特色圖像等，可在CSS，Sass和LESS中使用。您可以復(fù)制并粘貼要在自己的樣式表中使用的效果或引用樣式表。

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

一個(gè)完全成熟的原生JavaScript動(dòng)畫(huà)引擎，具有跨瀏覽器動(dòng)畫(huà)的基本功能。重點(diǎn)是代碼質(zhì)量，靈活性，性能和大小（核心引擎是17k min和5.5k gzipped） - 這是一個(gè)demo。該庫(kù)也是可擴(kuò)展的，因此您可以添加自己的功能。

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這個(gè)6K星庫(kù)基本上允許您以選定的速度為字符串創(chuàng)建打字動(dòng)畫(huà)。您還可以在頁(yè)面上放置HTML div并從中讀取以允許搜索引擎和禁用JavaScript的用戶訪問(wèn)。由Slack和其他人使用，這個(gè)庫(kù)既流行又令人驚訝地有用。

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

還可以看看: iTyped延遲補(bǔ)充：Airbnb的Lottie

Lottie是一個(gè)用于Web的移動(dòng)庫(kù)，iOS用于解析使用 Bodymovin導(dǎo)出為json的 Adobe After Effects 動(dòng)畫(huà)，并將其原生呈現(xiàn)。

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