Motionスキルで生き生きと動くイラストを作る

Motion Skill の機能

Motion For Anything You Draw スキルは、デザイナーやエンジニアがコードで描いたアートワークをアニメーション化し、イラストを切り替えたような見た目ではなく、生き生きと感じられる動きを加えられるようにします。キャラクター、クリーチャー、植物、布、炎、煙、水、天候、ライト、機械、アイコン、ロゴ、チャート、完全なシーンに対応します。

このプロジェクトでは、アニメーションを自然に見せる細部に重点を置いています。シーン全体で1つのクロックを使うこと、実際のピボットを中心に動かすこと、遅れて追従するパーツを作ること、アイドル中も動き続けること、主要ポーズ間を滑らかなパスでつなぐこと、振幅を抑えること、そして強いタイミングカーブを使うことです。

エージェントが生成したアニメーションでよく起きる問題にも対応します。各ポーズに独立したイージング付きトゥイーンを使わせるのではなく、協調した動き、自然な遷移、読み取りやすいまばたき、安定した接地、控えめな二次運動を推奨します。

スキルをインストールする

skills コマンドでスキルをインストールします。

npx skills@latest add rossark0/rossark-motion-skill

インストールすると、スキルはリファレンス資料、再利用可能なテンプレート、分析ツール、サンプルシーンを提供します。付属のエンジンは React Native と SwiftUI の両方のテンプレートに対応しています。

リポジトリを理解する

メインのスキルガイドを読む

まずSKILL.mdを確認してください。ここでは、基本原則、対象ごとのレシピ、ライブフェイス、全身の演技、シーンベースのアクション、インターフェースの動き、よくある問題、参照動画の分析、推奨ワークフローについて説明しています。

プロジェクト固有のモーションノートを作成する

MOTION.mdをアートワークの隣にコピーし、作業しながら Part 2 を完成させます。アニメーションコードの場所、プロジェクトで守るルール、アートワークでできないこと、変更の検証方法を記録してください。スキルは最初にこのファイルを読むため、モーションを変更・作成する前に、エージェントへ重要なプロジェクトコンテキストを伝えられます。

アニメーションエンジンを選ぶ

リポジトリには、対応する各 UI フレームワーク向けのエンジンが含まれています。

• React Native 用のmotion.ts。
• SwiftUI 用のMotion.swift。

エンジンには、ループ用クロックとワンショットクロック、track、flow、seg、wave、loop、bell、seeded、各種モーションカーブが含まれています。描画にアニメーションする目や口が必要な場合は、付属のライブフェイス用テンプレートを使用してください。

アニメーションを手順に沿って作る

1. アートワークと制約を説明する。 MOTION.mdを使い、既存の描画構造、利用可能なジオメトリ、制約を記録します。
2. シーンをパーツに分解する。 胴体、頭、手足、小道具、影、顔のパーツ、二次要素を特定します。実際のピボットを中心に回転するパーツと、遅れて追従させるパーツを決めます。
3. 共有クロックを選ぶ。 各要素に無関係なトゥイーンを与えるのではなく、1つのタイムラインでシーンを協調させます。これにより、接地や反応を同期できます。
4. 主要アクションを定義する。 入場、着地、キック、まばたき、視線移動、手を振る、成長、落ち着くといったイベントを計画します。flowなど利用可能なエンジンヘルパーを使い、主要ポーズ間を滑らかな動きでつなぎます。
5. 二次運動を加える。 頭、前腕、おさげ、帽子、缶、影などの緩いパーツを、主動作にわずかな遅れをつけて追従させます。
6. 接触を確認する。 足が地面に接していること、手がハンドルから離れないこと、投げた物体が正しい位置で始まり終わること、衝撃によって描画のボリュームが崩れないことを確認します。
7. フレーム単位で結果を確認する。 リポジトリの分析ツールとレンダリング結果を使い、動きが小さすぎる、急すぎる、またはタイミングが不適切な箇所を見つけます。

ライブフェイス用テンプレートを使う

liveFace.tsxとLiveFace.swiftには、滑らかに動き、まばたきし、笑うライブの目と口が用意されています。ジオメトリと色を指定するだけで、表情ごとに別の描画を用意しなくても、テンプレートが顔の動きを加えます。

顔の変化は読み取りやすく、連続的に保ってください。ちらつきに見える極端に短いまばたきは避け、ある表情から別の表情へ直接切り替えないようにします。小さな目の動きと、頭の動きと視線の間にわずかな遅れを入れることで、キャラクターの注意深さを表現できます。

付属のサンプルを確認する

Reveal

Reveal シーンでは、スマートフォンのフレーム内で全身の演技を示します。シルエットが足をぶらつかせながら浮かび上がり、子どもが重力に従って落下して着地時に潰れ、ボールが転がり込み、目がボールを追い、キャラクターがキックし、向きを変え、手を振り、その後もアイドル動作を続けます。このシーケンスは60フレーム/秒の9秒ループで、1つのシーンクロックを使用します。

Garden

Garden シーンは、キャラクターの演技と環境の変化を組み合わせています。水滴はシード値付きの弧を描いて落ち、土が暗くなり、茎が2段階で伸び、葉が順番に開き、花びらがひねりながら開き、蝶が着地すると茎がその重さに反応します。キャラクターの頭と目は蝶を追い、おさげ、帽子、じょうろが動きに遅れて追従します。

Chef

Chef シーンでは、タイミング、重力、予備動作、驚き、接触を示します。パンケーキがひっくり返って潰れた状態で着地し、2回目の挑戦では高く上がりすぎてシェフの帽子に当たり、揺れ、滑り落ち、フライパンで受け止められます。蒸気と炎の動きには追加の波を使い、手はハンドルの位置に合わせて解決されます。

Orbit

Orbitシーンは奥行き順序を示します。カードは鳥の周囲を軌道上に動き、位置に応じて手前、背後、または真横向きに表示されます。鳥は浮遊しながら傾き、翼を羽ばたかせ、足と房毛が遅れて動き、ループ中のシード済みの時刻にきらめきが現れます。

SwiftUIデモをレンダリングする

macOS 14以降では、次のコマンドでSwiftUIテンプレートとデモシーンをコンパイルします。

swiftc -parse-as-library -target arm64-apple-macos14 templates/swiftui/Motion.swift templates/swiftui/LiveFace.swift demo/*.swift -o /tmp/render-demo

Revealシーンを毎秒60フレームでframesディレクトリにレンダリングします。

/tmp/render-demo reveal /tmp/frames phone fps=60

revealの代わりにgarden、chef、またはorbitを指定すると、ほかのシーンをレンダリングできます。FFmpegでレンダリング済みのフレーム列をMP4に変換します。

ffmpeg -framerate 60 -i /tmp/frames/%04d.png -c:v libx264 -pix_fmt yuv420p -crf 20 demo/reveal.mp4

レンダリングにより、タイムライン全体を一貫した方法で確認し、変更を比較し、アニメーションが目標フレームレートで安定していることを検証できます。

参考モーションを分析する

参考動画がある場合は、制作前に調べてください。リアルタイムでは見分けにくい小さな動きが、結果に安定感があるか機械的に感じるかを左右することがあります。

• sheet.shは動画から元のフレームレートでコンタクトシートを作成し、タイミングやフレーム間の変化を確認しやすくします。
• track_edges.pyはフレームごとに対象の輪郭を測定し、微細な揺れ、浮遊、揺動を明らかにします。
• sample_colors.pyは動画フレームから正確な色を読み取ります。

これらの測定値を使って、動きをコードに変換する前にタイミング、振幅、間隔を特定します。参考動画が生き生きと感じられる理由は、小さな重心移動、遅れて続く動き、またはシルエットのかすかな変化かもしれません。

高度なモーションのヒント

タイミングを連携させる

シーンに1つの時計を使い、関連する動作でタイミングの関係を共有します。キック、目の動き、首の回転、ボールの軌道は、独立したアニメーションではなく、同じ出来事を伝える必要があります。

追従と予備動作を使う

主要な身体が止まったとき、二次的な部分まで必ず止める必要はありません。柔らかい要素を少し動き続けさせ、静止させたり、加速に反応させたりします。これは髪、ツインテール、帽子、衣服、手足、影、持ち物に特に有効です。

待機中の動きを保つ

キャラクターやシーンは、大きな動作の合間に停止させないでください。わずかな呼吸、まばたき、浮遊、揺動など、振幅の小さい動きを加えると、主動作の邪魔をせずにループを生き生きと保てます。

衝撃時の立体感を保つ

つぶしと伸びは、描画を支えるために使い、無作為に変形させないでください。RevealとChefの例では、着地時につぶしを使いながら、キャラクターや物体の認識しやすさとシーンとのつながりを保っています。

繰り返しが重要な場合はシード付きの変化を使う

きらめきや水滴などの繰り返し要素には、変化しつつ再現可能である必要がある場合、シード付きの動作を使います。タイミングを再現できると、デバッグやレンダリング結果の比較が容易になります。

インターフェースのモーション指針を適用する

インターフェースのモーションについては、プロジェクトで参照されている原則を確認してください。Emil Kowalskiのskillsや、Benji TaylorのFamily valuesなどが含まれます。インターフェースの動きは目的を持たせ、周囲のデザインと一貫させてください。

まとめ

Motionスキルは、コードで描画したアートワークを表現力豊かなアニメーションに変えるための実践的な基盤を提供します。npxでインストールし、プロジェクトをMOTION.mdに記録し、共有クロックを中心に構築し、React NativeまたはSwiftUIのテンプレートを使い、レンダリングしたフレームと分析ツールで結果を確認します。中心となる目標はシンプルです。ポーズを滑らかにつなぎ、シーン全体を連携させ、すべての部分に生き生きと感じられるタイミングと追従動作を与えることです。