Anime.js：把網站做得像有活物

00

它到底是什麼？

一句話：用 JavaScript 控制 DOM / SVG / CSS 動畫的輕量引擎。不是 React 元件庫，也不是遊戲引擎，更不是「把官網 demo 嵌進你網站」的貼紙包。

你嵌入的是庫
CDN 或 npm 把 Anime.js 帶進頁面。

元素是你自己的
HTML、SVG、卡片、按鈕、龍蝦，都由你定義。

動畫也是你自己的
你設計節奏、緩動、入場、互動，它負責補中間幀。

01

最快實現：HTML CDN

單頁 HTML / hosthtml 頁面不用先工程化。直接用 type="module" 從 CDN import，就能跑。

index.html 裡直接貼

<script type="module">
  import {
    animate,
    stagger,
    createTimeline,
    onScroll,
    createDraggable,
    spring
  } from 'https://esm.sh/animejs';

  const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  if (!reduceMotion) {
    const tl = createTimeline({
      defaults: { ease: 'out(4)', duration: 700 }
    });

    tl
      .add('.js-hero-title', {
        opacity: { from: 0 },
        y: { from: 32 }
      })
      .add('.js-hero-subtitle', {
        opacity: { from: 0 },
        y: { from: 20 }
      }, '-=450')
      .add('.js-hero-cta', {
        opacity: { from: 0 },
        scale: { from: 0.92 }
      }, '-=350');

    animate('.js-card', {
      opacity: { from: 0 },
      y: { from: 36 },
      delay: stagger(90),
      duration: 650,
      ease: 'out(4)',
      autoplay: onScroll({
        enter: 'bottom top+=100',
        repeat: false
      })
    });

    createDraggable('.js-draggable', {
      releaseEase: spring({ bounce: .45 })
    });
  }
</script>

02

你可以創建自己的動畫，不是只能嵌入它的。

官網 demo 只是示例。正確姿勢是：自己設計 HTML 結構、自己設計視覺風格、自己設計動畫節奏，Anime.js 在底下幹髒活。

最小心法

80% 的 Anime.js 就是這個模板：

核心模板

animate('選擇器', {
  要改的屬性: 目標值,
  duration: 時間,
  delay: 延遲,
  ease: 緩動
});

你的龍蝦也能動

自定義元素 + 自定義動畫

<div class="lobster">🦞</div>

<script type="module">
  import { animate } from 'https://esm.sh/animejs';

  animate('.lobster', {
    x: '12rem',
    rotate: '1turn',
    scale: 1.3,
    duration: 900,
    ease: 'out(4)'
  });
</script>

03

進一步：封裝成你自己的動畫系統

你可以把常用動畫抽成函式。底層仍然是 Anime.js，但上層變成你的審美語言：reveal、float、shake、enterTown。

自己的 motion API

import { animate } from 'animejs';

function reveal(selector) {
  animate(selector, {
    opacity: { from: 0, to: 1 },
    y: { from: 24, to: 0 },
    duration: 650,
    ease: 'out(4)'
  });
}

function float(selector) {
  animate(selector, {
    y: [
      { to: -8, duration: 1200, ease: 'inOut(2)' },
      { to: 0, duration: 1200, ease: 'inOut(2)' }
    ],
    loop: true
  });
}

reveal('.hero-title');
reveal('.project-card');
float('.cloud');

04

React / Next.js 裡怎麼用

不要在 render 裡亂動 DOM。放進 useEffect，用 createScope() 管理清理。不然動畫實例會像野生蟑螂，繁殖得很有生命力。

client component 範例

'use client';

import { useEffect, useRef } from 'react';
import { animate, createScope, stagger } from 'animejs';

export default function Hero() {
  const root = useRef(null);

  useEffect(() => {
    const scope = createScope({ root }).add(() => {
      animate('.title', {
        opacity: { from: 0 },
        y: { from: 32 },
        duration: 700,
        ease: 'out(4)'
      });

      animate('.card', {
        opacity: { from: 0 },
        y: { from: 24 },
        delay: stagger(90),
        duration: 600,
        ease: 'out(4)'
      });
    });

    return () => scope.revert();
  }, []);

  return (
    <section ref={root}>
      <h1 className="title">Anime.js on my site</h1>
      <div className="card">Card A</div>
      <div className="card">Card B</div>
      <div className="card">Card C</div>
    </section>
  );
}

05

先玩這 5 個地方

別一上來全站亂飛。那不是高級，是 QQ 空間復興。先把一頁做出「有活物」的感覺。

🎬首頁標題進場
標題、描述、CTA 依次出現，像一段開場鏡頭。

🃏卡片 scroll reveal
滾到內容區，一張張浮上來。作品集、功能列表都適合。

👆按鈕微互動
hover 輕微 scale，click 有壓下去的反饋。

〰️SVG 路徑動畫
logo 線條、地圖路線、流程圖，會很有敘事感。

🦞可拖拽彩蛋
龍蝦、像素小人、漂浮道具。這個最像「玩」。

🧪像素道具浮現
Knowledge Town / eSIMX portfolio / RPG 風格頁面都能用。

06

實作原則，短版

動畫不是越多越好。好動畫不是讓人看到「哇有動畫」，是讓人覺得「這個頁面怎麼這麼順」。

該動什麼

優先動畫 transform 和 opacity。
也就是 x / y / scale / rotate / opacity。
不要動 top / left / width / height，容易卡成 2007 年縣城婚禮 PPT。

節奏怎麼抓

hover：150–250ms。
卡片出現：500–700ms。
首屏 choreography：800–1200ms。
一頁只做一個「主動畫記憶點」。

可訪問性

一定處理 prefers-reduced-motion。
手機端少一點，桌面端可以騷一點。
動畫不能阻塞閱讀，不能拿性能獻祭審美。

什麼時候不用

普通 hover：CSS transition 就夠。
遊戲動畫：直接 Phaser / Pixi。
大型頁面轉場：可考慮 Framer Motion。

結論

你當然可以創建自己的動畫。Anime.js 只是底層工具。真正要做的是：自己設計 HTML、自己設計視覺、自己設計節奏。它不是給你貼貼紙的，它是給你一把刀。