好用的JavaScript動畫庫有哪些

這篇文章將為大家詳細講解有關好用的JavaScript動畫庫有哪些，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

Animate.css

animate.css 是一個使用CSS3的animation制作的動畫效果的CSS集合，里面預設了很多種常用的動畫，且使用非常簡單。

GitHub：https://github.com/animate-css/animate.css

Hover.css

Hover.css 是一套基于 CSS3 的鼠標懸停效果和動畫，這些可以非常輕松的被應用到按鈕、LOGO 以及圖片等元素。所有這些效果都是只需要單一的標簽，必要的時候使用 before 和 after 偽元素。因為使用了 CSS3 過渡、轉換和動畫效果，因此只支持 Chrome、Firefox 和 Safari 等現代瀏覽器。

Github：https://github.com/IanLunn/Hover

Magic.css

Magic CSS3 Animations 動畫是一款獨特的CSS3動畫特效包，可以自由地使用在網頁中。只需簡單的在頁面上引入 CSS 文件: magic.css 或者壓縮版本 magic.min.css 就可以使用了。

Github：https://github.com/miniMAC/magic

React Spring

react-spring 是一個基于彈簧物理學的動畫庫，滿足大多數與UI相關的動畫需求，提供了足夠靈活的工具，可以自信地將想法投射到不斷變化的界面中。該庫代表了一種現代動畫方法。它繼承了 animated 強大的插值和性能，以及 react-motion 的易用性。

GitHub：https://github.com/pmndrs/react-spring

React Reveal

React Reveal 是適一個用于 React 的高性能動畫庫。它占用空間小，專門為 ES6 中的 React 編寫。可用于創建各種炫酷的滾動效果顯示。

GitHub：https://github.com/rnosov/react-reveal

Greensock

GreenSock是一個JavaScript動畫庫，可輕松對HTML元素進行動畫處理。 用于創建高性能，零依賴性，跨瀏覽器動畫，聲稱在超過 400 萬個網站中使用。 其具有一下特點：

• 速度快，專門優化了動畫性能，使之實現和css一樣的高性能動畫效果。

• 輕量與模塊化。模塊化與插件式的結構保持了核心引擎的輕量，TweenLite包非常小(基本上低于7kb)。提供了TweenLite, TimelineLite, TimelineMax 和 TweenMax不同功能的動畫模塊，你可以按需使用。

• 沒有依賴。

• 靈活控制。不用受限于線性序列，可以重疊動畫序列，可以通過精確時間控制，靈活地使用最少的代碼實現動畫。

• 任何對象都可以實現動畫。

Github：https://github.com/greensock/GreenSock-JS/

Velocity.js

Velocity.js 是velocity模板語法的javascript實現。Velocity 是基于Java的模板引擎，廣泛應用在阿里集 體各個子公司。Velocity模板適用于大量模板使用的場景，支持復雜的邏輯運算，包含 本數據類型、變量賦值和函數等功能。還擁有：顏色動畫、轉換動畫(transforms)、循環、 緩動、SVG 動畫、和 滾動動畫 等特色功能。Velocity.js 支持 Node.js 和瀏覽器環境。

其具有以下特點：

• 支持客戶端和服務器端使用

• 語法是富邏輯的，構成門微型的語言

• 語法分析和模板渲染分離

• 基本完全支持velocity語法

• 瀏覽器使用支持模板之間相互引用，依據kissy模塊加載機制

GitHub：http://github.com/julianshapiro/velocity

Lax.js

Lax.js 是一款原生零依賴的制作跟隨頁面滑動的 JavaScript 動畫插件，這款插件非常的輕巧，壓縮版大小只有3kb。當滑動頁面時，幫助創建酷炫的動畫效果，比如滾動視差、變形移動等基本的動畫效果，響應式兼容方面，比如手機端也有不錯的支持。除了可以使用插件默認集成的動畫屬性，還可以自定義更加豐富的動畫屬性。

GitHub：https://github.com/alexfoxy/lax.js

Rellax.js

rellax.js是一款輕量級的純JavaScript滾動視覺差特效插件。rellax.js壓縮后的版本僅871字節，在手機等小屏幕設備中，插件會自動限制視覺差特性。

Github：https://github.com/dixonandmoe/rellax

three.js

three.js 是一個易于使用、輕量級、跨瀏覽器的通用 JavaScript 3D 庫，它是一套基于WebGL 開發出的Javascript 函式庫，它提供了比 WebGL 更簡單的Javascript API，讓開發者能夠輕易在瀏覽器制作 3D 繪圖。

GitHub：https://github.com/mrdoob/three.js/

wow.js

WOW.js 是一款幫助你實現滾動頁面時觸發CSS 動畫效果的插件。它依賴 animate.css，所以它支持 animate.css 多達 60 多種的動畫效果，可以改變動畫設置喜歡的風格、延遲、長度、偏移和迭代等，能滿足各種需求。

GitHub：https://github.com/graingert/wow

AniJS

AniJS允許我們為網站創建動畫樣式，而無需任何JavaScript或CSS編碼！ 您可以使用簡單的If - On - Do - To語法用HTML指定所有動畫

GitHub：https://github.com/anijs/anijs

Anime.js

Anime.js 是一個輕量的JavaScript 動畫庫， 擁有簡單而強大的API。可對 CSS 屬性、 SVG、 DOM 和JavaScript 對象進行動畫。它很輕便，gzip壓縮完只有9kb左右。

GitHub：https://github.com/juliangarnier/anime/

Typed.js

typed.js是一個類型化庫，效果是用打字機的方式顯示一段話，可以自定義任何字符串、指定顯示速度、指定是否循環等。

GitHub：https://github.com/mattboldt/typed.js/

Vivus

Vivus 是一個輕量級的 JavaScript 庫（沒有依賴項），它允許我們對 SVG 進行動畫處理，使它們看起來像是被繪制的。它有多種不同的動畫可用，以及創建自定義腳本的選項，以喜歡的任何方式繪制 SVG。

GitHub：https://github.com/maxwellito/vivus

Popmotion

Popmotion 是一個只有12KB的 JavaScript 運動引擎，可以用來實現動畫，物理效果和輸入跟蹤。原生的DOM支持：CSS，SVG，SVG路徑和DOM屬性的支持，開箱即用。

GitHub：https://github.com/popmotion/popmotion

Granim.js

granim.js是一個在網頁中創建流暢的交互式流體動畫的小型JavaScript庫，granim.js可以實現各種想要的漸變的動畫效果，使網頁色彩更加豐富，視覺效果更佳！

GitHub：https://github.com/sarcadass/granim.js

Kute.js

Kute.js 是一個原生的 Javascript 動畫引擎，具有優秀的性能和模塊化的代碼。 它提供了一大堆工具，以幫助創建自定義動畫。它提供了易于使用的方法來設置高性能、跨瀏覽器的動畫。

GitHub：https://github.com/thednp/kute.js

Simple Parallax

simpleParallax.js 是一個非常簡單且小巧的 Vanilla JS 庫，可在任何圖像上添加視差動畫。它因其易用性和可視化渲染而脫穎而出。視差效果直接應用于圖像標簽，無需使用背景圖像。

GitHub：https://github.com/geosigno/simpleParallax.js

Barba.js

Barba.js是一個小（4kb的壓縮和壓縮），靈活和無依賴的庫，可以幫助您創建流暢和平滑的過渡網站的頁面。 它可以減少頁面之間的延遲，最大限度地減少瀏覽器HTTP請求并增強用戶的Web體驗。

GitHub：https://github.com/barbajs/barba

mo.js

Mo.js是一個簡潔、高效的圖形動畫庫，擁有流暢的動畫和驚人的用戶體驗，在任何設備上，屏幕密度獨立的效果都很好，可以繪制內置的形狀或者自定義形狀，還可以繪制多個動畫，再讓它們串聯在一起。

GitHub：https://github.com/mojs

Particles.js

Particles.js 一個輕量級的JavaScript庫，用來在網頁上創建顆粒效果。

GitHub：https://github.com/VincentGarreau/particles.js/

tsParticles

tsParticles可以輕松創建高度可定制的粒子動畫并將它們用作網站的動畫背景。可用于 React.js、Vue.js（2.x 和 3.x）、Angular、Svelte、jQuery、Preact、Inferno、Solid、Riot 和 Web 組件現成的可用組件。

GitHub：https://github.com/matteobruni/tsparticles

Rough Notation

Rough Notation是一個小型 JavaScript 庫，用于在網頁上創建和動畫注釋。它使用RoughJS 創建手繪的外觀和感覺。元素可以用多種不同的樣式進行注釋。動畫持續時間可以配置，或者只是關閉。壓縮后的大小僅 3.83kb。

GitHub：https://github.com/rough-stuff/rough-notation

Animate on Scroll

Animate on Scroll是一個在頁面時創建動畫的JavaScript動畫庫。

GitHub：https://github.com/topics/animate-on-scroll

Framer Motion

Motion 是Framer的 React 的生產就緒運動庫。它帶來了聲明性動畫、輕松的布局轉換和手勢，同時保持了 HTML 和 SVG 語義。Motion 使用強大的手勢識別器擴展了 React 的事件系統。它支持懸停、點擊、平移和拖動。注意，Motion 需要 React 16.8 或更高版本。

GitHub：https://github.com/framer/motion

React Motion

React Motion 是一個用于 React 應用程序的動畫庫，可以輕松創建和實現逼真的動畫。

GitHub：https://github.com/chenglou/react-motion

關于“好用的JavaScript動畫庫有哪些”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。