12 個(gè)最佳 JavaScript 動(dòng)畫(huà)庫(kù)，讓您的

12 個(gè)最佳 JavaScript 動(dòng)畫(huà)庫(kù)，讓您的 Web 頁(yè)面動(dòng)起來(lái)

準(zhǔn)備好把你的網(wǎng)頁(yè)設(shè)計(jì)提升到一個(gè)新的水平了嗎？JavaScript 動(dòng)畫(huà)庫(kù)是可以將靜態(tài)頁(yè)面轉(zhuǎn)換為動(dòng)態(tài)、引人注目的體驗(yàn)的秘密武器。無(wú)論您是經(jīng)驗(yàn)豐富的開(kāi)發(fā)人員還是剛剛起步的開(kāi)發(fā)人員，這些庫(kù)都能提供強(qiáng)大的工具，將您的創(chuàng)意愿景變?yōu)楝F(xiàn)實(shí)。讓我們深入了解 12 年掀起波瀾的 2024 大 JavaScript 動(dòng)畫(huà)庫(kù)！

1. GSAP（GreenSock 動(dòng)畫(huà)平臺(tái)）

GSAP就像動(dòng)畫(huà)庫(kù)的瑞士軍刀。它堅(jiān)固耐用、用途廣泛，深受全球?qū)I(yè)人士的喜愛(ài)。

例：

gsap.to(".box", {duration: 2, x: 300, rotation: 360, ease: "bounce"});

這個(gè)簡(jiǎn)單的代碼使框元素向右移動(dòng) 300 像素，同時(shí)旋轉(zhuǎn) 360 度，具有彈性效果。

2. Anime.js：簡(jiǎn)單而強(qiáng)大

Anime.js證明，有時(shí)候，少即是多。它的輕巧特性不會(huì)在功率上妥協(xié)。

例：

anime({
  targets: '.circle',
  translateX: 250,
  scale: 2,
  duration: 3000
});

此動(dòng)畫(huà)在 3 秒內(nèi)平滑移動(dòng)并放大圓形元素。

3. Velocity.js：速度與優(yōu)雅的結(jié)合

Velocity.js都是關(guān)于性能的，同時(shí)又不犧牲功能。這就像在你的動(dòng)畫(huà)上綁上火箭一樣！

例：

$(".element").velocity({
  translateY: "200px",
  rotateZ: "45deg"
}, 1000);

此代碼將元素向下轉(zhuǎn)換 200 像素，并在一秒鐘內(nèi)將其旋轉(zhuǎn) 45 度。

4. Three.js：將 3D 引入網(wǎng)絡(luò)

Three.js開(kāi)辟了一個(gè)全新的維度 - 從字面上看！它是您在瀏覽器中創(chuàng)建令人驚嘆的 3D 圖形的門(mén)戶(hù)。

例：

const geometry=new THREE.BoxGeometry();
const material=new THREE.MeshBasicMaterial({color: 0x00ff00});
const cube=new THREE.Mesh(geometry, material);
scene.add(cube);

此代碼段創(chuàng)建了一個(gè)簡(jiǎn)單的綠色 3D 立方體，您可以對(duì)其進(jìn)行操作和動(dòng)畫(huà)制作。

5. Lottie：動(dòng)畫(huà)變得簡(jiǎn)單

Lottie 將復(fù)雜的動(dòng)畫(huà)變成了小菜一碟。這就像你的口袋里有一個(gè)專(zhuān)業(yè)的動(dòng)畫(huà)師！

例：

lottie.loadAnimation({
  container: document.getElementById('lottie-container'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'data.json'
});

此代碼從 JSON 文件加載并播放 Lottie 動(dòng)畫(huà)。

6. Popmotion：最佳的靈活性

Popmotion就像一條變色龍 - 它可以輕松適應(yīng)任何JavaScript環(huán)境。

例：

animate({
  from: 0,
  to: 100,
  onUpdate: latest=> console.log(latest)
});

這個(gè)簡(jiǎn)單的動(dòng)畫(huà)從 0 到 100 計(jì)數(shù)，記錄每個(gè)值。

7. Mo.js：動(dòng)態(tài)圖形變得簡(jiǎn)單

Mo.js使創(chuàng)建動(dòng)態(tài)圖形就像用蠟筆繪圖一樣簡(jiǎn)單，但結(jié)果卻更加壯觀！

例：

const burst=new mojs.Burst({
  radius:   { 0: 100 },
  count:    5,
  children: {
    shape:      'circle',
    fill:       { 'cyan' : 'yellow' },
    duration:   2000
  }
});

此代碼創(chuàng)建一個(gè)連拍動(dòng)畫(huà)，其中包含五個(gè)擴(kuò)展和改變顏色的圓圈。

8. Typed.js：讓文本栩栩如生

Typed.js為您的文本增添了人情味。這就像在您的網(wǎng)站上有一個(gè)幽靈打字員！

例：

new Typed('#element', {
  strings: ['Hello, World!', 'Welcome to my website!'],
  typeSpeed: 50
});

這將創(chuàng)建一個(gè)在兩個(gè)短語(yǔ)之間交替的鍵入動(dòng)畫(huà)。

9. AniJS：非編碼人員的動(dòng)畫(huà)

AniJS 就像魔術(shù)一樣 - 您無(wú)需編寫(xiě)任何代碼即可創(chuàng)建動(dòng)畫(huà)！

例：

<div data-anijs="if: click, do: fadeIn, to: .target"></div>

此 HTML 屬性在單擊時(shí)創(chuàng)建淡入動(dòng)畫(huà)。

10. Framer Motion：React 的動(dòng)畫(huà)超級(jí)英雄

Framer、Motion 和 React 就像花生醬和果凍一樣搭配在一起。它是你的 React 工具包的完美補(bǔ)充。

例：

<motion.div
  animate={{ x: 100 }}
  transition={{ duration: 2 }}
/>

這個(gè) React 組件在 2 秒內(nèi)向右移動(dòng) 100 個(gè)像素。

11. ScrollMagic：基于滾動(dòng)的動(dòng)畫(huà)大師

ScrollMagic 將滾動(dòng)變成一場(chǎng)冒險(xiǎn)。這就像在用戶(hù)滾動(dòng)瀏覽您的網(wǎng)站時(shí)創(chuàng)建一部迷你電影！

例：

new ScrollMagic.Scene({
  triggerElement: "#trigger",
  duration: 300
})
.setTween("#animate", {scale: 2.5})
.addTo(controller);

這將創(chuàng)建一個(gè)動(dòng)畫(huà)，該動(dòng)畫(huà)在用戶(hù)滾動(dòng)時(shí)縮放元素。

12. Motion One：小而強(qiáng)大

Motion One 證明了好東西來(lái)自小包裝。它很輕，但很有沖擊力！

例：

animate("#box", { x: 100 }, { duration: 1 });

這條簡(jiǎn)單的線在一秒鐘內(nèi)將一個(gè)盒子向右移動(dòng) 100 像素。

你有這12 個(gè)令人驚嘆的 JavaScript 動(dòng)畫(huà)庫(kù)，可以將您的 Web 項(xiàng)目從普通轉(zhuǎn)變?yōu)榉欠病o(wú)論您是創(chuàng)建簡(jiǎn)單的懸停效果還是復(fù)雜的 3D 世界，這些庫(kù)都能滿(mǎn)足您的需求。

請(qǐng)記住，最適合您的庫(kù)取決于您的特定需求和項(xiàng)目要求。不要害怕嘗試不同的選項(xiàng)來(lái)找到您的完美匹配。

言

在之前的一篇文章《默認(rèn)的input標(biāo)簽太丑？教你如何使用CSS寫(xiě)出帶動(dòng)畫(huà)的樣式》中有講過(guò)如何實(shí)現(xiàn)一個(gè)漂亮的input標(biāo)簽樣式。

既然已經(jīng)折騰了，今天這篇文章我們就繼續(xù)折騰，看看如何通過(guò)CSS3實(shí)現(xiàn)一個(gè)帶動(dòng)畫(huà)的checkbox樣式？

CSS3

感興趣的可以自行去github上看源文件，地址如下：

https://github.com/zhouxiongking/article-pages/blob/master/articles/beautifulCheckbox/beautifulCheckbox.html

checkbox

checkbox作為多選框，在form表單中的使用頻率是非常高的，例如問(wèn)卷調(diào)查的多選題，個(gè)人興趣愛(ài)好的選擇時(shí)都會(huì)用到多選框。

而瀏覽器默認(rèn)的checkbox樣式都很丑，看起來(lái)就是一個(gè)小小的方框，雖然Bootstrap已經(jīng)有好看的checkbox樣式，但是它不支持動(dòng)畫(huà)，在交互上仍然存在缺陷，所以我們就試圖自己寫(xiě)出一個(gè)帶動(dòng)畫(huà)的checkbox效果。

首先我們來(lái)看看checkbox的動(dòng)態(tài)效果圖（中間的黑色圓圈實(shí)際為錄制GIF圖時(shí)產(chǎn)生的，請(qǐng)忽略）

checkbox效果圖

具體組成

接下來(lái)我們具體分析下頁(yè)面的元素組成，主要包括以下部分。

默認(rèn)的checkbox標(biāo)簽，將其display設(shè)置為none，隱藏起來(lái)。
label標(biāo)簽，表現(xiàn)為實(shí)際顯示的動(dòng)態(tài)選中和未選中效果。

我們需要達(dá)到的效果是，在未選中checkbox時(shí)，默認(rèn)為灰色的邊框，白色的背景；在選中checkbox時(shí)，改變背景色，出現(xiàn)白色的打勾動(dòng)畫(huà)效果。

代碼組成

在這部分，我們來(lái)具體分析下頁(yè)面的代碼組成。

HTML

首先是頁(yè)面的HTML部分代碼，如上一部分所示，頁(yè)面其實(shí)只有兩個(gè)元素組成，這兩個(gè)元素放在一個(gè)容器下，故HTML代碼如下所示。

HTML部分代碼

我們來(lái)看看CSS部分的代碼，因?yàn)镃SS部分代碼比較多，我們一一來(lái)分析。

首先是外層container的樣式，同時(shí)對(duì)頁(yè)面的html和body也做一些簡(jiǎn)單處理，代碼如下所示。

container樣式

其次是checkbox標(biāo)簽的樣式，因?yàn)樵腸heckbox除了在傳輸數(shù)據(jù)時(shí)有用處，在頁(yè)面呈現(xiàn)上并沒(méi)有作用，故設(shè)置display:none;將其隱藏。

checkbox樣式

然后是最重要的label部分，在未點(diǎn)擊之前l(fā)abel呈現(xiàn)一個(gè)正方形，有基本的樣式。

基本樣式

在點(diǎn)擊方形框后，出現(xiàn)的對(duì)勾是通過(guò)偽元素::before和::after實(shí)現(xiàn)的，對(duì)勾實(shí)際為兩個(gè)矩形拼接而成，左側(cè)的矩形用::after元素表示，右側(cè)的矩形用::before元素表示。兩者的通用樣式通過(guò)如下代碼實(shí)現(xiàn)。

偽元素實(shí)現(xiàn)

然后是針對(duì)::before和::after所特有的樣式，因?yàn)閮烧叩奈恢煤托D(zhuǎn)的角度不同，代碼也會(huì)出現(xiàn)差異。

特有樣式

然后是定義的打鉤的動(dòng)畫(huà)效果，這里使用keyframes關(guān)鍵字定義，考慮到瀏覽器兼容性，定義的動(dòng)畫(huà)具有不同的前綴。定義的動(dòng)畫(huà)也包括兩部分，首先是右側(cè)的矩形動(dòng)畫(huà)效果。

右側(cè)矩形動(dòng)畫(huà)效果

然后是左側(cè)矩形的動(dòng)畫(huà)效果，同樣考慮到瀏覽器的兼容性，樣式代碼如下。

左側(cè)矩形動(dòng)畫(huà)

至此，所有代碼都已講解完畢，如果運(yùn)行之后就會(huì)看到文章開(kāi)始的動(dòng)畫(huà)效果。

結(jié)束語(yǔ)

本篇文章主要講的是如何使用自定義的動(dòng)畫(huà)完成checkbox效果，感興趣的可以直接去github上看源文件代碼，后續(xù)會(huì)寫(xiě)一個(gè)跟開(kāi)關(guān)switch有關(guān)的文章，敬請(qǐng)期待~

SS簡(jiǎn)介

1.什么是CSS？

CSS：Cascading Style sheet層疊樣式表或級(jí)聯(lián)樣式表
? 是一種樣式設(shè)置規(guī)則，用于控制頁(yè)面的外觀的樣式

2.為什么使用CSS？

實(shí)現(xiàn)內(nèi)容與樣式的分離，方便團(tuán)隊(duì)開(kāi)發(fā)
樣式復(fù)用，便于網(wǎng)站后期維護(hù)
頁(yè)面的精確控制，讓頁(yè)面更精美

3.CSS作用

頁(yè)面外觀美化
布局和定位

CSS動(dòng)畫(huà)

動(dòng)畫(huà)的原理

人腦的bug

定義

由許多靜止的畫(huà)面（幀）組成
以一定的速度（如每秒30張）連續(xù)播放時(shí)
肉眼因視覺(jué)殘象產(chǎn)生錯(cuò)覺(jué)
而誤以為是活動(dòng)的畫(huà)面

概念

幀：每個(gè)靜止的畫(huà)面都叫做幀
播放速度：每秒24幀（影視）或者每秒30幀（游戲）

瀏覽器渲染原理

瀏覽器渲染過(guò)程步驟

根據(jù)HTML構(gòu)建HTML樹(shù)（DOM）
根據(jù)CSS構(gòu)建CSS樹(shù)（CSSOM）
將兩棵樹(shù)合并成一棵渲染樹(shù)（render tree）
Layout布局（文檔流、盒模型、計(jì)算大小和位置）
Paint繪制（把邊框顏色、文字顏色、陰影等畫(huà)出來(lái)）
Comepose合成（根據(jù)層疊關(guān)系展示畫(huà)面）

三棵樹(shù)

如何更新樣式

一般JS來(lái)更新樣式

比如div.remove()刪除節(jié)點(diǎn)
比如div.style.background='red'
比如div.style.display='none'
比如div.classList.add('red')

三種更新方式

1.JS/CSS》樣式》布局》繪制》合成

全走

比如：div.remove()會(huì)觸發(fā)當(dāng)前消失，其它元素relayout。

2.JS/CSS》樣式》繪制》合成

跳過(guò)Layout

比如：改變背景色，直接repaint+composite。

3.JS/CSS》樣式》合成

跳過(guò)Layout和Paint

比如：改變transform，直接composite。

CSS動(dòng)畫(huà)優(yōu)化

JS優(yōu)化：使用requestAnimationFrame代替setTimeout或setlntervl
CSS優(yōu)化：使用will-change或translate

CSS 動(dòng)畫(huà)的兩種做法（transition 和 animation）

一. transform

四個(gè)常用功能

位移 translate
縮放 scale
旋轉(zhuǎn) rotate
傾斜 skew

經(jīng)驗(yàn)：

一般都需要配合transition過(guò)度
inline元素不支持transform，需要先改變成block

transform: translate

translateX(像素(px) / 百分比(%))
translateY(像素(px) / 百分比(%))
translate(<像素 / 百分比>,<像素 / 百分比>？)
translateZ(像素) 且父容器加perspective
translate3d(x,y,z)

經(jīng)驗(yàn)：

多看MDN語(yǔ)法
translate(-50%,-50%)可做絕對(duì)定位元素居中

#demo{
left:50%;
top:50%;
transform:translate(-50%,-50%);
}

transform: scale

scaleX(倍數(shù))
scaleY(倍數(shù))
scale(倍數(shù)，倍數(shù))

經(jīng)驗(yàn)：

用得較少，容易出現(xiàn)模糊

transform: rotate

rotate([<angle> | <zero> ])
rotateZ([<angle> | <zero> ])
rotateX([<angle> | <zero> ])
rotateY([<angle> | <zero> ])
rotate3d

經(jīng)驗(yàn)：

一般用于360°旋轉(zhuǎn)制作loading。

transform: skew

skewX([<angle> | <zero> ])
skewY([<angle> | <zero> ])
skew([<angle> | <zero> ]，[<angle> | <zero> ]？)

經(jīng)驗(yàn)：

用得較少

transform 可以組合使用

transform：scale（0.5）translate（-100%，-100%）；
transform：none；取消所有

transition 過(guò)渡

作用

補(bǔ)充中間幀

語(yǔ)法

transition: 屬性名時(shí)長(zhǎng) 過(guò)渡方式延遲
transition: left 200ms linear
可以用逗號(hào)分隔開(kāi)兩個(gè)不同的屬性
transition: left200ms，top400ms
可以用all代表所有屬性
transition: 200ms
過(guò)渡方式有： linear|ease|ease-in|ease-out|ease-in-out|**cubic-bezier|step-start|step-end|steps,具體含義要靠數(shù)學(xué)知識(shí)

并不是所有的屬性都能過(guò)度

display: none=> block 不能過(guò)渡
要改成visibility: hidden=> visible
background 顏色可以過(guò)渡
opacity 透明度可以過(guò)渡

二. animation

縮寫(xiě)語(yǔ)法

animation: 時(shí)長(zhǎng) | 過(guò)渡方式 | 延遲 | 次數(shù) | 方向 | 填充模式 | 是否暫停 | 動(dòng)畫(huà)名
時(shí)長(zhǎng): 1s 或者 1000ms
過(guò)渡方式: 跟transition的取值一樣，如linear
次數(shù): 3 或 n 或者 infinite
方向: reverse | alternate | alternate-reverse
填充模式: none | forwards | backwards | both
是否暫停: paused | running
這些屬性都有對(duì)應(yīng)的單獨(dú)屬性

使用animation

聲明關(guān)鍵幀 @keyframes xxx
添加動(dòng)畫(huà) animation:xxx

如何讓動(dòng)畫(huà)停在最后一幀

給animation加個(gè)forwards

@keyframes 完整語(yǔ)法

一種寫(xiě)法是from…to
另一種寫(xiě)法是百分?jǐn)?shù)

本文為作者本人的原創(chuàng)文章，著作權(quán)歸作者本人和饑人谷所有，轉(zhuǎn)載務(wù)必注明來(lái)源。

在線咨詢(xún)

上一篇：JavaScript數(shù)組操作函數(shù)map,filter
下一篇：小白一個(gè)小時(shí)快速在CentOS6.9搭建Discuz

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

12 個(gè)最佳 JavaScript 動(dòng)畫(huà)庫(kù)，讓您的

1. GSAP（GreenSock 動(dòng)畫(huà)平臺(tái)）

2. Anime.js：簡(jiǎn)單而強(qiáng)大

3. Velocity.js：速度與優(yōu)雅的結(jié)合

4. Three.js：將 3D 引入網(wǎng)絡(luò)

5. Lottie：動(dòng)畫(huà)變得簡(jiǎn)單

6. Popmotion：最佳的靈活性

7. Mo.js：動(dòng)態(tài)圖形變得簡(jiǎn)單

8. Typed.js：讓文本栩栩如生

9. AniJS：非編碼人員的動(dòng)畫(huà)

10. Framer Motion：React 的動(dòng)畫(huà)超級(jí)英雄

11. ScrollMagic：基于滾動(dòng)的動(dòng)畫(huà)大師

12. Motion One：小而強(qiáng)大

言

checkbox

具體組成

代碼組成

結(jié)束語(yǔ)

SS簡(jiǎn)介

CSS動(dòng)畫(huà)

瀏覽器渲染原理

CSS 動(dòng)畫(huà)的兩種做法（transition 和 animation）

您的項(xiàng)目需求