12 個動態(tài) JavaScript 動畫庫增強用戶體

12 個動態(tài) JavaScript 動畫庫增強用戶體驗

過迷人有趣的動畫可以吸引用戶的注意力！因此，今天我們將一起來探索 10 個動態(tài) JavaScript 動畫庫，輕松增強用戶體驗。從滾動動畫到手寫效果和 SPA 頁面過渡，這些庫增添了獨特的美感，提高了參與度，并留下了令人難忘的第一印象。

現(xiàn)在，讓我們一起來深入了解一下！

1.Anime.js

地址：https://animejs.com/

Anime.js 在 GitHub 上擁有超過 43,000 顆星，是頂級動畫庫。這個輕量級的 JavaScript gem 擁有一個簡單的 API，允許 CSS 屬性、SVG、DOM 屬性和 JavaScript 對象的無縫動畫。

使用 Anime.js，可以實現(xiàn)播放、暫停、重新啟動或反轉(zhuǎn)動畫。其多功能性在通過精確排序和重疊功能對多個元素進行動畫處理方面表現(xiàn)出色。使用回調(diào)探索各種與動畫相關(guān)的事件，并承諾動態(tài)動畫體驗。

2.Lottie

地址：https://airbnb.io/lottie/

Lottie 是一個出色的庫，可以解析通過 Bodymovin 插件以 JSON 格式導出的 Adobe After Effects 動畫。它可以在移動和 Web 應用程序上無縫地本地渲染這些動畫，從而消除了專業(yè) After Effects 藝術(shù)家手動重新創(chuàng)建復雜設計的需要。

GitHub 網(wǎng)頁版擁有超過 27,000 顆星，凸顯了其受歡迎程度和有效性。與 Lottie 一起探索輕松動畫集成的世界！

3. Velocity

地址：http://velocityjs.org/

Velocity 是一個動態(tài)庫，使你能夠制作迷人的彩色動畫、變換、循環(huán)、緩動、SVG 動畫等。利用熟悉的 $.animate() API（類似于 jQuery），它可以在可用時與 jQuery 無縫集成。

憑借漸變效果、滾動、滑動以及對持續(xù)時間和延遲的全面控制等多功能功能，Velocity 在 GitHub 上擁有超過 17,000 顆星，脫穎而出。它是 Anime.js 的一個引人注目的替代品，它提供了一個強大的解決方案來增強你的動畫工作。

4.Rough Notation

地址：https://roughnotation.com/

使用 Rough Notation 提升你的網(wǎng)頁注釋，這是一個 JavaScript 庫，可為你帶來生動的動畫注釋。由 RoughJS 提供支持，它增添了迷人的手繪美感。探索多種注釋樣式，例如下劃線、框、圓圈、突出顯示和刪除線。

享受對每種注釋樣式的持續(xù)時間和顏色的細粒度控制。利用 Rough Notation 的動態(tài)且豐富多彩的注釋功能，在您的網(wǎng)頁上釋放創(chuàng)造力！

5.Popmotion

地址：https://popmotion.io/

使用 Popmotion 釋放動畫的力量！與傳統(tǒng)庫不同，Popmotion 不會對對象的屬性做出假設。它提供了簡單、可組合的函數(shù)，適用于任何 JavaScript 環(huán)境。深入研究數(shù)字、顏色和復雜字符串的關(guān)鍵幀、彈簧和慣性動畫。

這個經(jīng)過充分測試和積極維護的庫在 GitHub 上擁有超過 19,000 顆星，為你的項目帶來多功能性和活力。利用 Popmotion 的創(chuàng)新和靈活方法提升你的動畫！

6. live

地址：https://maxwellito.github.io/vivus/

使用 Vivus 提升你的 SVG！這個 JavaScript 庫使 SVG 栩栩如生，創(chuàng)造了繪圖過程的錯覺。Vivus 快速、輕量且獨立于工具，提供三種動畫方法：延遲、同步和一對一。

使用自定義腳本定制您的 SVG 繪圖體驗，調(diào)整持續(xù)時間、延遲、計時函數(shù)等。深入 Vivus Instant 的世界，獲取現(xiàn)場實踐示例。使用 Vivus 的迷人動畫將靜態(tài) SVG 轉(zhuǎn)變?yōu)閯討B(tài)杰作！

7.GSAP：動畫平臺

地址：https://greensock.com/

使用 GreenSock 動畫平臺 (GSAP) 潛入令人驚嘆的動畫世界！這個多功能庫無縫集成到主要瀏覽器、React、Vue、WebGL 和 HTML 畫布中，提供對顏色、字符串、運動路徑等進行動畫處理的功能。

GSAP 的 ScrollTrigger 插件通過令人印象深刻的基于滾動的動畫增強您的創(chuàng)作，只需幾行代碼。

GSAP 受到超過 1100 萬個網(wǎng)站的信賴，并在 GitHub 上擁有 15K 顆星，可將您的設計變?yōu)楝F(xiàn)實。使用 GSDevTools 簡化調(diào)試，確保您的動畫精確呈現(xiàn)。通過 GSAP 釋放創(chuàng)造力并吸引觀眾！

8. Three.js

地址：https://trijs.org/

使用 Three.js 將你的項目提升到新的維度！這個輕量級庫擅長呈現(xiàn)復雜的 3D 對象和動畫。利用 WebGL、SVG 和 CSS3D 渲染器，Three.js 打造與各種瀏覽器和設備兼容的沉浸式 3D 體驗。

它是 JavaScript 社區(qū)的最愛，在 GitHub 上擁有超過 85K 顆星，展示了其廣泛的贊譽和可靠性。釋放 Three.js 的力量，在動態(tài) 3D 領(lǐng)域?qū)⒛脑妇白優(yōu)楝F(xiàn)實！

9.ScrollReveal

地址：https://scrollrevealjs.org/

使用 ScrollReveal 增強網(wǎng)站的視覺吸引力！這個多功能庫簡化了 DOM 元素進入或離開瀏覽器視口的動畫。ScrollReveal 在滾動時提供無縫元素可見性的優(yōu)雅效果，確保跨多個瀏覽器的令人愉快的用戶體驗。

其人性化的設計、對 GitHub 的零依賴以及超過 2100 位用戶的認可，使其成為迷人的滾動動畫的首選。使用 ScrollReveal 輕松提升您的網(wǎng)絡形象！

10.Barb.js

地址：https://barba.js.org/

使用 Barba.js 提升您網(wǎng)站的用戶體驗！這個創(chuàng)新庫將你的網(wǎng)站轉(zhuǎn)變?yōu)闊o縫旅程，模仿單頁應用程序 (SPA) 并提供令人愉快的頁面轉(zhuǎn)換。通過減少頁面之間的延遲并最大限度地減少 HTTP 請求，Barba.js 增強了導航流暢性。

它在 GitHub 上擁有近 11,000 顆星，證明了它在創(chuàng)建迷人的 Web 轉(zhuǎn)換方面的受歡迎程度和有效性。使用 Barba.js 提升您網(wǎng)站的吸引力，并給您的用戶留下持久的印象！

11.Mon.js

地址：https://mojs.github.io/

使用 Mo.js 提升您的網(wǎng)頁設計！這個功能強大的庫擁有簡單的聲明式 API，可以輕松制作流暢的動畫和迷人的特效，確保在所有屏幕尺寸上提供出色的視覺體驗。

無論你是操縱 HTML 或 SVG DOM 元素，還是創(chuàng)建具有獨特功能的獨特 Mo.js 對象，這個可靠且經(jīng)過充分測試的庫都經(jīng)過 1500 多項測試的支持，在 GitHub 上擁有超過 1700 顆星。釋放 Mo.js 的創(chuàng)意潛力，為你的網(wǎng)站注入動態(tài)動畫并給人留下深刻的印象！

12.Typed.js

地址：https://mattboldt.com/demos/typed-js/

釋放 Typed.js 的魔力！這個動態(tài)打字庫名副其實，逐字符動畫輸入文本，就像數(shù)字抄寫員實時打字一樣。

驚嘆于它的多功能性：控制打字速度、插入暫停或使用智能退格鍵實現(xiàn)無縫連續(xù)字符串輸入。批量輸入？絕對地！同時鍵入一組字符以獲得迷人的效果。

Typed.js 在 GitHub 上擁有超過 12K 顆星，是值得信賴的最愛，得到了 Slack 和 Envato 等行業(yè)巨頭的認可。利用 Typed.js 的迷人魅力提升您的文本動畫并吸引你的觀眾！

總結(jié)

今天文章中分享的12個工具庫，都比較實用，希望這些內(nèi)容對你的工作有所幫助。

最后，如果你覺得我今天分享的內(nèi)容不錯的話，請記得點贊我關(guān)注我，并將此內(nèi)容分享給你的朋友們，也許能夠幫助到他們。

在此，感謝你的閱讀，祝編程愉快！

們前面提到過，轉(zhuǎn)換（transitions）實際上就是一種特殊的CSS動畫（見《前端設計必須掌握：定義CSS樣式之間的切換》）：

只有兩個狀態(tài)：起始狀態(tài)和終止狀態(tài)
動畫不會出現(xiàn)循環(huán)
中間狀態(tài)只能由時變函數(shù)（transition-timing-function）來控制

實際動畫需求要復雜得多，比如我們可能會需要：

自動播放的動畫（不會有交互狀態(tài)）
控制中間狀態(tài)
創(chuàng)建循環(huán)動畫
在同一個HTML元素上應用不同的動畫
在動畫過程中控制不同的元素屬性
給不同的屬性應用不同的時變函數(shù)

這個時候就需要使用CSS3動畫（animation）特性，而且提供了更多的功能。CSS3動畫就像一部迷你電影，里面有演員（HTML元素）、劇本（keyframes）以及動作片段（CSS規(guī)則）。

animation 屬性

和 transition 屬性一樣，animation 是一組動畫屬性的速寫：

name: 動畫名稱
duration: 動畫持續(xù)時間
timing-function: 時變函數(shù)，用來計算中間狀態(tài)
delay: 延時，在一定時候后啟動動畫
iteration-count: 動畫重復的次數(shù)
direction: 動畫的運行方向，可以是反過來的
fill-mode: 動畫填充模式，用來確定動畫開始之前和結(jié)束之后的樣式

例：按鈕彈跳動畫

CSS代碼如下：

效果圖如下：

首先我們選定“演員”為一個加載按鈕（html元素），然后設定其表演劇本（keyframes）為彈跳，然后添加一些動作指令（CSS規(guī)則）來創(chuàng)建一個CSS3動畫：

name: bouncing （動畫名稱必須和keyframes名稱一致）
duration: 0.5s （持續(xù)0.5秒）
timing-function: cubic-bezier(0.1,0.25,0.1,1)
delay: 0s （沒有延遲）
iteration-count: infinite （無限循環(huán)）
direction: alternate （交替往返）
fill-mode: both（填充模式同時應用backwards和forwards規(guī)則，后面會詳細說明）

@keyframes

在“電影開拍”之前，我們得創(chuàng)建“劇本”（@keyframes，即關(guān)鍵幀），用來規(guī)定動畫中間的每一個表演步驟。@keyframes通過percentages（百分比格式的時間坐標）來定義：

0% 動畫的第一幀（可選）。
50% 動畫的中間時間節(jié)點。
100% 動畫的最后一幀。

我們也可以分別使用關(guān)鍵詞 from 和 to 來代替 0% 和 100%。

你可以定義任意多的keyframes，比如 33%, 4% 乃至 29.86%。每個 keyframe 都是一個 CSS規(guī)則，定義這個時間節(jié)點下元素的某個或某些屬性。

@keyframes 具體語法定義如下：

@keyframes animationname {keyframes-selector {css-styles;}}

animationname: 必需。定義動畫的名稱。
keyframes-selector: 必需。百分比格式的時間坐標。合法的值：0-100% | from（與 0% 相同）| to（與 100% 相同）。
css-styles: 必需。一個或多個合法的 CSS規(guī)則（樣式定義）。

CSS代碼：

效果圖如下：

上面的例子把起點 0% 和終點 100% 設置成一樣的狀態(tài)，并且是 infinite 播放，這樣可以確保動畫的兩次播放之間的無縫銜接。

另外如果若干時間節(jié)點具有相同的樣式，可以合并在一起簡寫，比如：

如果在@keyframes中0%和100%時間點所設置的屬性有默認值，那么有些情況下可以忽略不寫。

動畫名稱（animation-name）

動畫名稱（animation-name）會至少出現(xiàn)兩次：

一次是“編寫劇本” @keframes 時。
一次是“演員入戲”時，即設置HTML元素的 animation-name 屬性值為“劇本”的名稱（或者在 animation 速寫中）。

和CSS class名稱一樣，animation 的名稱只能包含：

字母 (a-z)
數(shù)字 (0-9)
下劃線 underscore (_)
中劃線 dash (-)

不能以數(shù)字或者兩個中劃線開始。

動畫持續(xù)時間（animation-duration）

和 transition durations 一樣，animation durations 可以設置為秒 1s 或毫秒 200ms。

默認值為 0s，即不會有動畫出現(xiàn)。

動畫時變函數(shù)（animation-timing-function）

和 transition timing functions 一樣，animation timing functions 可以使用一些預定義的關(guān)鍵詞比如 linear, ease-out, 或者使用cubic bezier函數(shù)來自定義。

缺省值是 ease。

我們可以通過設置線性時變函數(shù)以及自定義的@keyframes來模擬復雜的貝塞爾曲線。Bounce.js 就是這樣一個在線高級動畫生成工具，支持導出CSS樣式代碼。

動畫延時（animation-delay）

和 transition delays 一樣，animation delays 可以設置為秒 1s 或毫秒 200ms。

默認值為 0s，即不會有延遲。

這個屬性在觸發(fā)多個時間交替的動畫序列時很有用。

動畫循環(huán)次數(shù)（animation-iteration-count）

默認情況下，動畫只運行一次（即默認值為 1），你可以設置3種類型的數(shù)值：

整數(shù) 如 2 或 3
小數(shù) 如 0.5，意味著只運行動畫的一半
關(guān)鍵詞 infinite 無限重復

動畫方向（animation-direction）

animation-direction 定義瀏覽器對@keyframes的讀取順序。

normal: 正常方向，從 0% 開始，到 100% 結(jié)束，然后再從 0% 開始。
reverse: 相反方向，從 100% 開始，到 0% 結(jié)束，然后再從 100% 開始。
alternate: 交替方向，從 0% 開始，到 100% ，再到 0%。
alternate-reverse: 反向交替方向，從 100% 開始，到 0%，再到 100%。

通過下面的循環(huán)動畫，對比小方塊的運動軌跡，可以比較直觀的感受這幾個方向取值之間的差別：

動畫填充模式（animation-fill-mode）

animation-fill-mode 用來確定動畫開始之前和結(jié)束之后的狀態(tài)。這樣才是一個完整的動畫過程。

通過 keyframes 我們定義了動畫不同階段下的CSS規(guī)則，這有可能會和已經(jīng)定義的樣式?jīng)_突。

填充模式屬性允許我們告訴瀏覽器是否動畫樣式在動畫之外也生效。

讓我們想象這樣一個按鈕：

默認是紅色
在動畫開始時被設置為綠色
在動畫結(jié)束時被設置為藍色

效果圖：

我們可以簡單的理解為：forwards就是動畫樣式作用區(qū)間向時間軸正方向（->）延伸，backwards則向負方向（<-）延伸，而both就是雙向（<- ->）延伸。從而影響到相鄰區(qū)間的默認樣式。

現(xiàn)文字波浪動畫，我們首先想到的是使用 Javascript 來實現(xiàn)。如今，現(xiàn)代 CSS 屬性已逐漸被現(xiàn)代瀏覽器所支持，本文將探索使用純 CSS 來實現(xiàn)。

1.效果預覽

2.實現(xiàn)方案

實現(xiàn)方案主要使用現(xiàn)代 CSS 提供的樣式屬性來實現(xiàn)：

一個 HTML 元素 h1
text-stroke 實現(xiàn)文字鏤空
background-clip 實現(xiàn)背景裁切
radial-gradient 實現(xiàn)背景漸變
animation 實現(xiàn)波浪動畫

2.1.創(chuàng)建頁面框架

使用 html:5 和 div[class=wavy-text]{Wavy Text Animation} 快速創(chuàng)建頁面框架:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>現(xiàn)代CSS：純 CSS 實現(xiàn)文字波浪動畫</title>
  </head>
  <body>
    <div class="wavy-text">Wavy Text Animation</div>
  </body>
</html>

2.2.實現(xiàn)文字鏤空效果

鏤空效果實現(xiàn)比較簡單，主要通過 color 和 text-stroke 屬性來實現(xiàn)

.wavy-text {
  --color: #269af2;
  color: transparent;
  -webkit-text-stroke: 0.2rem var(--color);
}

2.3.實現(xiàn)背景色漸變

背景色漸變，主要使用到了 radial-gradient 和

.wavy-text {
  --color: #269af2;

  --_p: 93% 83.5% at;
  --_g1: radial-gradient(var(--_p) bottom, var(--color) 79.5%, #0000 80%)
    no-repeat;
  --_g2: radial-gradient(var(--_p) top, #0000 79.5%, var(--color) 80%)
    no-repeat;
  /* 背景顏色 */
  background: var(--_g1), var(--_g2), var(--_g1), var(--_g2);
}

2.4.實現(xiàn)背景裁切

背景裁切主要用到了 CSS 屬性 background-clip, 實現(xiàn)文本裁切效果。該屬性已經(jīng)被現(xiàn)代瀏覽器所支持，但是部分瀏覽器需要使用 -webkit- 前綴來支持。

.wavy-text {
  -webkit-background-clip: text;
          background-clip: text;
}

2.5.實現(xiàn)波浪動畫

實現(xiàn)波浪動畫，主要是通過背景位置 backgroun-position 和 background-size 的變化來實現(xiàn)，動畫中增加了無線循環(huán)。

.wavy-text {
  animation: s 2s infinite alternate, m 3s infinite linear;
}
@keyframes m {
  0% {
    background-position: -200% 100%, -100% 100%, 0% 100%, 100% 100%;
  }
  100% {
    background-position: 0% 100%, 100% 100%, 200% 100%, 300% 100%;
  }
}
@keyframes s {
  0% {
    background-size: 50.5% 80%;
  }
  33% {
    background-size: 50.5% 70%;
  }
  66% {
    background-size: 50.5% 85%;
  }
  100% {
    background-size: 50.5% 95%;
  }
}

2.6.實現(xiàn)文本居中

實現(xiàn)文本水平垂直居中，我們僅用了一行 CSS 代碼 place-content 來實現(xiàn)，它是 align-content 和 justify-content 的混合屬性。

body {
  display: grid;
  place-content: center;
}

3.總結(jié)

現(xiàn)代 CSS 相關(guān)屬性已經(jīng)被越來越多的瀏覽器所支持，通過 CSS 來實現(xiàn)的效果也越來越多，歡迎大家和小懶一起關(guān)注和學習。

如果本文對您有幫助，歡迎關(guān)注、點贊和轉(zhuǎn)發(fā)，感謝您的支持！

在線咨詢

上一篇：HTML5實現(xiàn)頭像的上傳
下一篇：DashVector向量數(shù)據(jù)庫 + ModelSco

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商