2024最新！網頁動起來，Anime.js入門倒數，別錯過！

Anime.js 動畫入門：用 JavaScript 輕鬆打造網頁動畫效果 (2024 最新版)

想讓你的網頁不再死氣沉沉，充滿活力嗎？想為使用者帶來更豐富、更吸引人的互動體驗嗎？那麼，你絕對不能錯過 Anime.js 這款超棒的 JavaScript 動畫函式庫！

Anime.js 是一款快速、多功能、輕量級的 JavaScript 動畫函式庫，它擁有簡單而強大的 API，可以輕鬆地控制 CSS 屬性、SVG、DOM 屬性和 JavaScript 物件，讓你能創造出各種令人驚豔的動畫效果。

這篇文章將帶領你從零開始，了解 Anime.js 的核心概念與使用方法，即使是動畫新手也能快速上手！

為什麼選擇 Anime.js？

在眾多的 JavaScript 動畫函式庫中，Anime.js 憑藉以下優勢脫穎而出：

簡單易用： API 設計簡潔明瞭，容易學習和使用，即使沒有深厚的 JavaScript 基礎也能快速上手。
功能強大： 支援各種動畫類型，包括基本的位移、旋轉、縮放，以及更複雜的路徑動畫、形狀變換等。
輕量高效： 程式碼體積小，效能優異，能確保網頁動畫的流暢性。
跨瀏覽器相容： 支援主流瀏覽器，包括 Chrome、Firefox、Safari、Edge 等。
彈性高： 可以與其他 JavaScript 函式庫或框架（如 React、Vue、Angular）無縫整合。

Anime.js 的核心概念

在開始實際操作之前，讓我們先了解 Anime.js 的幾個核心概念：

Targets (目標)： 指定要進行動畫的 HTML 元素。可以是 CSS 選擇器（例如 '.square'、'#my-element'），也可以是 DOM 元素本身。
Properties (屬性)： 要進行動畫的 CSS 屬性、DOM 屬性或 JavaScript 物件屬性。例如 translateX、rotate、opacity 等。
Values (值)： 屬性要變化的目標值。可以是單個數值，也可以是數值陣列，甚至是一個函數。
Duration (持續時間)： 動畫的播放時間，以毫秒為單位。
Easing (緩和函數)： 控制動畫的播放速度，讓動畫效果更自然、更生動。Anime.js 提供了豐富的內建緩和函數，例如 'easeInQuad'、'easeOutCubic'、'easeInOutElastic' 等。
Loop (循環)： 控制動畫的播放次數。可以設定為數字，表示播放指定的次數，也可以設定為 true，表示無限循環播放。
Direction (方向)： 控制動畫的播放方向。可以設定為 'normal' (預設值，從開始到結束)、'reverse' (從結束到開始) 或 'alternate' (來回交替播放)。

Anime.js 的安裝與引入

你可以透過多種方式安裝和引入 Anime.js：

使用 CDN：
這是最簡單的方式，只需在 HTML 檔案中加入以下程式碼即可：
```
<script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
```
注意： 請確認 CDN 網址是正確的，並且是最新的版本。你可以到 https://www.jsdelivr.com/package/npm/animejs 確認。
使用 npm (Node Package Manager)：

如果你使用 Node.js 開發，可以使用 npm 安裝 Anime.js：
```
npm install animejs
```
然後，在 JavaScript 檔案中引入 Anime.js：
```
import anime from 'animejs';
```
使用 ES Modules:
如參考資料所示，Anime.js V4 使用 ES modules 的引入方式:
```
import {
  animate,
  stagger,
} from 'animejs';
```

Anime.js 的基本用法

現在，讓我們透過一個簡單的範例來了解 Anime.js 的基本用法：

<!DOCTYPE html>
<html>
<head>
  <title>Anime.js 範例</title>
  <style>
    .square {
      width: 100px;
      height: 100px;
      background-color: red;
      position: relative;
    }
  </style>
</head>
<body>
  <div class="square"></div>

  <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
  <script>
    anime({
      targets: '.square',
      translateX: 250,
      rotate: '1turn',
      backgroundColor: '#FFF',
      duration: 800,
      loop: true
    });
  </script>
</body>
</html>

這個範例會讓一個紅色的正方形移動到右邊，同時旋轉一圈，背景顏色變成白色，並且無限循環播放。

程式碼說明：

targets: '.square'：指定目標為 class 名稱是 square 的 HTML 元素。
translateX: 250：將目標元素沿 X 軸移動 250 像素。
rotate: '1turn'：將目標元素旋轉一圈。
backgroundColor: '#FFF'：將目標元素的背景顏色變為白色。
duration: 800：動畫的播放時間為 800 毫秒。
loop: true：無限循環播放動畫。

Anime.js 的進階技巧

除了基本用法之外，Anime.js 還提供了許多進階技巧，讓你能創造出更複雜、更精美的動畫效果：

Stagger (交錯動畫)：
stagger() 函數可以讓多個目標元素以交錯的方式播放動畫，創造出層次感和節奏感。
```
anime({
  targets: '.square',
  translateX: 250,
  delay: anime.stagger(100) //每個正方形延遲100毫秒開始動畫
});
```

Timeline (時間軸)：

anime.timeline() 函數可以讓你將多個動畫串聯起來，按照指定的時間順序播放。

const timeline = anime.timeline({
  loop: true
});

timeline.add({
  targets: '.square',
  translateX: 250,
  duration: 1000
}).add({
  targets: '.square',
  rotate: '1turn',
  duration: 500
}).add({
  targets: '.square',
  translateX: 0,
  duration: 1000
});

Path Animation (路徑動畫)：

Anime.js 可以讓元素沿著指定的 SVG 路徑移動，創造出流暢而自然的動畫效果。

<svg width="500" height="500">
  <path id="myPath" d="M50,250 C150,100 350,400 450,250" fill="none" stroke="black"/>
  <circle id="myCircle" cx="50" cy="250" r="20" fill="red"/>
</svg>

<script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
<script>
  const path = anime.path('#myPath');

  anime({
    targets: '#myCircle',
    translateX: path('x'),
    translateY: path('y'),
    rotate: path('angle'),
    easing: 'linear',
    duration: 2000,
    loop: true
  });
</script>

使用 createSpring 建立更自然的彈簧動畫:
舊版的 easing: 'spring(.7, 80, 10, .5)' 在新版中被移除，改用 createSpring 來建立彈簧效果，參數的意義也略有不同。例如:
```
import { animate, createSpring } from 'animejs';

animate('.square', {
 rotate: {
    to: 360,
    ease: createSpring({ mass: .7, damping: 80, stiffness: 10, velocity: .5}),
 },
});
```

個人實作心得與錯誤排除指南

在使用 Anime.js 的過程中，我遇到了一些常見的問題，並總結了一些實作心得，希望能幫助你更順利地學習和使用 Anime.js：

目標元素選擇器錯誤： 請務必確認目標元素選擇器（例如 CSS 選擇器）是否正確，否則動畫可能無法生效。可以使用瀏覽器的開發者工具來檢查元素是否存在，以及選擇器是否匹配。
屬性名稱拼寫錯誤： 請確認屬性名稱（例如 translateX、rotate）的拼寫是否正確。Anime.js 對於屬性名稱的大小寫和拼寫非常敏感。
單位錯誤： 有些 CSS 屬性需要指定單位（例如 px、deg、em），請確保單位正確。
動畫衝突： 如果多個動畫同時作用於同一個元素，可能會發生動畫衝突，導致動畫效果不正常。可以嘗試使用 anime.timeline() 函數來控制動畫的播放順序，或者使用 complete 回呼函數來確保動畫按順序執行。
效能問題： 複雜的動畫可能會導致效能問題，影響網頁的流暢性。可以嘗試優化動畫效果，減少動畫元素的數量，或者使用瀏覽器的硬體加速功能。
使用 alternate: true 時，初始狀態很重要: 如果你的動畫設定了 alternate: true，也就是來回播放，請務必確保元素一開始的狀態是你想要的初始狀態。舉例來說，如果一開始 .square 的 translateX 就是 250px，那第一次的動畫播放就會是從 250px 移動到 250px，也就是沒有動畫效果。

總結

Anime.js 是一款功能強大、簡單易用的 JavaScript 動畫函式庫，它可以幫助你輕鬆地打造出各種令人驚豔的網頁動畫效果。無論你是網頁設計師、前端工程師，還是對網頁動畫感興趣的初學者，Anime.js 都是一個值得學習和使用的工具。

希望這篇文章能幫助你快速入門 Anime.js，並在你的網頁專案中創造出更多精彩的動畫效果！現在就開始動手嘗試吧！

參考閱讀

https://github.com/juliangarnier/anime

發佈留言取消回覆

Related Stories

[無偏見報導]凱蒂佩芮領軍！史上首次全女性太空旅行團完成10分鐘星際之旅

[無偏見報導]祖克柏內外交迫？Meta壟斷案開庭，又遭指控配合中國威脅美國安全

[無偏見報導]資安成國安重中之重！賴清德總統出席資安大會，吳釗燮共諜案後首度公開露面

You may have missed

[無偏見報導]凱蒂佩芮領軍！史上首次全女性太空旅行團完成10分鐘星際之旅

[無偏見報導]祖克柏內外交迫？Meta壟斷案開庭，又遭指控配合中國威脅美國安全

[無偏見報導]資安成國安重中之重！賴清德總統出席資安大會，吳釗燮共諜案後首度公開露面

[無偏見報導]共諜疑雲籠罩台灣：從憲兵投降片到國安會助理涉案，修法呼聲再起

Anime.js 動畫入門：用 JavaScript 輕鬆打造網頁動畫效果 (2024 最新版)

為什麼選擇 Anime.js？

Anime.js 的核心概念

Anime.js 的安裝與引入

Anime.js 的基本用法

Anime.js 的進階技巧

個人實作心得與錯誤排除指南

總結

參考閱讀

相關

發佈留言 取消回覆

Related Stories

[無偏見報導]凱蒂佩芮領軍！史上首次全女性太空旅行團完成10分鐘星際之旅

[無偏見報導]祖克柏內外交迫？Meta壟斷案開庭，又遭指控配合中國威脅美國安全

[無偏見報導]資安成國安重中之重！賴清德總統出席資安大會，吳釗燮共諜案後首度公開露面

You may have missed

[無偏見報導]凱蒂佩芮領軍！史上首次全女性太空旅行團完成10分鐘星際之旅

[無偏見報導]祖克柏內外交迫？Meta壟斷案開庭，又遭指控配合中國威脅美國安全

[無偏見報導]資安成國安重中之重！賴清德總統出席資安大會，吳釗燮共諜案後首度公開露面

[無偏見報導]共諜疑雲籠罩台灣：從憲兵投降片到國安會助理涉案，修法呼聲再起

發佈留言取消回覆