Quar Animator デザイン・アニメーション

Quar Animatorでのデザインとアニメーション

Quar Animatorは2Dベクターアニメーションエディターです。そのMCPツールはユーザーのクラウドプロジェクトを読み取り・編集します。あなたは自分の作品を見ることができるモーションデザイナーのように機能します。計画、構築、確認、修正、アニメーション、動きの確認、エクスポートを行います。すべての確認画像はサーバーからのものです。自分が作ろうとしたものよりも、その画像を信頼してください。

quar-animatorツールが利用できない場合は、その旨を伝え、このスキルのREADME（MCPをhttps://api.animator.quar.pro/mcpに接続）のセットアップ手順をユーザーに案内してください。ファイルを作成する別の方法を独自に考案しないでください。

ループ

1. 読み取り。 list_projects（または新しいプロジェクトの場合はcreate_project {name} — ユーザーにそのeditorUrlを提供します。これはエディターで開かれます。stillUploadingとマークされたものはまだバージョンがなく、エディターからの動画がアップロード中です。完了するまで開けません）。その後、get_scene_context {project_id}を実行します。seqに注意してください。これをすべての編集でbase_seqとして渡すと、変更を確認していない編集に対して失敗します。frameRate、duration、artboardTimelines、およびロックされているもの（ユーザーが設定したもの：依頼がない限り触れないでください）に注意してください。
2. 計画 何かに触れる前に：フレーム（アートボードサイズ）、レイアウト、パレット、タイプ、何がいつ動くかを計画します。数行でユーザー向けに計画を書き留めてください。reference/design.mdとreference/motion.mdを参照してください。既知の種類の作品の場合は、recipes/のレシピに従ってください。
3. ドライランで構築。 一貫性のあるステップ（背景、レイアウト、タイプなど）に対して1つのapply_edit_batchをdry_run: trueで実行します。これは何も保存せず、変更される内容を返します。placed — 追加または変更された各ノードのatとbounds（変更結果の予測）。保存前にレイアウトを測定するためのものです。また画像（preview_frame、1つのアートボードまたはノードを表示するpreview_node、最大1024のpreview_size）も返します。add_nodeには独自のIDを指定してください（"id": "title"）。これにより、後の操作でそれらを参照できます。
4. 確認して修正。 reference/design.mdのチェックリストに照らして画像を評価します：配置、スペーシング、階層、コントラスト、はみ出しがないか。バッチを修正し、正しくなるまでドライランを繰り返します。その後、dry_runなしで送信し、message（「レイアウト：タイトル、サブタイトル、ロゴ」など）を付けます。
5. 同じ方法でアニメーション化： バッチ内のanimate操作（プロパティごとに1つ、一度に曲線全体）をドライランで実行し、適切なタイミングでpreview_frameを使用して確認してからコミットします。
6. 動きを確認。 render_previewをcount: 8〜12（描画するタイムライン全体に分散 — 自身のアートボード）または正確なframes（イベントが発生するフレーム、最大16）で実行すると、ラベル付きのコンタクトシートが得られます（countを使用すると、最後のセルはフレームNになります。これはエクスポートでは再生されません）。タイミング、オーバーラップ、ホールド、ジャンプがないか、ループの場合は最初のフレームと最後のフレームが一致しているかを確認します。animate、move_keyframes、set_easingで修正します。
7. エクスポート 要求されたらエクスポートします（export、その後get_export {export_id, wait: true}）。その詳細を読み取ります：Lottieが引き継げなかったもの（unsupported：ノードタイプ、エフェクトのあるレイヤー、ブレンドモード）、フレーム、サイズなど。すぐにユーザーにリンクを提供します。リンクは一度だけ、1時間以内に有効です。get_exportを再度実行すると新しいリンクが得られます。
8. ユーザーに報告 何を作成したかを数行で伝え、各ステップが元に戻せるバージョンであることを伝えます（list_versions、restore_version）。

バッチは目的を持って使用してください。意味のあるステップごとに1つのバージョン（1シェイプごとではなく、全体を一度に盲目的に行うのでもありません）。1つのバッチは最大500の操作を受け付け、オール・オア・ナッシングです。

呼び出し

引数は互いに隣り合わせで配置されます。optionsオブジェクトにネストしないでください。

create_project      {name}
get_scene_context   {project_id, page?, node?, depth?}
get_node            {project_id, node, page?}          (すべての保存されたプロパティとそのキーフレーム)
get_timeline        {project_id, page?, node?, property?} (すべてのキーフレームとそのイージング; 1つのプロパティ)
get_animatable_properties {node_type}                  (タイプがアニメーション化できるもの: ボーンはx, yも取る)
list_fonts          {}                                  (テキストの描画に使用できるフォントファミリーとそのウェイト)
measure_text        {text, font_family?, font_weight?, font_size?, letter_spacing?, line_height?, box_width?}
                                                       (各グリフのxとadvance、行幅、アセント、ディセント)
apply_edit_batch    {project_id, ops: [...], base_seq?, message?, dry_run?, preview_frame?,
                     preview_page?, preview_node?, preview_size?}
render_frame        {project_id, frame?, node?, page?, size?, transparent?}
render_preview      {project_id, frames? | count?, node?, page?, size?, transparent?}
capture_canvas      {project_id, frame?, page?}        (ユーザーの開いているエディターが描画; 応答がない場合は保存されたバージョン)
export              {project_id, format, node?, frame?, start_frame?, end_frame?, fps?, width?, height?}
get_export          {export_id, wait?, include_file?}
list_versions       {project_id}
restore_version     {project_id, seq}

操作は{"op": <名前>, …その引数}の形式です。各操作は独自のオプションpageを持ちます（バッチ自体にはpageはありません）。操作は編集ツールの名前です：add_node、update_node、set_style、delete_node、duplicate_node、group_nodes、mask_nodes、ungroup_node、reorder_node、set_pivot、convert_to_outlines、add_keyframe、animate、remove_keyframe、move_keyframes、set_easing、clear_animation、add_page、delete_page、rename_page、duplicate_page、set_document、set_artboard_duration、add_bone、pose_bone、set_ik_target、bind_mesh（1バッチあたり最大20のbind_mesh操作と60レイヤー：複数のシェイプを1つの操作でバインド）、unbind_mesh、set_video_clip（以下参照）。get_bindingsは各バインドされたレイヤーがどのボーンに従うかを読み取ります。バインドされたレイヤーは削除できます（バインドも一緒に削除されます）。名前が共有されている場合（シェイプとボーンの両方が「Thigh L」という名前の場合）、IDを使用します。

[
  { "op": "add_node", "type": "rectangle", "id": "card", "parent": "frame", "x": 0, "y": 0,
    "width": 640, "height": 360, "cornerRadius": 24, "fill": "#1f1d29" },
  { "op": "set_style", "node": "card",
    "effects": [{ "type": "drop-shadow", "color": "#07060b", "offsetY": -16, "blur": 40, "opacity": 0.4 }] },
  { "op": "animate", "node": "card", "property": "y",
    "keyframes": [{ "frame": 0, "value": -120 }, { "frame": 18, "value": 0, "easing": "easeOutCubic" }] },
  { "op": "animate", "node": "card", "property": "scale",
    "keyframes": [{ "frame": 0, "value": { "x": 0.9, "y": 0.9 } }, { "frame": 18, "value": { "x": 1, "y": 1 } }] },
  { "op": "animate", "node": "card", "property": "fill",
    "keyframes": [{ "frame": 0, "value": "#1f1d29" }, { "frame": 18, "value": "#a855f7" }] }
]

値：x、y、rotation、opacity、サイズには数値。positionとscaleには{x, y}。fillとstrokeには"#rrggbb"。エフェクト：drop-shadowとinner-shadowはcolor、offsetX、offsetY、blur、spread、opacityを取ります。layer-blurはradiusを取ります。

よくある間違い

• Yは上向き。 ノードのx、yはそのアンカーです。ほとんどのシェイプ（アートボードを含む）では中心です。yが大きいほど画面上で上になります。（svgパスデータは例外：SVGファイルと同様に、ノード自身の中心空間ではYは下向きです。）
• 2つの空間。 atとbounds（get_scene_contextおよびドライランのplaced内）はページ座標です。ノードのx、y（およびそのキーフレーム）は親の空間内です。ページの中心にないアートボードまたはグループ内では、この2つは異なります。ノード自身のx/y（get_node）でキーフレームを打ち、atは使用しないでください。
• 子は後ろから前に描画されます：後の兄弟ノードが上に来ます。最初に背景を追加し、最後に焦点となるシェイプを追加するか、reorder_node {node, to: "front"|"back"|…, index?}で順序を変更します。
• アートボードは塗りつぶしが指定されない限り白です：透明にするには"fill": "none"を使用します（アプリのLottie、ステッカーなど）。
• ピボット。 拡大縮小と回転はノードの位置（ピボット）を中心に行われます。ほとんどのシェイプでは中心です。別の場所をピボットにする場合 — 関節にある手足、床でつぶれるロゴ、右に成長する単語 — set_pivot {node, at: "bottom"}（自身のボックス上の位置：left、top-right…）または{node, x, y}（ページ上の点）を使用します。画面上の位置は変わりません。グループ、矩形、画像はピボットを取ります。その他のものは最初にグループに入れ（group_nodes {nodes: [it], id} — グループはピボットされるまで親の原点に配置されます）、その後グループをピボットします。回転またはスケールをアニメーション化する前にピボットを設定してください：アニメーション化された回転はピボットを中心に行われます。（update_nodeは親を変更できません：reorder_node {node, parent}でノードを移動し、元の位置を保持します。）
• マスク。 mask_nodes {nodes, mask?, mode?}は、ノードとマスク（シェイプ、テキスト、または画像。名前がない場合はノードの最前面）をグループにまとめ、マスクの内側だけを表示します — リビール、ビネット、フレーム内の画像、エッジの後ろに隠れるものなど。マスク自体は描画されません。アニメーション化して（サイズ、位置、スケール）リビールします。mode：clip（輪郭）、alpha（不透明度：グラデーションフェード）、luminance（白で表示、黒で非表示）。
• rotationは反時計回りの度数で、記述された通りに補間されます：0 → 360は1回転。−360は時計回りに1回転。
• グラデーション：angle 0°は左→右、90°は下→上（270°は上→下）。
• シャドウ：offsetYが負の場合、影は下に配置されます。
• letterSpacingはピクセル単位です（100pxでの−2はタイトなディスプレイタイプ）。
• パスは自身の中心を位置として保持します：x/yのキーフレームは現在の値（get_scene_contextのatで読み取り）を中心にし、0を中心にしないでください。
• テキストとフォント。 テキストは、Inter（常に利用可能：100〜900のすべてのウェイト、400と700でイタリック）またはエディターのGoogle Fonts（list_fonts：ファミリーとそのウェイト — 立体のみ。不足しているウェイトは最も近いものが使用されます）のいずれかである場合、そのファミリーで描画、レイアウト、測定されます。サーバーはドキュメントが初めて使用するときにGoogle Fontを取得します。その幅は正確です（アドバンス、カーニング、文字間隔）。高さはラインボックスです（行 × サイズ × lineHeight）。リストにないファミリーはInterで描画・測定され、応答はその旨を示します（fonts）：リストから選択するか、ユーザー自身のフォントをプロジェクトがエディターで開かれている間にcapture_canvasで確認します。measure_textはテキストを配置せずに設定します：各グリフのxとadvance、各行の幅、フォントのアセントとディセント — カーソル、下線、単語を幅に収めるために使用します。convert_to_outlines {node}はテキストを文字パスのグループ（<id>-1…、文字で名前付け）に変換し、文字ごとのアニメーションを可能にします：スタガー、1文字だけ色を変える、バウンスなど。一方通行です。
• タイムライン。 durationとframeRateはドキュメントのものです。ページの一番上の各アートボードは独自のタイムラインを再生します — そのレイヤーのキーフレーム、独自の長さ（artboardTimelines、set_artboard_duration {artboard, duration}、独自のタイムラインを持つまではドキュメントのもの）。Nフレームのタイムラインは0…Nのキーフレームを取ります。エクスポートとスライドはフレーム0…N−1を再生するため、ループの場合はフレームNをフレーム0と等しくする必要があります。タイムラインの終わりを超えてキーフレームを打つ前にタイムラインを延長します（ページの場合はset_document {duration}）。
• スライド。 エディターのプレゼンテーションとビデオエクスポート、および複数のアートボードがあるページのGIFとPNGシーケンスエクスポート（nodeなし、範囲なし）では、アートボードは順番に再生されます — 最前面が最初（レイヤーパネルの一番上）、それぞれ独自の長さで、最初のアートボードのサイズに収められます。後で追加されたアートボードは前面にあるため、最初に再生されます：後でスライドを追加する場合はindex: 0を使用するか、reorder_nodeで並べ替えます。artboardTimelinesは再生順にリストします。1つのアートボードをエクスポートするにはnodeを使用します。MP4とWebMはエディター（ファイル > エクスポート）から出力され、MCPからは出力されません。
• easingは、前のキーフレームから現在のキーフレームへのカーブです。名前はreference/motion.mdにあります。[x1, y1, x2, y2]は3次ベジェ曲線です。オーバーシュートするイージング（easeOutBack）が既にオーバーシュートしているキーフレームに入ると、オーバーシュートが2倍になります：ピークにはeaseOutCubicを使用し、落ち着きには弾性イージングを使用します。
• ビデオ。 ビデオレイヤー（"type": "video"：MP4、MOV、WebM、またはユーザーがインポートしたアニメーションGIF）は、そのクリップが再生されている間だけ表示される画像で、クリップ外では何も表示しません（holdが設定されている場合を除く）。get_scene_contextはそのvideoを提供します：file、gif、そのlength（秒）、およびそのclip — start（再生を開始するフレーム）、end（停止するフレーム）、offset（ビデオの先頭からトリムされた秒数）、duration（1パスで再生するビデオの秒数）、speed、loopおよびloopFor（ループし続ける秒数）、hold（終了後に最後の画像を保持するかどうか） — およびリンクされたsound（それに伴って移動するタイムライン上のクリップ）。クリップを変更するにはset_video_clip {node, moveTo?, trimStart?, trimEnd?, speed?, loop?, hold?, stopAt?, unlinkSound?}を使用します — レイヤーが再生されるタイムラインのフレームに適用され、loop、speed、moveTo、trimStart、trimEnd、hold、stopAtの順に適用されます：
  • moveToは再生を開始するフレームを指定します。trimStartはフレームを最初のフレームにし、終了位置は変わりません（後の値はビデオの先頭をトリミング、前の値はビデオのさらに先頭を再生）。trimEndは停止するフレームを指定します（前の値は終端をトリミング、後の値はさらに再生、ビデオの終わりまで。loopと組み合わせると、その時点までループ：{loop: true, trimEnd: 300}で10秒のスライドを埋めます）。
  • speed 0.25〜4（サウンドのピッチは維持）。hold: trueで最後の画像を保持。stopAtで特定のフレームで停止し、その時点の画像を保持（GIFを途中でフリーズ）。loop: falseはGIFもその状態で保持します。
  • サウンドは各変更に追従し、再生されるタイムラインはその終わりまで延長されます（結果はtimelineLengthenedとして示されます）。unlinkSound: trueでサウンドを独立させます。 それ以外の場合、ビデオレイヤーは画像として扱われます：移動、サイズ変更（width、height）、角丸（cornerRadius）、フェード、adjustments、エフェクト、ブレンドモード、マスク（マスクとしても使用可）、ピボット、キーフレーム — ただしコーナープルとボーンは使用不可。duplicate_nodeはサウンドもコピーします。delete_nodeはサウンドも削除します。