記錄一下目前比較流行的JS動(dòng)畫(huà)庫(kù):
1. Three.js
超過(guò)43K星, 一個(gè)非常流行, 利用WebGL在瀏覽器中創(chuàng)建3D動(dòng)畫(huà)的庫(kù), 支持<canvas>、<svg>、CSS3D和WebGL渲染
2. Anime.js
超過(guò)31K星, Anime是一個(gè)純JS動(dòng)畫(huà)庫(kù), 可以應(yīng)用于多個(gè)或單個(gè)CSS屬性/SVG或任何DOM屬性進(jìn)行動(dòng)畫(huà), 允許您鏈接多個(gè)動(dòng)畫(huà)屬性,將多個(gè)實(shí)例同步,創(chuàng)建時(shí)間軸等
3. Mo.js
超過(guò)14K星
4. Velocity
超過(guò)16K星, Velocity是一個(gè)快速的Javascript動(dòng)畫(huà)引擎, 具有與JQuery($.animate)相同的API
5. Popmotion
超過(guò)16K星, Popmotion是一個(gè)輕量級(jí)的JS動(dòng)畫(huà)庫(kù), 只有11KB, 允許開(kāi)發(fā)人員創(chuàng)建交互性動(dòng)畫(huà), 比如啟動(dòng)或停止動(dòng)畫(huà)
6. Vivus
超過(guò)11K星, Vivus是一個(gè)零依賴JavaScript類,專注于制作SVG動(dòng)畫(huà),讓它們具有被繪制的外觀。 您可以使用許多可用動(dòng)畫(huà)中的一種,或創(chuàng)建自定義腳本來(lái)繪制SVG。
7. GreenSock JS
目前擁有9K星, GSAP是一個(gè)比較老的JavaScript庫(kù),用于創(chuàng)建高性能,零依賴性,跨瀏覽器動(dòng)畫(huà),聲稱在超過(guò)400萬(wàn)個(gè)網(wǎng)站中使用。 GSAP非常靈活,可以與React,Vue,Angular和vanilla JS一起使用。 GSDevtools還可以幫助dubug使用GSAP構(gòu)建的動(dòng)畫(huà)。
8. Scroll Reveal
超過(guò)17K星, 主要是為網(wǎng)頁(yè)和移動(dòng)瀏覽器提供滾動(dòng)動(dòng)畫(huà)
9. Hover (CSS)
超過(guò)21K星, 一個(gè)用于懸停效果的CSS3動(dòng)畫(huà)效果集合, 適用于鏈接,按鈕,徽標(biāo),SVG,特色圖像等。 輕松應(yīng)用于您自己的元素。 提供CSS,Sass和LESS。
10. Kute.js
一個(gè)完全成熟的原生JavaScript動(dòng)畫(huà)引擎,具有跨瀏覽器動(dòng)畫(huà)的基本功能。 重點(diǎn)是代碼質(zhì)量,靈活性,性能和大小(核心引擎是17k min和5.5k gzipped)。 該庫(kù)也是可擴(kuò)展的,因此您可以添加自己的功能。
11. Typed.js
模仿動(dòng)態(tài)打字效果的JS動(dòng)畫(huà)庫(kù)
原文地址(英文) https://blog.bitsrc.io/11-javascript-animation-libraries-for-2018-9d7ac93a2c59