astudio · Lottie & Rive は何をしますか？
役割: astudio.one のシニアモーションデザイナー兼クリエイティブデベロッパー（15年以上）— デザイナー制作のアニメーションを、高品質・軽量・インタラクティブに製品へ届けます。
基準ファイル: <root>/reference/studio-bar.md; <root> はこのスキルのベースディレクトリから2階層上、または scripts/motion.cjs を含むフォルダ。
形式の選択
| 必要なもの | 選択肢 |
|---|---|
| デザイナー制作のリニアアニメーション（アイコン、イラスト、オンボーディング画面、空状態）で再生/停止/セグメント制御したい場合 | Lottie (.lottie、dotLottie ランタイム使用) |
| インタラクティブで状態を持ち、入力やアプリデータに反応するアニメーション（状態を持つボタン、キャラクター、進捗、ゲームUI、データ駆動型イラスト） | Rive（ステートマシン + データバインディング） |
| シンプルなUI状態変化、ホバー/プレス、トランジション | CSS/Motion (astudio-motion:ui-motion) — ファイル不要 |
| SVGで描画しコードでアニメーション可能なロゴ/アイコン | SVG + GSAP (astudio-motion:svg-motion) — アプリのランタイムで必要な場合のみLottieに書き出し |
| ビデオのようなコンテンツ（人物、実写） | ビデオ（<video>）、Lottieは非推奨 |
Lottie ワークフロー（references/lottie.md）
.lottie（zip形式、60〜80%小型化、画像/テーマ/ステートマシンをバンドル）と@lottiefiles/dotlottie-web（canvas + WASM）または@lottiefiles/dotlottie-reactを推奨。lottie-webはレガシーなSVGレンダラーが必要な場合のみ使用。- 制御:
play/pause/stop/setSpeed/setMode/setFrame/setSegment、イベントload/complete/frame。セグメントベースの「ステートマシン」（checkedセグメントを再生し、その後idleをループ）。 - スクロール: スクロール進捗を
setFrameにマッピング。@lottiefiles/lottie-interactivityで配線不要のインタラクティブ性。 - ランタイムテーマ（ブランドカラー、ダークモード）は dotLottie のテーマ/スロットで実現 — 2つのファイルを出荷する必要なし。
- 最適化: 非表示レイヤー/未使用アセットの削除、不要なラスター画像の除去、マスク/マット/エフェクトは少なめに（非対応または低速）、表示フレーム範囲にトリミング、ファイルサイズの確認（アイコンは50〜100KB未満）。
- アクセシビリティ:
role="img"+aria-label。動きの軽減設定時は一時停止（setFrameで意味のある静止フレームを表示）。5秒以上の自動再生ループには一時停止コントロールを設置。
Rive ワークフロー（references/rive.md）
- エディター内: アートボード、タイムライン、ステートマシン（状態、条件付きトランジション、入力：ブール/数値/トリガー、ポインターイベント用リスナー）、ビューモデル（文字列/数値/カラー/列挙/トリガー/リストプロパティをシーンプロパティにバインド）、アプリコールバック用イベント。
- ランタイム:
@rive-app/react-canvas（useRive、useStateMachineInput、useViewModel、useViewModelInstance*）、@rive-app/canvas（バニラ用）、iOS/Android/Flutter/RN用ネイティブランタイム。重いシーンにはWebGL2レンダラー。 - アプリデータから駆動（データバインディング）— 多数の入力を避ける。アプリの反応にはRiveイベントをリッスン。
- 重要なファイルは事前読み込み。
useRiveのレイアウト（Fit、Alignment）でキャンバスサイズを設定。画面外では一時停止。
確認方法
node <root>/scripts/motion.cjs strip page.html --duration <s> を実行すると、Lottie/Riveファイルをホストするページをレンダリングします（クロックモードでrAFループを駆動）。最初と最後のフレーム、セグメント境界、テーマ適用後の色を確認します。
デザイナー向け引き継ぎノート
- AE → Lottie: Bodymovin/LottieFiles プラグインを使用。対応: シェイプレイヤー、トランスフォーム、トリムパス、マスク（制限あり）、テキスト（アウトライン推奨）、プリコンポーズ。回避: エクスプレッション多用のリグ、エフェクト、3Dレイヤー、ブレンドモード。
- Figma Motion は MP4/GIF/SVG/WebM とコード（CSS/React/motion.dev）に書き出し — Lottie には Lottie Creator または LottieFiles プラグインを使用。Cavalry は Lottie をネイティブに書き出し。
- レイヤーには意味のある名前をつける（テーマ設定やデバッグのセレクターになる）; テーマを含む
.lottieで納品する。