最近在做動(dòng)畫相關(guān)的項(xiàng)目，推薦 11 個(gè)好用的 JS 動(dòng)畫庫(kù)

作者：Jonathan Saring

譯者：前端小智

來源：medium

為了保證的可讀性，本文采用意譯而非直譯。

1.Three.js

cdn.xitu.io/2019/11/22/16e90735cfaea0d0?w=551&h=358&f=gif&s=37216">

超過46K的星星，這個(gè)流行的庫(kù)提供了非常多的3D顯示功能，以一種直觀的方式使用 WebGL。這個(gè)庫(kù)提供了<canvas>、 <svg>、CSS3D 和 WebGL渲染器，讓咱們?cè)谠O(shè)備和瀏覽器之間創(chuàng)建豐富的交互體驗(yàn)。該庫(kù)于2010年4月首次推出，目前仍有近1000名貢獻(xiàn)者在開發(fā)中。

2. Anime.js

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

3.Mo.js

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

4. Velocity

超過 15k 星星,Velocity是一個(gè)快速的 JS 動(dòng)畫引擎，擁有與jQuery的 $.animate() 相同的API。它具有彩色動(dòng)畫、轉(zhuǎn)換、循環(huán)、畫架、SVG支持和滾動(dòng)。這里是Velocity的高性能引擎的分解，這里是使用該庫(kù)的 SVG 動(dòng)畫的介紹。

5. Popmotion

超過 14K 星星，這個(gè)動(dòng)畫庫(kù)大小只有 11 kb。它允許開發(fā)人員從動(dòng)作創(chuàng)建動(dòng)畫和交互，這些動(dòng)作是可以啟動(dòng)和停止，可以使用 CSS、SVG、React、three 創(chuàng)建，js 和任何接受數(shù)字作為輸入的 API。

6. Vivus

超過 10k 星星，Vivus是一個(gè)零依賴的 JS 類，可以讓你為SVG制作動(dòng)畫，讓它們具有被繪制的外觀。 咱們可以使用許多可用動(dòng)畫之一，或創(chuàng)建自定義腳本來繪制SVG。 查看Vivus-instant獲取實(shí)際示例，親自動(dòng)動(dòng)手練習(xí)一下。

7. GreenSock JS

GSAP 是一個(gè)JS 庫(kù)，用于創(chuàng)建高性能、零依賴、跨瀏覽器動(dòng)畫，據(jù)稱在超過400萬(wàn)個(gè)網(wǎng)站上使用。GSAP是靈活的，可以與 React、Vue、Angular 和 vanilla JS 協(xié)同工作。GSDevtools 還可以幫助使用 GSAP 構(gòu)建dubug 動(dòng)畫。

8. Scroll Reveal

擁有15K顆星星和零依賴，這個(gè)庫(kù)為 web 和移動(dòng)瀏覽器提供了簡(jiǎn)單的滾動(dòng)動(dòng)畫，以動(dòng)畫的方式顯示滾動(dòng)中的內(nèi)容。它支持多種簡(jiǎn)潔的效果類型，甚至允許你使用自然語(yǔ)言定義動(dòng)畫。這里有一個(gè)簡(jiǎn)短的 SitePoint教程。

9. Hover (CSS)

超過 20k 星星，Hover 提供了CSS3支持的懸停效果集合，可應(yīng)用于鏈接、按鈕、徽標(biāo)、SVG、特色圖像等，在CSS、Sass和LESS中可用。您=可以復(fù)制和粘貼希望在自己的樣式表中使用的效果，或者引用樣式。

10. Kute.js

一個(gè)完全成熟的原生 JS 動(dòng)畫引擎，具有跨瀏覽器動(dòng)畫的基本功能。 重點(diǎn)是代碼質(zhì)量，靈活性，性能和大?。ê诵囊?7k 和 gzipped 5.5k） - 這是一個(gè)演示。 該庫(kù)也是可擴(kuò)展的，因此你可以添加自己的功能。

11. Typed.js

超過 7k 星星，這個(gè)庫(kù)基允許你以選定的速度為字符串創(chuàng)建打字動(dòng)畫。 你還可以在頁(yè)面上放置 HTML div 并從中讀取以允許搜索引擎和禁用 JS 的用戶訪問，由Slack和其他人使用，這個(gè)庫(kù)既流行又非常有用。

上個(gè)月花了 1600 搞了個(gè)配置較高的阿里服務(wù)器來學(xué)習(xí) node 及對(duì)應(yīng)的框架，現(xiàn)在雙12，該款有優(yōu)惠，只要 89元每年，感覺好劃算的。想了解一些前端的后臺(tái)知識(shí)及學(xué)習(xí)全棧的，可以點(diǎn)擊此鏈接了解詳情。

原文：https://blog.bitsrc.io/11-javascript-animation-libraries-for-2018-9d7ac93a2c59

交流

干貨系列文章匯總?cè)缦?，覺得不錯(cuò)點(diǎn)個(gè)Star，歡迎 加群 互相學(xué)習(xí)。

https://github.com/qq449245884/xiaozhi

因?yàn)槠南拗?，今天的分享只到這里。如果大家想了解更多的內(nèi)容的話，可以去掃一掃每篇文章最下面的二維碼，然后關(guān)注咱們的微信公眾號(hào)，了解更多的資訊和有價(jià)值的內(nèi)容。

每次整理文章，一般都到2點(diǎn)才睡覺，一周4次左右，挺苦的，還望支持，給點(diǎn)鼓勵(lì)