lottie-bodymovin

Lottie アニメーションの原則

ベクターアニメーションに Lottie（Bodymovin）を使用して、ディズニーのアニメーション12原則をすべて実装します。

1. スクワッシュとストレッチ

書き出す前に After Effects で、次の操作を行います。

• X と Y のスケールを逆方向にアニメーションさせます
• 次のエクスプレッションを使用します。s = transform.scale[1]; [100 + (100-s), s]

// Control at runtime
lottie.setSpeed(1.5); // affect squash timing

2. 予備動作

AE のコンポジションを次のように構成します。

1. フレーム 0-10：予備動作のポーズ
2. フレーム 10-40：メインアクション
3. フレーム 40-50：動きの収束

// Play anticipation segment
anim.playSegments([0, 10], true);
setTimeout(() => anim.playSegments([10, 50], true), 200);

3. 演出

// Layer multiple Lotties
<div className="scene">
  <Lottie animationData={background} style={{ opacity: 0.6 }} />
  <Lottie animationData={hero} style={{ zIndex: 10 }} />
</div>

4. ストレートアヘッド／ポーズ・トゥ・ポーズ

AE でポーズ・トゥ・ポーズを行うには、次の手順に従います。

• 主要なポーズにキーフレームを設定します
• AE でキーフレーム間を補間します
• Easy Ease を使用して動きを滑らかにします

// Jump to specific poses
anim.goToAndStop(25, true); // frame 25

5. フォロースルーとオーバーラッピングアクション

After Effects で、次の操作を行います。

• 子レイヤーのキーフレームを 2～4 フレームずらします
• 親子関係と遅延エクスプレッションを使用します
• thisComp.layer("Parent").transform.position.valueAtTime(time - 0.05)

6. スローインとスローアウト

AE のキーフレーム設定：

• キーフレームを選択し、Easy Ease（F9）を適用します
• グラフエディターでカーブを調整します
• ベジェハンドルで加速度を制御します

// Adjust playback speed dynamically
anim.setSpeed(0.5); // slower
anim.setSpeed(2); // faster

7. アーク

After Effects で、次の操作を行います。

• モーションパス（位置プロパティ）を使用します
• キーフレームをベジェに変換します
• ハンドルを引いてアークを作成します
• または、「Auto-Orient to Path」を使用します

8. 二次アクション

// Trigger secondary animation
mainAnim.addEventListener('complete', () => {
  secondaryAnim.play();
});

// Or sync with frame
mainAnim.addEventListener('enterFrame', (e) => {
  if (e.currentTime > 15) particleAnim.play();
});

9. タイミング

anim.setSpeed(0.5);  // half speed - dramatic
anim.setSpeed(1);    // normal
anim.setSpeed(2);    // double speed - snappy

// Or control frame rate in AE export
// 24fps = cinematic, 30fps = smooth, 60fps = fluid

10. 誇張

After Effects で、次の操作を行います。

• スケールを 100％を超えて拡大します（120～150％）
• 回転をオーバーシュートさせます
• Overshoot エクスプレッションを使用します
• amp = 15; freq = 3; decay = 5; n = 0; time_start = key(1).time; if (time > time_start) { n = (time - time_start) / thisComp.frameDuration; amp * Math.sin(freq*n) / Math.exp(decay*n/100); } else { 0; }

11. 立体感のある描画

After Effects で、次の操作を行います。

• 3D レイヤーを使用します
• パースペクティブカメラを適用します
• Z 位置と回転をアニメーションさせます
• 被写界深度を使用します

12. 魅力

AE でのデザイン原則：

• 鋭角より滑らかな曲線を使います
• 一貫したタイミングパターンにします
• 見栄えのよいカラーパレットを選びます
• すっきりとしたベクター図形にします

// React Lottie with hover
<Lottie
  animationData={data}
  onMouseEnter={() => anim.setDirection(1)}
  onMouseLeave={() => anim.setDirection(-1)}
/>

Lottie の実装

import Lottie from 'lottie-react';
import animationData from './animation.json';

<Lottie
  animationData={animationData}
  loop={true}
  autoplay={true}
  style={{ width: 200, height: 200 }}
/>

Lottie の主な機能

• playSegments([start, end]) - フレーム範囲を再生します
• setSpeed(n) - タイミングを制御します
• setDirection(1/-1) - 順再生／逆再生を設定します
• goToAndStop(frame) - ポーズを制御します
• addEventListener - フレームイベントを設定します
• lottie-interactivity を使ってインタラクティブ機能を追加します