Pixerate アニメーションエディター

Pixerate アニメーションエディター は何をしますか？

シーンはアートワーク（それぞれIDを持つベクターパスとグループにパースされたSVG）と、順序付けられたショットのリストで構成されます。ショットはオプションでカメラを移動し、run のコマンドを再生した後、ホールド（デフォルト600 ms）します。コマンドは、"with": "previous" が指定されていない限り、順次再生されます。各コマンドには、コンテンツに基づくデフォルトの長さがあります（enter 600 ms, exit 450, move 700, draw はパス長に従う）。そのため、ペースを変更する意図がない限り、duration は省略してください。すべてのフレームは時間の純関数です。

ID: 要素IDは get_animation（elements）または find_animation_elements から取得します。ショットIDは自分で選択します（"intro"）。コマンドはショットIDとそのrun内のインデックスで指定します。時間はミリ秒、位置はアートワークのドキュメント単位です。後から登場する要素は、enter が実行されるまで非表示になります。一度も登場しない要素は最初から表示されます。

エラー、名前空間付きツール名、汎用コマンドツールについては、pixerate-agent-tools を参照してください。完全なコマンド語彙（すべてのタイプ、オプション、デフォルト）は references/commands.md にあります。

ワークフロースキル

これらのジョブでは、ワークフロースキルも読み込んでください。これには方法、ステップ間のチェック、落とし穴が含まれており、以下のツールを使用します。

• pixerate-animation-motion-graphics: ショット、スタガーエントランス、イージング、ホールド、長さの調整。
• pixerate-animation-logo-reveal: ロゴのパーツからの短いリビール、ビートに合わせ、最後はホールド。

作業方法

1. 読み取り。 get_animation で要素、ショットのタイミング、クリップ、ドライバー、問題を取得します。アートワークがない場合は、最初に set_animation_artwork_svg を実行するか（アニメーション化するすべての要素にIDを付けてください）、import_flair_effect / import_pptx_animation から開始します。アウトライン化されたテキストの場合は、get_text_layout で文字、単語、行の単位を表示します。
2. ショットを計画し、それぞれに1つのアイデアを持たせる。 各ショットで視聴者に何を注目させ、どの順序で見せるかを書き出し、各ビートをコマンドにマッピングします。非表示の最終状態（morph / match ターゲット、follow パス）は、参照する前にアートワーク内に存在している必要があります。
3. バッチで書き込む。 insert_shots でショット全体を、edit_animation で複数の関連する編集を1つのアンドゥステップとして実行します（不確かな場合は最初に dry_run: true。"$0.indexes[0]" と "$last.shot" は以前の操作を参照します）。add_commands、update_command、move_command、delete_commands で微調整します。write_animation はすべてのショットを置き換える場合にのみ使用します。まだ書いたことのないコマンドタイプについては、describe_animation_command で正確なフィールドを最初に返します。 キーフレームではなくパフォーマンスのように感じられるモーション（手描きのスイープ、ジッタードラッグ、移動中にピックアップされた色）の場合は、record_animation_take でタイムドサンプルを記録し、人間がステージでライブ録音するように1つのショットとして記録します。
4. フィットとキューイング。 fit_animation で長さを合わせます（ペースが重要なショットは保持します）。音楽やナレーションの場合は、set_animation_settings で beat または narration を設定し、get_timing_grid でキューを読み取り、ショットに "at": { "beat": n } または { "word": i } を指定します。
5. チェック。 check_animation を実行し、すべてのエラーと警告（too-fast、overlap、out-of-frame、enter-visible、cue-missed などのコード）を修正します。間隔と弧を数値で確認するには get_motion_path を使用します。
6. 表示。 render_animation_frame で shot + at: "end" を指定するか、times でコンタクトシートを生成します。さらに onion_skin / motion_paths で1つの画像にモーションを表示します。レンダリングはバッチ後、編集ごとではなく、バッチごとに行います。seek_animation で人間に瞬間を見せます。
7. エクスポート は要求された場合に行います：export_flair_motion、export_flair_effect（set_animation_controls の後）、または export_lottie。返されたメモを読み、何がサンプリングまたはドロップされたかを確認します。

ベストプラクティス

• ショットごとに1つのアイデア、一度に1つの焦点モーション。 アクションを段階的に構成し、視線の行き先がわかるようにします。二次的な要素は、少なく、後で、またはまったく動かしません。カメラ（ノードを frame）を使用して、すべてを動かすのではなく、注意を誘導します。
• すべての変化にイージングを適用。 到着はイーズアウト（減速して停止、enter のデフォルト）、退出はイーズイン（exit に ease: "ease-in"）、移動はイーズインアウト（デフォルト）を使用します。linear は機械的な動き（一定の回転、プログレスバー）やループにのみ使用します。
• サイズと距離でタイミングを決める。 小さなUIの変更は150〜300 ms、要素の登場は300〜600 ms、大きな移動やカメラ移動は600〜1200 ms。120 ms未満は使用しないでください（too-fast）。大きなものは小さなものよりもゆっくり動かします。
• 予備動作とフォロースルー。 高速な出口前の予備動作には ease-in-back。到着時のオーバーシュートとセトルには pop、rise、ease-out-back またはスプリングプリセット（spring-gentle、spring-quick）を使用します。spring-bouncy は控えめに使用してください。遊び心のある印象を与えます。
• オーバーラップアクション。 関連するアイテムは40〜120 ms ずらして（stagger、またはテキストの場合は split に cascade）ロックステップで動かさないようにします。二次モーションは "with": "previous" と小さな delay で開始し、リードに遅れて追従するようにします。
• 弧。 自然な動きの曲線：各ポイントで停止するチェーン移動ではなく、via ウェイポイントを使用した move（1つのスムーズなパス）、または follow でパスノードを使用します。
• 録音テイク。 パフォーマンスを毎秒30〜60でサンプリングします。レコーダーは重要なポイントのみを保持します（tolerance を上げると、より少なく、よりクリーンなコマンドになります）。各移動要素は、現在のポーズでのサンプル（get_motion_path の最後のポイント、または静止時の境界の中心）から開始します。そうしないと、最初のサンプルでそこにジャンプします。テイクは他のショットの後（または at で）の新しいショットです。既存のショットに重ねることはできません。通常のショットと同様に微調整します。これは通常の move（via と times を含む）、scale、rotate、fade、style コマンドです。
• 読み取れるだけ十分にホールド。 各結果を画面上に残します（ショット hold、デフォルト600 ms）。読む必要のあるテキストは1単語あたり約250 ms、最終フレームやロゴはより長くホールドします。
• 誇張は抑制して。 強調（pulse、shake、teeter、color-pulse）は、注意が必要な1つのものに1回だけ使用します。自動で静止状態に戻ります。
• モーションブラー は、本当に速いモーションにのみ使用します（motionBlur: { shutter: 180 }）。ステージとレンダリングフレームに影響しますが、Flair または Lottie のエクスポートには影響しません。
• アクセシビリティ。 フラッシュを避けます：1秒間に3回以上のフラッシュは避けてください（WCAG 2.3.1）。そのため、color-pulse や大きな領域のフェードは低速で少数にします。重要なUIモーションでは、大規模なパララックス、ズーム、回転を避けます。動きの少ない代替を提供します（ホスト側で prefers-reduced-motion の下でフェードまたは最終状態に置き換える必要があります。このエディターは生成しません）。5秒以上実行されるループは、一時停止する方法が必要です（WCAG 2.2.2）。
• インタラクティブなパーツ。 ボタンやトグルには trigger（click、hover、press、scroll）を設定します。クリックトグルの場合、最後のショットで開始状態に戻します。

ツールリファレンス

読み取り

ツール	使用目的
get_animation	ここから開始します。名前、アートワークサイズ、長さ（ms）、ループ、要素（id、タイプ、名前、親、境界、単色塗り、数値パラメータ付きライブエフェクト）、すべてのショット（各コマンドのインデックス、開始、終了、flairPrimitive）、クリップ、ドライバー、コントロール、問題サマリー、および編集が拒否された場合の readOnly を返します。includeElements: false（デフォルト true）は、大きなアートワークで要素リストをスキップします。
get_shot	保存されている1つのショット（shot id）を、その開始/終了と各コマンドの開始/終了（ms）とともに読み取ります。1つのショットを微調整する際に get_animation よりも軽量です。
describe_animation_command	まだ使用したことのないコマンドタイプを記述する前、または書き込みがフィールドを拒否した場合に使用します。各 types（例：["enter", "move"]）の完全なJSONスキーマを、各フィールドのタイプ、範囲、デフォルト、意味、必須/任意とともに返します。書き込みツールは、すべてのコマンドフィールドを短く、そのフィールドを受け入れるタイプの接頭辞付きでリストします。
find_animation_elements	アートワークが大きい場合に、id または name に query が含まれる要素を検索します（大文字小文字を区別しません。limit デフォルト20、最大200）。id、タイプ、名前、親、境界、塗り、エフェクトを返します。
get_text_layout	split でアウトライン化されたテキストをアニメーション化する前に使用します。group の行、単語、文字IDを読み取り順に返します。要素がパスのグループでない場合（テキストをアウトラインに変換し、1文字1パスとしてグループ化）エラーになります。
get_motion_path	間隔、弧、着地点を数値で確認します。from から to ms まで、step ms（デフォルト33、最大400サンプル）ごとに node の中心（ドキュメント単位）をサンプリングし、各移動変化の開始と終了位置を返します。
get_timing_grid	from と to の間のビート（番号、ms、小節、小節内の拍）とナレーションの単語（インデックス、テキスト、開始、終了）をリストし（limit デフォルト200）、各ビート/単語でどのショットが再生されるかを表示します。at キューを選択するために使用します。ビートグリッドやナレーションが設定されていない場合は、ヒントとともに空を返します。
check_animation	書き込みのバッチごとに実行します。コード、重大度、ショット、コマンドインデックス、ノードID、測定値と必要値、修正方法を含む問題をリストします。エラーと警告を修正します。注意事項は参考情報です。
render_animation_frame	結果を確認します。time（ms）または shot + at（start、middle、end。デフォルト end）。times（2〜16の瞬間）でラベル付きコンタクトシートを生成します（columns 1〜8）。onion_skin でゴーストフレームを追加します（before デフォルト2、after 0、spacing ms または "commands"）。motion_paths（true または id）で移動パスを描画します。デフォルトはSVG。format: "png" はホストがラスタライズできる場合のみ使用します。
export_flair_motion	シーンを Flair SvgMotion { svg, animate } として、ホールド、サンプリングステップ数、注意事項とともに取得します。fps（デフォルトはシーンfps、なければ30）、curves と behaviors（デフォルト true）、flair ターゲットバージョン（デフォルト 0.39。古いバージョンではスプリング、ステップ、ビヘイビア、カーブがサンプリングされます）。
export_flair_effect	Flair カタログのベクターエフェクト（id はケバブケース、name、description、category（デフォルト icon）、tags、および上記の curves / behaviors / flair）を取得します。最初に set_animation_controls を呼び出して、色が {{name: color}} コントロールになるようにします。
export_lottie	lottie-web およびモバイルプレイヤー用の Lottie（Bodymovin v5）JSON を、ショットごとのマーカー、fps（デフォルトはシーンfps、なければ30）、サンプリングされたキーフレーム数、および引き継がれなかったもの（グラデーション、ダッシュ、リビールクリップ、ポイント数が変わるモーフ）に関する注意事項とともに取得します。

書き込み

ツール	使用目的
seek_animation	人間に瞬間を見せます。time（ms）または shot の開始。play は true または false。シーンは変更しません。
set_animation_artwork_svg	アートワークを、viewBox を持つスタンドアロンの svg に1つのアンドゥステップとして置き換えます。アニメーション化するすべての要素にIDを付けてください。新しいアートワークに存在しないIDを既存のショットが参照している場合、拒否されます。要素を返します。
import_pptx_animation	シーン全体を PowerPoint スライドの図形とアニメーションペインで置き換えます（data は base64 .pptx、slide デフォルト1）。クリックごとに1つのショット。遅延、繰り返し、加速は保持されます。テキスト、画像、チャートは注意事項とともに除外されます。最初に dry_run: true で実行します。
set_animation_drivers	すべてのドライバーを置き換えます（空のリストでクリア）。ターゲットの x、y、rotation、scaleX、scaleY、または opacity が、ソースノードのプロパティに factor + offset の変化で追従し、オプションで clamp されます。パララックス、回転しながら動く車輪、何かが上昇するにつれてフェードする影などに使用します。
set_animation_clip	名前付きの再利用可能なクリップを定義、置き換え、または（clip: null で）削除します。run は "$" をターゲットとします。任意のノードで play コマンドを使用して再生します。繰り返し同一のコマンドよりもクリップを優先します。
copy_animation	from をアニメーション化するすべてのコマンド（すべてのショットまたは shots）を to のノードにコピーします。各コピーは元のものから開始され、オプションで stagger（ms）できます。使い捨ての複製に素早く使用します。再利用するモーションにはクリップを使用します。
record_animation_take	パフォーマンスされたモーションを新しいショットとして記録します（1つのアンドゥステップ）。samples は { node, t (テイク内の ms), x, y (中心), scaleX, scaleY, rotation, opacity, fill, stroke, strokeWidth } で、記録された times でのウェイポイントを通る move といくつかのイージングされた scale / rotate / fade / style コマンドになり、それぞれが発生したときに開始します。オプションの length、id、label、at、tolerance。dry_run: true は最初に run を返します。ショットID、その開始、各コマンドのインデックス、タイプ、開始、終了を返します。その後 check_animation と render_animation_frame を実行します。
fit_animation	ショットの speed を設定してシーンの長さを seconds に合わせ、比率を維持します。keep 内のショットは記述どおりに再生されます。dry_run: true は最初に新しい長さと速度を報告します。
import_flair_effect	シーン全体を Flair ベクター effect または SvgMotion motion で置き換えます（正確に1つを指定。オプションの name）。プレースホルダーは色コントロールになります。各 Flair ステップが1つのショットになります。最初に dry_run: true を使用します。
insert_shots	1つ以上の完全なショット（id、run、オプションの label、camera、hold、speed、at）を at の位置（デフォルトは最後）に追加します。すべてのショットのタイミングと問題を返します。
update_shot	set を使用して1つのショットの label、camera、run、hold、speed、at、または id を変更し、remove を使用して label、camera、hold、speed、または at をクリアします。
delete_shots	IDでショットを削除します（1つのアンドゥステップ）。
move_shot	ショットをインデックス to（0 = 最初）に並べ替えます。
add_commands	ショットの run に、at（デフォルトは最後）のインデックスにコマンドを追加します。コマンドが取得したインデックスとそのタイミングを返します。後続の更新でそれらのインデックスを使用します。
update_command	1つのコマンド（shot と command インデックスで指定）を変更します。set 内のフィールドは置き換え、remove 内の名前はクリアします（例："delay"）。コマンドとそのタイミングを返します。
delete_commands	ショットからインデックスでコマンドを削除します。後続のコマンドは繰り上がるため、後でインデックスを再読み取りしてください。
move_command	1つのコマンドをその run 内のインデックス to に移動します。"with": "previous" コマンドは、新しい隣のコマンドとともに開始されます。
set_animation_settings	name、description、loop（none、loop、ping-pong）、trigger（click、hover、press、scroll、または null）、エクスポート fps（デフォルト30）、シーン steps（12 = on twos; null でスムーズ）、beat グリッド（bpm、bars、offset、timeSignature）、narration（{ words: ["text", …], each: ms } または { audio: base64-ogg }）、および controls（UIコントロール）を設定します。controls は、色（{{primary}} など）を公開するために export_flair_effect の前に必要です。オプションごとに個別の呼び出しは不要です。