animejs-animation

Anime.js アニメーションスキル

Anime.js は、軽量でありながら非常に強力な JavaScript アニメーションエンジンです。複雑なタイムライン、スタッガー、DOM、CSS、SVG の精密な制御を得意とします。

コンテキスト

このスキルは、単純な CSS トランジションをはるかに超える、高品質で目を見張るようなウェブアニメーションを作成するために使用します。受賞クラスのインタラクティブなサイトに最適なツールです。

使用する場面

次の場合にこのスキルを使用します。

• 複雑な複数段階のランディングページの演出を作成する。
• グリッド、テキスト、データビジュアライゼーションを表示するスタッガーアニメーションを実装する。
• SVG パスをアニメーション化する（形状のモーフィング、動的な線の描画）。
• ユーザー入力に滑らかに反応する、インタラクティブで動きのある UI 要素を構築する。

実行ワークフロー

1. 対象の特定：アニメーション化する DOM 要素または SVG を選択します。

2. プロパティとイージングの定義：アニメーション化する値を指定します。動きを高級感のある自然な印象にするため、基本的な linear や ease-in-out ではなく、高度なイージング関数（カスタム cubicBezier、spring、elastic など）を活用することが重要です。

3. タイムラインの構成：まず、インストールされているメジャーバージョンを確認します。この例は Anime.js v3 を対象としているため、anime.timeline() を使って複雑な演出を順序付けます。タイムラインのオフセット（相対指定の '-=200' と絶対指定）を使いこなし、動きがシームレスに重なるようにします。

4. 実装： Anime.js v3 がインストールされたバンドラーでは、import anime from "animejs"; によって anime バインディングを利用できます。セレクターの対象は、レンダリング済みの DOM に存在している必要があります。

   const tl = anime.timeline({
     easing: "spring(1, 80, 10, 0)",
     duration: 1000,
   });
   tl.add({
     targets: ".hero-text",
     translateY: [50, 0],
     opacity: [0, 1],
     delay: anime.stagger(100),
   }).add(
     { targets: ".hero-image", scale: [0.9, 1], opacity: [0, 1] },
     "-=800",
   );
   

モーションと互換性

• 適用範囲：製品の要件とユーザーのタスクに役立つ場合にモーションを使用します。既存のデザインシステムを尊重してください。シンプルなトランジションや静的な状態も適切な選択肢です。
• スタッガー：anime.stagger() を積極的に活用して、複数の要素に自然なリズムを加えます。
• パフォーマンス：メインスレッドの使用状況を監視し、GPU アクセラレーションが適切な場合は will-change: transform, opacity を使用します。

例

ユーザーの依頼：

複雑な複数段階のランディングページの演出を作成してください。

制限事項

• 上記のコードでは v3 API を使用しています。Anime.js v4 では createTimeline() をインポートし、ターゲットとパラメーターのシグネチャも異なるため、異なるメジャーバージョンの例を混在させないでください。インストールされているバージョンに対応する公式タイムラインドキュメントを参照してください。
• prefers-reduced-motion を尊重してください。静的な最終状態を用意し、スクロールの乗っ取りを避け、フォーカスやキーボード操作をすぐに利用できる状態に保ちます。コンポーネントのアンマウント時にはアニメーションを破棄してください。
• will-change は一時的な最適化のヒントであり、GPU アクセラレーションを保証するものではありません。実際のフレームを計測し、すべての要素に設定したままにしないでください。
• このスキルは、タスクが上記の適用範囲に明確に当てはまる場合にのみ使用してください。
• 出力を、環境固有の検証、テスト、または専門家によるレビューの代わりとして扱わないでください。
• 必要な入力、権限、安全上の境界、または成功基準が不足している場合は、作業を中断して確認を求めてください。