您準備好將您的網頁設計提升到一個新的水平嗎？ JavaScript 動畫庫是將靜態頁面轉換為動態、引人注目的體驗的秘訣。無論您是經驗豐富的開發人員還是剛起步的開發人員，這些程式庫都提供了強大的工具來將您的創意願景變為現實。讓我們深入了解 2024 年掀起波瀾的 12 個 JavaScript 動畫庫！
-
GSAP（GreenSock動畫平台）：動畫強國
GSAP就像動畫庫中的瑞士軍刀。它堅固耐用、用途廣泛，深受全球專業人士的喜愛。
例子：
gsap.to(".box", {duration: 2, x: 300, rotation: 360, ease: "bounce"});這個簡單的程式碼使盒子元素向右移動 300 像素，同時旋轉 360 度並具有彈性效果。
-
Anime.js：簡單但強大
Anime.js證明，有時，少即是多。其輕量化特性並不會影響功率。
例子：
anime({
targets: '.circle',
translateX: 250,
scale: 2,
duration: 3000
});動畫在 3 秒內平滑移動並放大圓形元素。
-
Velocity.js：速度與優雅的結合
Velocity.js注重效能而不犧牲功能。這就像將火箭綁在您的動畫上一樣！
例子：
$(".element").velocity({
translateY: "200px",
rotateZ: "45deg"
}, 1000);此程式碼僅在一秒鐘內將元素向下平移 200 像素並旋轉 45 度。
-
Three.js：將 3D 引入 Web
Three.js開闢了一個全新的維度——字面上！它是您在瀏覽器中建立令人驚嘆的 3D 圖形的入口網站。
例子：
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);此程式碼片段建立了一個簡單的綠色 3D 立方體，您可以對其進行操作和設定動畫。
-
Lottie：動畫變得簡單
Lottie 將複雜的動畫變成小菜一碟。這就像你的口袋裡有一個專業的動畫師！
例子：
lottie.loadAnimation({
container: document.getElementById('lottie-container'),
renderer: 'svg',
loop: true,
autoplay: true,
path: 'data.json'
});此程式碼從 JSON 檔案載入並播放 Lottie 動畫。
-
Popmotion：最佳靈活性
Popmotion就像變色龍 - 它可以輕鬆適應任何 JavaScript 環境。
例子：
animate({
from: 0,
to: 100,
onUpdate: latest => console.log(latest)
});這個簡單的動畫從 0 計數到 100，記錄每個值。
-
Mo.js：動態圖形變得簡單
Mo.js讓建立動態圖形就像用蠟筆繪圖一樣簡單，但結果卻更壯觀！
例子：
const burst = new mojs.Burst({
radius: { 0: 100 },
count: 5,
children: {
shape: 'circle',
fill: { 'cyan' : 'yellow' },
duration: 2000
}
});此程式碼建立一個帶有五個圓圈擴展和改變顏色的連拍動畫。
8.Typed.js：讓文字栩栩如生
Typed.js為您的文字增添了人情味。這就像您的網站上有一個幽靈打字員！
例子：
new Typed('#element', {
strings: ['Hello, World!', 'Welcome to my website!'],
typeSpeed: 50
});這將建立一個在兩個短語之間交替的打字動畫。
-
AniJS：非編碼人員的動畫
AniJS就像魔法一樣 - 您無需編寫任何程式碼即可建立動畫！
例子：
<div data-anijs="if: click, do: fadeIn, to: .target"></div>此 HTML 屬性會在點擊時建立淡入動畫。
-
Framer Motion：React 的動畫超級英雄
Framer Motion和 React 的結合就像花生醬和果凍一樣。它是 React 工具包的完美補充。
例子：
<motion.div
animate={{ x: 100 }}
transition={{ duration: 2 }}
/>此 React 元件在 2 秒內向右移動 100 像素的動畫。
-
ScrollMagic：基於滾動的動畫大師
ScrollMagic將滾動變成一場冒險。這就像當用戶滾動瀏覽您的網站時製作一部迷你電影！
例子：
new ScrollMagic.Scene({
triggerElement: "#trigger",
duration: 300
})
.setTween("#animate", {scale: 2.5})
.addTo(controller);這將建立一個隨著用戶滾動而縮放元素的動畫。
-
動作一：小而強大
Motion One證明了小包裝帶來的好東西。它很輕，但具有強大的衝擊力！
例子：
animate("#box", { x: 100 }, { duration: 1 });這條簡單的線在一秒鐘內將一個盒子向右移動 100 像素。
總結：您的動畫之旅從這裡開始！
現在您已經擁有了 - 12 個令人驚嘆的 JavaScript 動畫庫，它們可以將您的 Web 專案從普通變為非凡。無論您是要建立簡單的懸停效果還是複雜的 3D 世界，這些庫都能滿足您的需求。
請記住，最適合您的庫取決於您的特定需求和專案要求。不要害怕嘗試不同的選擇來找到最適合您的選擇。
那麼，您想先嘗試哪個函式庫呢？您已經在您的專案中使用了其中一些嗎？在下面的評論中分享您的經驗和問題。讓我們一起為網路注入活力吧！
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式