前端工具分享：27 個動畫庫，提升使用者體驗度與頁面美觀！

這篇文章為大家總結分享27 個前端動畫庫，讓你的互動更加酷炫，提升使用者體驗度和頁面美觀度，希望對大家有所幫助！

很多時候我們在開發前端頁面時都會做一些動畫效果來提升用戶體驗度和頁面美觀度，所以今天就來給大家推薦幾個好用的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請求並增強使用者的網路體驗。

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

【相關影片教學推薦：web前端 】

以上是前端工具分享：27 個動畫庫，提升使用者體驗度與頁面美觀！的詳細內容。更多資訊請關注PHP中文網其他相關文章！