rive-animations

Rive アニメーションの原則

Rive のステートマシンとインタラクティブなアニメーションを使って、ディズニーのアニメーションの原則を 12 個すべて実装します。

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

Rive Editor で：

• ボーンを使ってシェイプを作成します
• X/Y のスケールを反比例させてアニメーション化します
• キー：scaleX: 1.2 のとき scaleY: 0.8

// Trigger from code
rive.play('squash_stretch');

2. アンティシペーション

ステートマシンの設定：

1. 「Idle」状態を作成します
2. 「Anticipate」状態（動作前の予備動作ポーズ）を作成します
3. 「Action」状態を作成します
4. 接続：Idle → Anticipate → Action

const inputs = rive.stateMachineInputs('State Machine');
const trigger = inputs.find(i => i.name === 'jump');
trigger.fire(); // Plays anticipate → action sequence

3. ステージング

Rive で：

• アートボードのレイヤーを使って奥行きを表現します
• 背景レイヤーにぼかしや不透明度を適用します
• 複雑なシーンにはネストされたアートボードを使います

// Control visibility
const bgOpacity = inputs.find(i => i.name === 'bgOpacity');
bgOpacity.value = 0.6;

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

Rive でポーズ・トゥ・ポーズを行うには：

• タイムライン上にキーとなるポーズを設定します
• Rive がポーズ間を補間します
• グラフエディターでイージングカーブを使います

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

Rive Editor で：

• 制約付きのボーン階層を使います
• 子ボーンに「delay」や「lag」を適用します
• または、キーフレームを 2～4 フレームずらします
• 自然なフォロースルーにはスプリング制約を使います

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

Rive Graph Editor で：

• キーフレームを選択します
• イージングを適用します：Cubic、Quad、Bounce
• ベジェハンドルを調整してカスタムカーブを作成します

// Runtime speed control
rive.play('animation', { speed: 0.5 });

7. アーク

Rive で：

• 自然なアークには IK（インバースキネマティクス）を使います
• パス制約を適用します
• 曲線補間で位置をアニメーション化します

8. セカンダリー・アクション

ステートマシンを使う方法：

// Listen for state changes
rive.on('statechange', (event) => {
  if (event.data.includes('button_press')) {
    // Secondary animations auto-trigger via state machine
  }
});

// Or blend multiple animations
rive.play(['main_action', 'secondary_particles']);

9. タイミング

// Fast - snappy feedback
rive.play('click', { speed: 1.5 });

// Normal
rive.play('hover');

// Slow - dramatic reveal
rive.play('reveal', { speed: 0.5 });

Rive Editor で：

• アニメーションの長さを調整します
• 作業範囲を使ってタイミングを微調整します
• グラフエディターで正確に制御します

10. 誇張

Rive で：

• ボーンの回転を自然な限界を超えて大きくします
• スケール変換を誇張します
• 弾性やバウンスの補間を使います
• グラフエディターのカーブでオーバーシュートさせます

11. 立体感のある描画

Rive で：

• ボリュームを維持するため、複数のボーンを使います
• 形状を保つための制約を適用します
• クリッピングを使って奥行きを表現します
• シェイプを重ねて 3D 効果を作ります

12. アピール

Rive でデザインするには：

• シェイプに滑らかなベジェ曲線を使います
• ストロークの太さを統一します
• 魅力的なカラーパレットを使います
• すっきりとしたボーン構造にします

// Smooth hover interactions
const hover = inputs.find(i => i.name === 'isHovering');
element.addEventListener('mouseenter', () => hover.value = true);
element.addEventListener('mouseleave', () => hover.value = false);

React での実装

import { useRive, useStateMachineInput } from '@rive-app/react-canvas';

function AnimatedButton() {
  const { rive, RiveComponent } = useRive({
    src: 'button.riv',
    stateMachines: 'Button',
    autoplay: true
  });

  const hoverInput = useStateMachineInput(rive, 'Button', 'isHovering');

  return (
    <RiveComponent
      onMouseEnter={() => hoverInput.value = true}
      onMouseLeave={() => hoverInput.value = false}
    />
  );
}

Rive の主な機能

• ステートマシン - ロジック駆動型のアニメーションフロー
• 入力 - Boolean、Number、Trigger の各タイプ
• ブレンド状態 - 複数のアニメーションをブレンド
• リスナー - エディター内のポインターイベント
• 制約 - IK、パス、距離、回転
• ボーンとメッシュ - スケルタルアニメーション
• ランタイム API - コードからすべてを制御
• ファイルサイズの小ささ - 最適化されたバイナリ形式