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

首先，介紹一下JavaScript的動(dòng)畫

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

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

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

1. Anime.js

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

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

2. Velocity.js

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

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

3. Popmotion

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

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

4. Three.js

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

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

5. GreenSock JS

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

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

6. AniJS

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

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

7. Mo.js

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

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

8. Vivus.js

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

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

9. ScrollReveal JS

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

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

10. Typed.js

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

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

11. Lottie by AirBnB

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

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