animejs

Anime.js v4 スキル

Anime.js は、シンプルながら強力な API を備えた軽量な JavaScript アニメーションライブラリです。CSS プロパティ、SVG、DOM 属性、JavaScript オブジェクトに対応しています。

インストール

NPM

npm install animejs

ES Modules のインポート

import { animate } from 'animejs';

CDN（ES Modules）

import { animate } from 'https://esm.sh/animejs';

CDN（UMD）

<script src="https://cdn.jsdelivr.net/npm/animejs/dist/bundles/anime.umd.min.js"></script>
<script>
  const { animate } = anime;
</script>

コアコンセプト

Anime.js v4 はモジュール式で、ツリーシェイキングに対応しています。必要なものだけをインポートします。

// Full import
import { animate, createTimeline, stagger, createDraggable } from 'animejs';

// Standalone modules for smaller bundles
import { animate } from 'animejs/animation';
import { createTimeline } from 'animejs/timeline';
import { createTimer } from 'animejs/timer';

ドキュメントのサイトマップ

anime.js v4 のドキュメント全体の構成は次のとおりです。

はじめに

• インストール（NPM、CDN、直接ダウンロード）
• モジュールのインポート（ES Modules、CommonJS、UMD）
• Vanilla JS での使用
• React での使用

タイマー（createTimer）

• 再生設定：delay、duration、loop、loopDelay、alternate、reversed、autoplay、frameRate、playbackRate
• コールバック：onBegin、onComplete、onUpdate、onLoop、onPause、then()
• メソッド：play()、reverse()、pause()、restart()、alternate()、resume()、complete()、reset()、cancel()、revert()、seek()、stretch()
• プロパティ：currentTime、progress、paused、completed など

アニメーション（animate）

• ターゲット：CSS セレクター、DOM 要素、JavaScript オブジェクト、ターゲットの配列
• アニメーション可能なプロパティ：CSS プロパティ、CSS トランスフォーム、CSS 変数、JS オブジェクトのプロパティ、HTML 属性、SVG 属性
• トゥイーン値の型：数値、単位変換、相対値（+=、-=、*=）、色、色関数、CSS 変数、関数ベース
• トゥイーンのパラメーター：to、from、delay、duration、ease、composition、modifier
• キーフレーム：トゥイーン値、トゥイーンのパラメーター、duration ベース、パーセンテージベース
• 再生設定：delay、duration、loop、loopDelay、alternate、reversed、autoplay、frameRate、playbackRate、playbackEase、persist
• コールバック：onBegin、onComplete、onBeforeUpdate、onUpdate、onRender、onLoop、onPause、then()
• メソッド：play()、reverse()、pause()、restart()、alternate()、resume()、complete()、cancel()、revert()、reset()、seek()、stretch()、refresh()

タイムライン（createTimeline）

• タイマーの追加、アニメーションの追加、WAAPI アニメーションの同期、タイムラインの同期、関数の呼び出し
• 時間位置：絶対値（ms）、相対値（<、>、+=、-=）、ラベル
• 再生設定：defaults、delay、loop、loopDelay、alternate、reversed、autoplay、frameRate、playbackRate、playbackEase
• コールバック：onBegin、onComplete、onBeforeUpdate、onUpdate、onRender、onLoop、onPause、then()
• メソッド：add()、set()、sync()、label()、remove()、call()、init()、play()、reset()、reverse()、pause()、restart()、alternate()、resume()、complete()、cancel()、revert()、seek()、stretch()、refresh()

アニメータブル（createAnimatable）

• 設定：unit、duration、ease、modifier
• メソッド：ゲッター、セッター、revert()

ドラッグ可能（createDraggable）

• 軸のパラメーター：x、y、snap、modifier、mapTo
• 設定：trigger、container、containerPadding、containerFriction、releaseContainerFriction、releaseMass、releaseStiffness、releaseDamping、velocityMultiplier、minVelocity、maxVelocity、releaseEase、dragSpeed、dragThreshold、scrollThreshold、scrollSpeed、cursor
• コールバック：onGrab、onDrag、onUpdate、onRelease、onSnap、onSettle、onResize、onAfterResize
• メソッド：disable()、enable()、setX()、setY()、animateInView()、scrollInView()、stop()、reset()、revert()、refresh()

レイアウト（createLayout）- 新規

• 使用方法：ルートの指定、CSS display アニメーション、スタガードレイアウト、DOM 順序のアニメーション、要素の入退出レイアウトアニメーション、親要素の入れ替えアニメーション、モーダルダイアログのアニメーション
• 設定：children、delay、duration、ease、properties
• 状態：enterFrom、leaveTo、swapAt
• メソッド：record()、animate()、update()、revert()
• Layout ID 属性、コールバック、プロパティ、よくある注意点

スコープ（createScope）

• コンストラクター関数の追加、メソッド関数の登録
• パラメーター：root、defaults、mediaQueries
• メソッド：add()、addOnce()、keepTime()、revert()、refresh()

イベント／スクロール（onScroll）

• 設定：コンテナー、ターゲット、デバッグ、軸、繰り返し
• しきい値：数値、位置の省略形、相対位置の値、最小値と最大値
• 同期モード：メソッド名、再生の進行状況、スムーズスクロール、イージング付きスクロール
• コールバック：onEnter、onEnterForward、onEnterBackward、onLeave、onLeaveForward、onLeaveBackward、onUpdate、onSyncComplete、onResize
• メソッド：link()、refresh()、revert()

SVG ユーティリティ

• morphTo() - SVG シェイプのモーフィング
• createDrawable() - SVG ライン描画アニメーション
• createMotionPath() - モーションパスアニメーション

テキストユーティリティ（splitText）

• 設定：行、単語、文字、デバッグ、スペースを含める、アクセシビリティ
• 分割パラメーター：class、wrap、clone
• HTML テンプレートのサポート
• メソッド：addEffect()、revert()、refresh()

ユーティリティ

• stagger() - グリッドに対応した時間／値／タイムラインのスタガー
• $() - クエリーセレクターユーティリティ
• get() / set() - CSS プロパティ値の取得／設定
• cleanInlineStyles() - インラインスタイルの削除
• remove() - ターゲットからアニメーションを削除
• sync() - アニメーションを同期
• keepTime() - タイムキーパーユーティリティ
• random() / createSeededRandom() / randomPick() / shuffle() - ランダムユーティリティ
• round() / clamp() / snap() / wrap() - 数学ユーティリティ
• mapRange() / lerp() / damp() - 補間ユーティリティ
• roundPad() / padStart() / padEnd() - 文字列のパディング
• degToRad() / radToDeg() - 角度変換
• チェーン可能なユーティリティ

イージング

• 組み込み：linear、easeIn、easeOut、easeInOut（Quad、Cubic、Quart、Quint、Sine、Expo、Circ、Back、Elastic、Bounce の各バリアント）
• カスタム：キュービックベジェ、リニア（複数ポイント）、Steps、Irregular
• スプリング：createSpring({ stiffness, damping, mass, velocity })

WAAPI（Web Animation API）

• WAAPI と JS アニメーションの使い分け
• ハードウェアアクセラレーションによるアニメーション
• ネイティブ WAAPI の改善
• API の違い（iterations、direction、easing、finished）
• waapi.convertEase()

エンジン設定

• パラメーター：timeUnit（ms/s）、speed、fps、precision、pauseOnDocumentHidden
• メソッド：update()、pause()、resume()
• エンジンのデフォルト設定

クイックリファレンス

基本的なアニメーション

import { animate } from 'animejs';

animate('.element', {
  translateX: 250,
  rotate: '1turn',
  duration: 800,
  ease: 'outExpo'
});

タイムライン

import { createTimeline } from 'animejs';

const tl = createTimeline({ defaults: { duration: 500 } });
tl.add('.box1', { x: 100 })
  .add('.box2', { x: 100 }, '<')  // Start with previous
  .add('.box3', { x: 100 }, '-=200');  // 200ms before end

スタガー

import { animate, stagger } from 'animejs';

animate('.item', {
  translateY: [-20, 0],
  opacity: [0, 1],
  delay: stagger(100, { from: 'center' }),
  duration: 600
});

スクロールアニメーション

import { animate, onScroll } from 'animejs';

animate('.element', {
  translateX: [0, 500],
  autoplay: onScroll({
    target: '.element',
    sync: true
  })
});

SVG ライン描画

import { animate, createDrawable } from 'animejs';

animate(createDrawable('path'), {
  draw: ['0 0', '0 1'],
  duration: 2000,
  ease: 'inOutQuad'
});

ドラッグ可能

import { createDraggable, createSpring } from 'animejs';

createDraggable('.draggable', {
  container: '.container',
  releaseEase: createSpring({ stiffness: 200, damping: 20 })
});

関数ベースの値

animate('.element', {
  translateX: (el, i, total) => i * 50,
  rotate: (el, i) => anime.random(-180, 180),
  delay: (el, i) => i * 100
});

キーフレーム

animate('.element', {
  translateX: [
    { to: 100, duration: 500 },
    { to: 0, duration: 500, delay: 200 }
  ],
  rotate: ['0turn', '1turn', '0turn']
});

React との統合

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

function AnimatedComponent() {
  const root = useRef(null);
  const scope = useRef(null);

  useEffect(() => {
    scope.current = createScope({ root: root.current }).add(() => {
      animate('.box', { rotate: 360 });
    });
    return () => scope.current.revert();
  }, []);

  return (
    <div ref={root}>
      <div className="box" />
    </div>
  );
}

バンドルサイズ（圧縮＋gzip）

モジュール	サイズ
フルバンドル	約24.5 KB
Timer	約5.6 KB
Animation	+5.2 KB
Timeline	+0.55 KB
Animatable	+0.4 KB
Draggable	+6.4 KB
Scroll	+4.3 KB
Scope	+0.22 KB
SVG	約0.35 KB
Stagger	+0.48 KB
Spring	約0.52 KB
WAAPI	約3.5 KB

その他のリソース

• 公式ドキュメント：https://animejs.com/documentation
• イージングエディター：https://animejs.com/easing-editor
• CodePen の例：https://codepen.io/collection/Poerqa
• GitHub：https://github.com/juliangarnier/anime

詳細な API パラメーター、コード例、高度なパターンについては、以下のリファレンスファイルを参照してください：

• references/api-reference.md - API ドキュメント全体
• references/examples.md - 一般的なアニメーションパターンとレシピ