Anime.js アニメーションガイドライン

Anime.js、JavaScript、Web アニメーションパフォーマンスの専門家です。アニメーション作成時は以下のガイドラインに従ってください。

コア原則

インストールとインポート

npm install animejs

// フル インポート
import anime from "animejs";

// バンドルサイズを削減するためのモジュールインポート
import { animate, timeline, stagger } from "animejs";

基本的なアニメーション

anime({
  targets: ".element",
  translateX: 250,
  rotate: "1turn",
  duration: 800,
  easing: "easeInOutQuad"
});

パフォーマンス最適化

フレームレート制御

// 低性能デバイス向けにグローバルフレームレートを調整
anime.suspendWhenDocumentHidden = true;

// 特定のアニメーションのFPSを制御
anime({
  targets: ".element",
  translateX: 250,
  update: function(anim) {
    // 必要に応じてカスタムフレームレート制限
  }
});

レイアウトプロパティではなくトランスフォームを使用

// 良い例 - GPU加速トランスフォームを使用
anime({
  targets: ".element",
  translateX: 100,  // 良い
  translateY: 50,   // 良い
  scale: 1.2,       // 良い
  rotate: 45,       // 良い
  opacity: 0.5      // 良い
});

// 避けるべき - レイアウト再計算の原因
anime({
  targets: ".element",
  left: 100,        // 避ける
  top: 50,          // 避ける
  width: 200,       // 避ける
  height: 150       // 避ける
});

高頻度更新にはAnimatableを使用

import { Animatable } from "animejs";

// 継続的な更新に最適化（マウストラッキングなど）
const animatable = new Animatable(".cursor", {
  x: 0,
  y: 0
});

document.addEventListener("mousemove", (e) => {
  animatable.x = e.clientX;
  animatable.y = e.clientY;
});

タイムラインアニメーション

基本的なタイムライン

const tl = anime.timeline({
  easing: "easeOutExpo",
  duration: 750
});

tl.add({
  targets: ".header",
  translateY: [-50, 0],
  opacity: [0, 1]
})
.add({
  targets: ".content",
  translateY: [30, 0],
  opacity: [0, 1]
}, "-=500") // 500msのオーバーラップ
.add({
  targets: ".footer",
  translateY: [30, 0],
  opacity: [0, 1]
}, "-=500");

タイムラインコントロール

const tl = anime.timeline({
  autoplay: false
});

// コントロールメソッド
tl.play();
tl.pause();
tl.restart();
tl.reverse();
tl.seek(1000); // 1秒の位置へ移動

スタッガーアニメーション

基本的なスタッガー

anime({
  targets: ".grid-item",
  translateY: [50, 0],
  opacity: [0, 1],
  delay: anime.stagger(100) // 各要素間に100msの遅延
});

高度なスタッガーオプション

// 中央からスタッガー
anime({
  targets: ".grid-item",
  scale: [0, 1],
  delay: anime.stagger(100, { from: "center" })
});

// グリッドスタッガー
anime({
  targets: ".grid-item",
  scale: [0, 1],
  delay: anime.stagger(50, {
    grid: [14, 5],
    from: "center"
  })
});

// イージング付きスタッガー
anime({
  targets: ".item",
  translateX: 250,
  delay: anime.stagger(100, { easing: "easeOutQuad" })
});

イージング関数

ビルトインイージング

// 一般的なイージング
anime({
  targets: ".element",
  translateX: 250,
  easing: "easeOutExpo"     // 高速開始、低速終了
  // easing: "easeInOutQuad" // 両端がスムーズ
  // easing: "easeOutElastic(1, .5)" // バウンシー
  // easing: "easeOutBounce" // バウンス効果
  // easing: "spring(1, 80, 10, 0)" // 物理ベース
});

カスタムイージング

anime({
  targets: ".element",
  translateX: 250,
  easing: "cubicBezier(0.25, 0.1, 0.25, 1)"
});

SVGアニメーション

パスアニメーション

const path = anime.path(".motion-path");

anime({
  targets: ".element",
  translateX: path("x"),
  translateY: path("y"),
  rotate: path("angle"),
  easing: "linear",
  duration: 2000,
  loop: true
});

ラインドローイング

anime({
  targets: "path",
  strokeDashoffset: [anime.setDashoffset, 0],
  easing: "easeInOutSine",
  duration: 1500,
  delay: anime.stagger(250)
});

モーフィング

anime({
  targets: "path",
  d: [
    { value: "M10 10 L90 10 L90 90 L10 90 Z" },
    { value: "M10 50 Q50 10 90 50 Q50 90 10 50 Z" }
  ],
  easing: "easeInOutQuad",
  duration: 1000,
  loop: true,
  direction: "alternate"
});

関数ベースの値

動的な値

anime({
  targets: ".element",
  translateX: function(el, i) {
    return i * 100; // 各要素がさらに移動
  },
  rotate: function(el, i, total) {
    return (360 / total) * i; // 回転を分散
  },
  delay: function(el, i) {
    return i * 50;
  }
});

コールバックとイベント

アニメーションイベント

anime({
  targets: ".element",
  translateX: 250,
  begin: function(anim) {
    console.log("アニメーション開始");
  },
  update: function(anim) {
    console.log(Math.round(anim.progress) + "%");
  },
  complete: function(anim) {
    console.log("アニメーション完了");
  }
});

ループ

anime({
  targets: ".element",
  translateX: 250,
  direction: "alternate",
  loop: true,
  loopComplete: function(anim) {
    console.log("ループ完了");
  }
});

React インテグレーション

基本的な React 使用方法

import { useEffect, useRef } from "react";
import anime from "animejs";

function AnimatedComponent() {
  const elementRef = useRef(null);

  useEffect(() => {
    const animation = anime({
      targets: elementRef.current,
      translateX: 250,
      duration: 800
    });

    return () => {
      animation.pause(); // クリーンアップ
    };
  }, []);

  return <div ref={elementRef}>Animated</div>;
}

useCallback でのコントロール

function ControlledAnimation() {
  const elementRef = useRef(null);
  const animationRef = useRef(null);

  const playAnimation = useCallback(() => {
    animationRef.current = anime({
      targets: elementRef.current,
      translateX: [0, 250],
      duration: 800
    });
  }, []);

  useEffect(() => {
    return () => {
      animationRef.current?.pause();
    };
  }, []);

  return (
    <>
      <div ref={elementRef}>Animated</div>
      <button onClick={playAnimation}>Play</button>
    </>
  );
}

Web Animations API ブリッジ

ネイティブパフォーマンスのためのWAAPI使用

import { wapiAnimate } from "animejs";

// ブラウザのネイティブWeb Animations APIを使用
wapiAnimate(".element", {
  translateX: 250,
  duration: 800
});

アクセシビリティ

モーション削減への対応

const prefersReducedMotion = window.matchMedia(
  "(prefers-reduced-motion: reduce)"
).matches;

anime({
  targets: ".element",
  translateX: 250,
  duration: prefersReducedMotion ? 0 : 800,
  easing: prefersReducedMotion ? "linear" : "easeOutExpo"
});

ベストプラクティスまとめ

1. レイアウトプロパティではなくトランスフォーム（translate、scale、rotate）を使用
2. バンドルサイズを削減するため必要なモジュールのみをインポート
3. 複数要素のアニメーションにはスタッガーを使用
4. コンポーネントのアンマウント時にアニメーションをクリーンアップ
5. 高頻度更新にはAnimatableを使用
6. 複雑なシーケンスにはタイムラインを活用
7. 動的アニメーションには関数ベースの値を使用
8. モーション削減設定への対応
9. ネイティブパフォーマンス向けWAPIブリッジの検討
10. 低性能デバイスでテスト