2019年值得推薦的11款JavaScript動(dòng)畫庫

作者：前端小號(hào) 2019-07-05 08:24:39

我在通過瀏覽網(wǎng)頁尋找一個(gè)整潔好用的JavaScript動(dòng)畫庫時(shí)，發(fā)現(xiàn)許多“推薦”的動(dòng)畫庫都已經(jīng)有一段時(shí)間沒有維護(hù)了。

經(jīng)過一些研究，我已經(jīng)收集了11個(gè)優(yōu)秀的庫可以在你的應(yīng)用程序中使用。

Three.js

擁有超過43K stars，這個(gè)流行的庫擁有一個(gè)強(qiáng)大的方式在瀏覽器中來創(chuàng)建三維動(dòng)畫，以WebGL作為更直觀的方式。這個(gè)庫提供了、、css3d和webgl渲染器，使我們能夠在設(shè)備和瀏覽器之間創(chuàng)建豐富的交互體驗(yàn)。該庫于2010年4月首次面世，目前仍有近1000名參與者開發(fā)。

項(xiàng)目地址：https://github.com/mrdoob/three.js/

Anime.js

擁有超過20K星，Anime.JS是一個(gè)javascript動(dòng)畫庫，與CSS屬性，獨(dú)立的CSS transforms，svg或任何dom屬性和javascript對(duì)象一起工作。此庫允許您鏈接多個(gè)動(dòng)畫屬性、將多個(gè)實(shí)例同步在一起、創(chuàng)建時(shí)間線等。

Github上的項(xiàng)目地址：https://github.com/juliangarnier/anime

Mo.js

擁有14kStars，這個(gè)庫是一個(gè)用于Web的運(yùn)動(dòng)圖形工具帶，具有簡單的聲明性API、跨設(shè)備兼容性和超過1500個(gè)單元測(cè)試。您可以圍繞DOME或SVG DOME移動(dòng)物體，或者創(chuàng)建獨(dú)特的mo.js對(duì)象。盡管文檔有點(diǎn)稀少，但示例也很多。

Github上的項(xiàng)目地址：https://github.com/legomushroom/mojs

Popmotion

擁有14K星，這個(gè)功能性和reactive的動(dòng)畫庫的體積只有11kb。它允許開發(fā)人員從動(dòng)作中創(chuàng)建動(dòng)畫和交互，這些動(dòng)作是可以啟動(dòng)和停止的值，并使用css、svg、react、three.js和任何接受數(shù)字作為輸入的API來創(chuàng)建。

在Github上的項(xiàng)目地址：https://github.com/Popmotion/popmotion

Vivus

擁有超過10萬顆星，vivus是一個(gè)零依賴性的javascript類，它可以讓你對(duì)SVG進(jìn)行動(dòng)畫處理，讓它們看起來像是被繪制的。您可以使用許多可用動(dòng)畫之一，或創(chuàng)建自定義腳本來繪制SVG。立即查看vivus，獲取一個(gè)實(shí)時(shí)示例，動(dòng)手操作吧。在Github上的項(xiàng)目地址為：https://github.com/maxwellito/vivus

GreenSockJS

GreenSockJS是一個(gè)用于創(chuàng)建高性能、零依賴性、跨瀏覽器動(dòng)畫的JavaScript庫，據(jù)稱該庫已用于400多萬個(gè)網(wǎng)站。GreenSockJS具有靈活性，可與React、Vue、Angular和Vanilla JS配合使用。gsdevtools還可以幫助使用gsap構(gòu)建Dubug動(dòng)畫。

在Github上的地址為：https://github.com/greensock/GreenSock-JS

Scroll Reveal