在今天的文章中，我們將看到JavaScript動畫庫如何幫助實現(xiàn)這一切。

首先，介紹一下JavaScript的動畫

添加只需要一個動作的簡單動畫(例如，切換)是一回事。對于這一點，你總是可以使用簡單的CSS動畫。但是，對于更復(fù)雜或高級的效果。 JavaScript是一個更好的工具。不言而喻，使用JavaScript來創(chuàng)建動畫比使用CSS更具挑戰(zhàn)性。

然而，JavaScript可以處理CSS所不能處理的事情。這給了開發(fā)者更多的權(quán)力來控制需要協(xié)調(diào)多個移動部件的復(fù)雜動畫。

JavaScript動畫是通過在一個元素的樣式上添加漸變來實現(xiàn)的。你可以把它們作為你代碼的一部分在線添加，或者把它們包含在其他對象中。在渲染時，這些變化由一個定時器調(diào)用。另外，你可以通過調(diào)整變化的時間間隔來控制動畫的連續(xù)性。

1. Anime.js

讓我們從Anime.js開始這個JavaScript動畫庫的列表。這個輕量級的動畫庫在GitHub上有35K多顆星。 通過一個強(qiáng)大的API工作，你可以用它來為HTML、CSS、JS、SVG和DOM屬性制作動畫。通過一個內(nèi)置的交錯系統(tǒng)，它可以使創(chuàng)建波紋、定向運動、跟隨和重疊的效果顯得很簡單。這個系統(tǒng)在定時和屬性上都是可用的。

使用內(nèi)置的回調(diào)和控制函數(shù)，你可以做很多事情。例如，你可以同步播放、暫停、控制、逆轉(zhuǎn)和觸發(fā)事件。

2. Velocity.js

Velocity.js結(jié)合了jQuery和CSS轉(zhuǎn)換的優(yōu)點。它的評分接近17K星，在 GitHub上有接近17K顆星，并擁有像WhatsApp和Motorola這樣的杰出用戶。 Mailchimp.循環(huán)、反轉(zhuǎn)、延遲、隱藏/顯示元素、屬性數(shù)學(xué)(+、-、*、/)和硬件加速，都是其功能的一部分。

你可以使用Velocity.js來滾動 browser windows.它既可以與瀏覽器中加載的jQuery一起工作，也可以獨立于它，甚至可以撤消之前的動畫效果。

3. Popmotion

在接近 18K星，Popmotion是一個適用于任何JavaScript環(huán)境的功能性動畫庫。它幾乎可以與任何接受數(shù)字輸入的API一起工作，如 React，Three.js，A-Frame和PixiJS。

Popmotion的重量只有11.7kB，但卻很有沖擊力。它的特點是動畫，如關(guān)鍵幀、衰減、用于同步多個實例的時間線等。你可以錯開任何系列的動畫或函數(shù)，也可以使用純函數(shù)來組成你自己的配置。

4. Three.js

Three.js以60K以上的星級在這個JavaScript動畫庫列表中排名第一。 它依靠的是 WebGL來創(chuàng)建和渲染瀏覽器中的3D動畫。

有大量的文檔可以幫助你，一旦你通過了學(xué)習(xí)曲線，使用這個庫就沒有什么不能完成的。首先，使用Three.js編輯器，你可以創(chuàng)建一個場景。此后，你可以添加幾何圖形，并調(diào)整燈光和攝像機(jī)。材料、紋理、物體、顏色和霧化都可以進(jìn)行調(diào)整，最后的文件可以發(fā)布到你的項目中。

5. GreenSock JS

GreenSock的GSAP與一組小的JavaScript文件一起工作，使動畫在所有主要的瀏覽器中看起來很好。它能順利地將多個動畫屬性連接起來，并消除瀏覽器的錯誤。

GSAP的動作包括在Canvas上創(chuàng)建動畫，以及為場景中的任何對象制作動畫。還可以逐步揭示、變形或沿路徑移動任何對象。為此，它與一堆軟件應(yīng)用一起工作，如SVGPlugins、PixiPlugin、WebGL、Adobe Animate和EaseJS。它的模塊化結(jié)構(gòu)有助于你選擇你需要的功能。擁有800萬用戶和10K+顆星的 GitHub上有800萬用戶和10K多顆星，這個強(qiáng)大的庫有很多優(yōu)點。

6. AniJS

在這個列表中的JavaScript庫中，AniJS有些獨特。它允許你在一個簡單的 "句子 "結(jié)構(gòu)中為元素添加動畫，這對剛接觸動畫的人來說是很好的。更重要的是，它的非特定性質(zhì)使得幾乎每個人都可以在日常的用戶體驗設(shè)計中使用它。

上 GitHub，AniJS的評分超過了3.5K星。它不依賴任何第三方庫，通常有助于加快開發(fā)速度。它在安卓和iOS上都能很好地工作。 Android and iOS，也可以在所有流行的瀏覽器中使用。

7. Mo.js

運動圖形在動畫中起著很大的作用，Mo.js是一個可以讓你產(chǎn)生影響的選擇。由于有大量的教程和演示幫助，初學(xué)者可能不會發(fā)現(xiàn)創(chuàng)建幾何形狀和時間動畫的難度。

這些API可能看起來很簡單，但你可以用它們做很多事情。在這個工具包中，你會發(fā)現(xiàn)一個曲線編輯器和時間線編輯器來幫助你建立你的動畫，以及一個播放器來控制你的動畫。有不同的模塊用于交錯、緩和、時間線和更多。所有這些為Mo.js贏得了接近16K星的評價。

8. Vivus.js

如果你想在屏幕上實時地模仿鋼筆畫，你會用Vivus達(dá)到目的。它可以讓你對SVG進(jìn)行動畫處理，給人以被繪制的感覺。由于它沒有任何依賴性，所以它是快速和輕便的。

你可以選擇任何一種可用的動畫 - 延遲、同步或OneByOne。否則，你也可以創(chuàng)建一個自定義腳本來繪制你的SVG。為了提高靈活性，你可以用一個簡單的JavaScript函數(shù)來覆蓋每個路徑的動畫。超過1.3萬名用戶對這個庫豎起了大拇指。

9. ScrollReveal JS

如果你希望在你的網(wǎng)頁元素滾動進(jìn)入視圖時為它們制作動畫，ScrollReveal不會讓你失望。這個簡單易學(xué)的動畫庫沒有任何依賴性，在GitHub上有18.5K多顆星。

ScrollReveal支持不同類型的效果，在網(wǎng)絡(luò)和移動瀏覽器上運行良好。它故意用一個裸露的配置來工作，所以你可以把它作為你的創(chuàng)造力的畫布。為了使動畫的效果最大化，創(chuàng)作者建議你少用它。

10. Typed.js

Typed.js是一個簡單的庫(更像是一個插件，真的)，用于在你的屏幕上對打字進(jìn)行動畫處理。一旦你輸入任何字符串，訪問者就可以看到它以設(shè)定的速度被打出來。不僅如此，你還可以操作退格按鈕，以及開始一個新的句子。如果你希望讓禁用JS的訪問者也能看到，你只需要在頁面上放置一個HTML div。這樣一來，機(jī)器人和搜索引擎也能查看輸入的文字。

該庫在GitHub的評分為9.5K+星，強(qiáng)大的用戶包括Slack和Envato。

11. Lottie by AirBnB

Lottie是一種輕量級的動畫圖形格式，平衡了高質(zhì)量的圖形和渲染成本。它使應(yīng)用程序更小，并包括動態(tài)功能。它可以用于網(wǎng)絡(luò)、安卓、iOS和物聯(lián)網(wǎng)，不需要額外的軟件。

Lottie可以在任何支持JavaScript的瀏覽器上運行。動畫是以純文本形式存儲的，是人類可讀的。由于文本數(shù)據(jù)是以JSON格式存儲的，它很容易被任何JavaScript環(huán)境同化。這使得它成為一種流行的動畫圖形格式，以增強(qiáng)移動前端。僅僅是安卓版本就有接近3萬顆星。