建站
咨詢
售后
建站咨詢
新聞中心
如果要實(shí)現(xiàn)一些酷炫的網(wǎng)頁(yè)動(dòng)態(tài)效果，又不想重復(fù)造輪子，那么以下一些開(kāi)源JavaScript動(dòng)畫(huà)庫(kù)值得嘗試。
創(chuàng)新互聯(lián)從2013年開(kāi)始，是專(zhuān)業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元船營(yíng)做網(wǎng)站,已為上家服務(wù),為船營(yíng)各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:028-86922220
1.three.js（95.4K Star)
https://github.com/mrdoob/three.js/
three.js庫(kù)是一個(gè)令人驚嘆的2D/3D JavaScript動(dòng)畫(huà)庫(kù)，可用于游戲、兒童教育網(wǎng)站、各種花哨的演示文稿等各種復(fù)雜網(wǎng)頁(yè)動(dòng)畫(huà)的開(kāi)發(fā)。目前的版本的渲染器包括：WebGL、處于實(shí)驗(yàn)階段的WebGPU、SVG和CSS3D。
快來(lái)欣賞一下three.js那些酷炫的效果吧：https://threejs.org/examples/#webgl_animation_keyframes
2.Anime.js（47.4K Star)
https://github.com/juliangarnier/anime
Anime.js是一個(gè)輕量級(jí)的JavaScript動(dòng)畫(huà)庫(kù)，具有功能強(qiáng)大的API，可以處理的動(dòng)畫(huà)類(lèi)型包括：CSS屬性、SVG、DOM屬性和JavaScript對(duì)象。
3.ScrollReveal（21.8K Star)
https://github.com/jlmakes/scrollreveal
ScrollReveal是一個(gè)用于在元素進(jìn)入/離開(kāi)窗口時(shí)的JavaScript動(dòng)畫(huà)庫(kù)。
4.Babylon(21.6K Star)
https://github.com/BabylonJS/Babylon.js
Babylon.js是一個(gè)動(dòng)畫(huà)和游戲引擎，主要用JavaScript編寫(xiě)，它提供了內(nèi)置的WebGPU支持，并支持在桌面和移動(dòng)端的瀏覽器上運(yùn)行。
5.Mojs（18.1K Star）
https://github.com/mojs
Mojs是一個(gè)免費(fèi)的開(kāi)源動(dòng)畫(huà)庫(kù)，它提供了數(shù)十個(gè)非常有用的開(kāi)源工具，如運(yùn)動(dòng)播放器（Mojs播放器）、曲線和時(shí)間軸運(yùn)動(dòng)編輯器等。
6.GreenSock（17.4K Star)
https://github.com/greensock/GSAP
https://gsap.com/
GreenSock是一個(gè)高級(jí)且超級(jí)豐富的JavaScript動(dòng)畫(huà)庫(kù)，允許開(kāi)發(fā)人員輕松創(chuàng)建復(fù)雜的動(dòng)畫(huà)。它為開(kāi)發(fā)人員提供了DrawSVGPlugin、MorphSVGPlugin和MotionPathPlugin用于創(chuàng)建平滑的SVG動(dòng)畫(huà)。
GreenSock默認(rèn)支持WebGL，它是許多JavaScript游戲開(kāi)發(fā)者為他們的游戲添加效果的最?lèi)?ài)選擇。
GASP（GreenSock Animation Platform）是一個(gè)強(qiáng)大的JavaScript工具集，可以在所有主流瀏覽器中構(gòu)建高性能動(dòng)畫(huà)。包括：CSS動(dòng)畫(huà)、SVG、畫(huà)布、React、Vue、WebGL、顏色、字符串、運(yùn)動(dòng)路徑等任何JavaScript所能控制的任何內(nèi)容！
GSAP的ScrollTrigger插件支持用最少的代碼創(chuàng)建令人驚嘆的基于滾動(dòng)的動(dòng)畫(huà)。gsap.matchMedia() 函數(shù)使得構(gòu)建響應(yīng)式、可訪問(wèn)性友好的動(dòng)畫(huà)變得輕而易舉。
7.Velocity.js（17.2K Star)
https://github.com/julianshapiro/velocity
http://velocityjs.org/
Velocity是一個(gè)動(dòng)畫(huà)引擎，具有與jQuery的$.animate() 相類(lèi)似的API。它的速度快得令人難以置信，它的主要特點(diǎn)是支持彩色動(dòng)畫(huà)、變換、循環(huán)、緩和動(dòng)畫(huà)、SVG和滾動(dòng)等。
8.Vivus（15K Star）
https://github.com/maxwellito/vivus
https://maxwellito.github.io/vivus/
Vivus是一個(gè)輕量級(jí)的JavaScript類(lèi)，沒(méi)有任何依賴，用于實(shí)現(xiàn)SVG動(dòng)畫(huà)，使其具有繪制的外觀效果。包含有各種不同的動(dòng)畫(huà)效果，并可以創(chuàng)建自定義腳本的選項(xiàng)，以任何方式繪制SVG。
9.TweenJS（4K Star）
https://github.com/CreateJS/TweenJS
TweenJS是一個(gè)在JavaScript中使用的簡(jiǎn)單補(bǔ)間動(dòng)畫(huà)庫(kù)。它的開(kāi)發(fā)是為了與EaselJS庫(kù)集成，但并不依賴于它。它支持?jǐn)?shù)字對(duì)象屬性和CSS樣式屬性的補(bǔ)間動(dòng)畫(huà)。
10.Scene.js（2.6K Star）
https://github.com/daybrush/scenejs
Scene.js是一個(gè)基于JavaScript CSS時(shí)間軸的動(dòng)畫(huà)庫(kù)。它附帶了許多示例，可以幫助前端開(kāi)發(fā)人員快速入門(mén)，創(chuàng)建復(fù)雜的對(duì)象動(dòng)畫(huà)。示例包括：樹(shù)效果、雪花飄落動(dòng)畫(huà)、立方體效果、內(nèi)容卡旋轉(zhuǎn)、圓爆裂和棋盤(pán)動(dòng)畫(huà)等。如下所示：
11 .Animatic（1.4K Star)
https://github.com/lvivski/animatic
使用Animatic可以輕松地一次為一百多個(gè)對(duì)象設(shè)置動(dòng)畫(huà)。可以用于模擬現(xiàn)實(shí)的對(duì)象，它的大小只有7K。
12.Typed.js
https://github.com/mattboldt/typed.js/
Typed.js是一個(gè)用于實(shí)現(xiàn)輸入動(dòng)畫(huà)的JavaScript動(dòng)畫(huà)庫(kù)?？梢愿鶕?jù)您設(shè)置的速度顯示輸入的任何字符。以下網(wǎng)站提供了一些例子，可以看看。
https://mattboldt.com/demos/typed-js/
13.Between.js
https://github.com/sasha240100/between.js
Between.js是一個(gè)輕量級(jí)JavaScript（ES6）補(bǔ)間動(dòng)畫(huà)庫(kù)，它適用于所有瀏覽器，并帶有簡(jiǎn)單的API。以下網(wǎng)站可以查看Between.js的各種例子：
https://between.js.org/
14.Just Animate 2
https://github.com/just-animate/just-animate
Just Animate 2是一個(gè)功能豐富的動(dòng)畫(huà)庫(kù)，支持時(shí)間軸動(dòng)畫(huà)、序列、CSS動(dòng)畫(huà)，并內(nèi)置補(bǔ)間引擎。
15.PowerGlitch
https://github.com/7PH/powerglitch
PowerGlitch是一個(gè)獨(dú)立的動(dòng)畫(huà)庫(kù)，沒(méi)有外部依賴項(xiàng)。它利用CSS動(dòng)畫(huà)來(lái)顯示小動(dòng)畫(huà)，整個(gè)js小于2kb，非常輕量。
16.Starback.js
https://github.com/zuramai/starback.js
Starback.js用于給網(wǎng)頁(yè)創(chuàng)建漂亮的星星動(dòng)畫(huà)或雪花效果。
17.Loading animations
https://github.com/Skparab1/loading-animations
這是一個(gè)簡(jiǎn)單的JavaScript加載動(dòng)畫(huà)庫(kù)，它提供了許多帶有代碼示例的加載動(dòng)畫(huà)。
18.Progressbar.js
https://github.com/kimmobrunfeldt/progressbar.js
https://kimmobrunfeldt.github.io/progressbar.js/
Progressbar.js提供了響應(yīng)使的進(jìn)度條動(dòng)畫(huà)，帶有動(dòng)畫(huà)SVG路徑，使用內(nèi)置形狀或創(chuàng)建自己的路徑，可以根據(jù)需要實(shí)現(xiàn)自定義動(dòng)畫(huà)。動(dòng)畫(huà)效果盡享絲滑。
19.Motus
https://github.com/alexcambose/motus
Motus是一個(gè)簡(jiǎn)單且無(wú)依賴性的JavaScript動(dòng)畫(huà)庫(kù)，可以使用Motus創(chuàng)建模擬 CSS 關(guān)鍵幀，實(shí)現(xiàn)精美的滾動(dòng)動(dòng)畫(huà)。
20.Josh.js
https://github.com/mamunhpath/josh.js
Josh.js是一個(gè)簡(jiǎn)單的頁(yè)面滾動(dòng)動(dòng)畫(huà)JavaScript庫(kù)。Josh.js無(wú)需依賴jQuery，它的后臺(tái)使用的是Animate.css，因此它允許您創(chuàng)建自己的動(dòng)畫(huà)。另外，Josh.js支持ES6并提供ES5的編譯版本。
文章名稱(chēng)：20個(gè)酷炫的開(kāi)源免費(fèi)JavaScript動(dòng)畫(huà)庫(kù)，前端開(kāi)發(fā)、游戲開(kāi)發(fā)推薦收藏
本文地址：http://www.5511xx.com/article/dhpegjj.html
