Anime.js

Webアニメーションのためのパワフルなタイムラインとスタガー機能を備えた軽量JavaScriptアニメーションライブラリです。

概要

Anime.js（「Anime JS」と発音）は、DOM要素、CSSプロパティ、SVG属性、JavaScriptオブジェクトに対応する汎用アニメーションエンジンです。React固有のライブラリとは異なり、Anime.jsはバニラJavaScriptと任意のフレームワークで動作します。

このスキルを使用する場合：

• 精密なコレオグラフィーを伴うタイムラインベースのアニメーションシーケンス
• 複数の要素にわたるスタガーアニメーション
• SVGパスのモーフィングと描画アニメーション
• パーセンテージベースのタイミングを持つキーフレームアニメーション
• フレームワークに依存しないアニメーション（React、Vue、バニラJSで動作）
• 複雑なイージング関数（spring、steps、cubic-bezier）

コア機能：

• 相対的なポジショニングを伴うタイムラインシーケンシング
• パワフルなスタガーユーティリティ（グリッド、中心から、イージング）
• SVGモーフィングとパスアニメーション
• ビルトインのスプリングフィジックスイージング
• 柔軟なタイミングを持つキーフレームサポート
• 小さいバンドルサイズ（gzip圧縮で約9KB）

コアコンセプト

基本的なアニメーション

anime()関数はアニメーションを作成します：

import anime from 'animejs'

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

ターゲット

アニメーションターゲットを指定する複数の方法：

// CSSセレクタ
anime({ targets: '.box' })

// DOM要素
anime({ targets: document.querySelectorAll('.box') })

// 要素の配列
anime({ targets: [el1, el2, el3] })

// JavaScriptオブジェクト
const obj = { x: 0 }
anime({ targets: obj, x: 100 })

アニメーション可能なプロパティ

CSSプロパティ：

anime({
  targets: '.element',
  translateX: 250,
  scale: 2,
  opacity: 0.5,
  backgroundColor: '#FFF'
})

CSSトランスフォーム（個別）：

anime({
  targets: '.element',
  translateX: 250,   // 個別のトランスフォーム
  rotate: '1turn',   // 'transform: rotate()' ではない
  scale: 2
})

SVG属性：

anime({
  targets: 'path',
  d: 'M10 80 Q 77.5 10, 145 80', // パスモーフィング
  fill: '#FF0000',
  strokeDashoffset: [anime.setDashoffset, 0] // ライン描画
})

JavaScriptオブジェクト：

const obj = { value: 0 }
anime({
  targets: obj,
  value: 100,
  round: 1,
  update: () => console.log(obj.value)
})

タイムライン

精密な制御を備えた複雑なシーケンスを作成します：

const timeline = anime.timeline({
  duration: 750,
  easing: 'easeOutExpo'
})

timeline
  .add({
    targets: '.box1',
    translateX: 250
  })
  .add({
    targets: '.box2',
    translateX: 250
  }, '-=500') // 前のアニメーションが終了する500ms前に開始
  .add({
    targets: '.box3',
    translateX: 250
  }, '+=200') // 前のアニメーションが終了した200ms後に開始

一般的なパターン

1. スタガーアニメーション（順序付き表示）

anime({
  targets: '.stagger-element',
  translateY: [100, 0],
  opacity: [0, 1],
  delay: anime.stagger(100), // 遅延を100msずつ増加
  easing: 'easeOutQuad',
  duration: 600
})

2. 中心からのスタガー

anime({
  targets: '.grid-item',
  scale: [0, 1],
  delay: anime.stagger(50, {
    grid: [14, 5],
    from: 'center', // また 'first', 'last', index, [x, y]
    axis: 'x'       // また 'y', null
  }),
  easing: 'easeOutQuad'
})

3. SVGライン描画

anime({
  targets: 'path',
  strokeDashoffset: [anime.setDashoffset, 0],
  easing: 'easeInOutQuad',
  duration: 2000,
  delay: (el, i) => i * 250
})

4. SVGモーフィング

anime({
  targets: '#morphing-path',
  d: [
    { value: 'M10 80 Q 77.5 10, 145 80' }, // 開始図形
    { value: 'M10 80 Q 77.5 150, 145 80' }  // 終了図形
  ],
  duration: 2000,
  easing: 'easeInOutQuad',
  loop: true,
  direction: 'alternate'
})

5. タイムラインシーケンス

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

tl.add({
  targets: '.title',
  translateY: [-50, 0],
  opacity: [0, 1]
})
.add({
  targets: '.subtitle',
  translateY: [-30, 0],
  opacity: [0, 1]
}, '-=500')
.add({
  targets: '.button',
  scale: [0, 1],
  opacity: [0, 1]
}, '-=300')

6. キーフレームアニメーション

anime({
  targets: '.element',
  keyframes: [
    { translateX: 100 },
    { translateY: 100 },
    { translateX: 0 },
    { translateY: 0 }
  ],
  duration: 4000,
  easing: 'easeInOutQuad',
  loop: true
})

7. スクロールトリガーアニメーション

const animation = anime({
  targets: '.scroll-element',
  translateY: [100, 0],
  opacity: [0, 1],
  easing: 'easeOutQuad',
  autoplay: false
})

window.addEventListener('scroll', () => {
  const scrollPercent = window.scrollY / (document.body.scrollHeight - window.innerHeight)
  animation.seek(animation.duration * scrollPercent)
})

統合パターン

Reactを使用する場合

import { useEffect, useRef } from 'react'
import anime from 'animejs'

function AnimatedComponent() {
  const ref = useRef(null)

  useEffect(() => {
    const animation = anime({
      targets: ref.current,
      translateX: 250,
      duration: 800,
      easing: 'easeInOutQuad'
    })

    return () => animation.pause()
  }, [])

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

Vueを使用する場合

export default {
  mounted() {
    anime({
      targets: this.$el,
      translateX: 250,
      duration: 800
    })
  }
}

パスフォローアニメーション

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: '.element',
  translateX: 250,
  easing: 'spring(1, 80, 10, 0)', // mass, stiffness, damping, velocity
  duration: 2000
})

ステップスイージング

anime({
  targets: '.element',
  translateX: 250,
  easing: 'steps(5)',
  duration: 1000
})

カスタムベジェ

anime({
  targets: '.element',
  translateX: 250,
  easing: 'cubicBezier(.5, .05, .1, .3)',
  duration: 1000
})

方向とループ

anime({
  targets: '.element',
  translateX: 250,
  direction: 'alternate', // 'normal', 'reverse', 'alternate'
  loop: true,             // または反復回数
  easing: 'easeInOutQuad'
})

再生制御

const animation = anime({
  targets: '.element',
  translateX: 250,
  autoplay: false
})

animation.play()
animation.pause()
animation.restart()
animation.reverse()
animation.seek(500) // 500msにシーク

パフォーマンス最適化

トランスフォームと不透明度を使用する

// ✅ 良い：GPU加速
anime({
  targets: '.element',
  translateX: 250,
  opacity: 0.5
})

// ❌ 避ける：レイアウトをトリガー
anime({
  targets: '.element',
  left: '250px',
  width: '500px'
})

類似アニメーションをバッチ処理する

// ✅ 複数ターゲットに対して単一のアニメーション
anime({
  targets: '.multiple-elements',
  translateX: 250
})

// ❌ 避ける：複数の個別アニメーション
elements.forEach(el => {
  anime({ targets: el, translateX: 250 })
})

複雑なアニメーションにwill-changeを使用する

.animated-element {
  will-change: transform, opacity;
}

スクロールアニメーションのautoplayを無効化する

const animation = anime({
  targets: '.element',
  translateX: 250,
  autoplay: false // 手動で制御
})

一般的な落とし穴

1. ユニット型を忘れる

// ❌ 間違い：ユニットなし
anime({ targets: '.element', width: 200 })

// ✅ 正しい：ユニットを含める
anime({ targets: '.element', width: '200px' })

2. CSSトランスフォームプロパティを直接使用する

// ❌ 間違い：トランスフォーム文字列をアニメーションできない
anime({ targets: '.element', transform: 'translateX(250px)' })

// ✅ 正しい：個別のトランスフォームプロパティ
anime({ targets: '.element', translateX: 250 })

3. アニメーションのクリーンアップを処理しない

// ❌ 間違い：アンマウント後もアニメーション継続
useEffect(() => {
  anime({ targets: ref.current, translateX: 250 })
}, [])

// ✅ 正しい：クリーンアップ時に一時停止
useEffect(() => {
  const anim = anime({ targets: ref.current, translateX: 250 })
  return () => anim.pause()
}, [])

4. 多くの要素をアニメーション化する

// ❌ 避ける：1000以上の要素をアニメーション化
anime({ targets: '.many-items', translateX: 250 }) // 1000以上の要素

// ✅ より良い：大きなセットにはCSSアニメーションを使用
// または仮想化で要素数を削減

5. 不正なタイムラインタイミング

// ❌ 間違い：オフセット演算子がない
.add({ targets: '.el2' }, '500') // 絶対時間として解釈される

// ✅ 正しい：相対演算子を使用
.add({ targets: '.el2' }, '-=500') // 前のアニメーションから相対
.add({ targets: '.el3' }, '+=200') // 前のアニメーションから相対

6. ループの過度な使用

// ❌ 避ける：無限ループはバッテリーを消耗
anime({
  targets: '.element',
  rotate: '1turn',
  loop: true,
  duration: 1000
})

// ✅ より良い：無限ループにはCSSアニメーションを使用
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

リソース

スクリプト

• animation_generator.py - Anime.jsアニメーションボイラープレート生成（8種類）
• timeline_builder.py - 複雑なタイムラインシーケンスの構築

リファレンス

• api_reference.md - 完全なAnime.js APIドキュメント
• stagger_guide.md - スタガーユーティリティとパターン
• timeline_guide.md - タイムラインシーケンシングの深掘り

アセット

• starter_animejs/ - バニラJS + Viteテンプレート（例付き）
• examples/ - 実世界のパターン（SVGモーフィング、スタガーグリッド、タイムライン）

関連スキル

• gsap-scrolltrigger - より強力なタイムライン機能とスクロール統合
• motion-framer - React固有の宣言的アニメーション
• react-spring-physics - フィジックスベースのスプリングアニメーション
• lightweight-3d-effects - シンプルな3Dエフェクト（Zdog、Vanta.js）

Anime.js対GSAP：SVG多用アニメーション、シンプルなプロジェクト、またはバンドルサイズが問題になる場合はAnime.jsを使用します。複雑なスクロール駆動エクスペリエンス、高度なタイムライン、プロフェッショナルグレードの制御にはGSAPを使用します。

Anime.js対Framer Motion：フレームワーク非依存プロジェクト、またはReact外で作業する場合はAnime.jsを使用します。React固有の宣言的アニメーションとジェスチャー統合にはFramer Motionを使用します。