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

1. GSAP（GreenSock 動畫平臺）

GSAP就像動畫庫的瑞士軍刀。它堅固耐用、用途廣泛，深受全球?qū)I(yè)人士的喜愛。

例：

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

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

2. Anime.js：簡單而強大

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

例：

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

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

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

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

例：

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

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

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

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

例：

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

此代碼段創(chuàng)建了一個簡單的綠色 3D 立方體，您可以對其進行操作和動畫制作。

5. Lottie：動畫變得簡單

Lottie 將復雜的動畫變成了小菜一碟。這就像你的口袋里有一個專業(yè)的動畫師！

例：

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

此代碼從 JSON 文件加載并播放 Lottie 動畫。

6. Popmotion：最佳的靈活性

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

例：

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

這個簡單的動畫從 0 到 100 計數(shù)，記錄每個值。

7. Mo.js：動態(tài)圖形變得簡單

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

例：

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

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

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

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

例：

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

這將創(chuàng)建一個在兩個短語之間交替的鍵入動畫。

9. AniJS：非編碼人員的動畫

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

例：

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

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

10. Framer Motion：React 的動畫超級英雄

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

例：

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

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

11. ScrollMagic：基于滾動的動畫大師

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

例：

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

這將創(chuàng)建一個動畫，該動畫在用戶滾動時縮放元素。

12. Motion One：小而強大

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

例：

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

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

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

請記住，最適合您的庫取決于您的特定需求和項目要求。不要害怕嘗試不同的選項來找到您的完美匹配。

SS簡介

1.什么是CSS？

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

2.為什么使用CSS？

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

3.CSS作用

• 頁面外觀美化
• 布局和定位

CSS動畫

動畫的原理

• 人腦的bug

定義

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

概念

• 幀：每個靜止的畫面都叫做幀
• 播放速度：每秒24幀（影視）或者每秒30幀（游戲）

瀏覽器渲染原理

瀏覽器渲染過程步驟

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

如何更新樣式

一般JS來更新樣式

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

三種更新方式

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

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

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

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

3.JS/CSS》樣式》合成

比如：改變transform，直接composite。

CSS動畫優(yōu)化

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

CSS 動畫的兩種做法（transition 和 animation）

一. transform

四個常用功能

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

經(jīng)驗：

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

transform: translate

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

經(jīng)驗：

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

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

transform: scale

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

經(jīng)驗：

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

transform: rotate

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

經(jīng)驗：

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

transform: skew

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

經(jīng)驗：

• 用得較少

transform 可以組合使用

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

transition 過渡

作用

• 補充中間幀

語法

• transition: 屬性名 時長 過渡方式 延遲
• transition: left 200ms linear
• 可以用逗號分隔開兩個不同的屬性
• transition: left200ms，top400ms
• 可以用all代表所有屬性
• transition: 200ms
• 過渡方式有： linear|ease|ease-in|ease-out|ease-in-out|**cubic-bezier|step-start|step-end|steps,具體含義要靠數(shù)學知識

并不是所有的屬性都能過度

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

二. animation

縮寫語法

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

使用animation

1. 聲明關(guān)鍵幀 @keyframes xxx
2. 添加動畫 animation:xxx

如何讓動畫停在最后一幀

• 給animation加個forwards

@keyframes 完整語法

• 一種寫法是from…to
• 另一種寫法是百分數(shù)

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