vidmoat/motion-graphics

モーショングラフィック

addHtmlElementはデザインされたコンテナとレイアウト用です。テキストやキャプションのコマンドはプレーンな文字列用です。

ワークフロー

1. 既存のコンポーネントが適合する場合がある： addMotionComponentは、編集可能でタイムライン駆動のグラフィックをビデオの方向に追加します。生成コストはかかりません（テキストはsetMotionComponentで変更可能。searchCatalogueで種類elementsを検索し、コンポーネントを探します：reveal-title、speaker-card、progress-ring、feature-spotlight、stat-counter、keyword、checklist、chat-bubbles、search-bar、proof-card、icon-card、quote-card）。話者が発言している内容に基づいて、designInsertsはトランスクリプトと照合して配置します。HTMLを構築するのは、どのコンポーネントも適合しない場合のみです。
2. まず契約書を読む： searchCatalogueで種類commandsを検索し、正確なID addHtmlElementを見つけて、その完全なオーサリング契約を読んでからマークアップを記述します。
3. コンテンツとスペースからサイズを決定： コピーと利用可能な領域に基づいて、サイズ、スタイル、配置を決定します。ローワーサードは必ずしも暗いパネルを必要とせず、統計も必ずしもグラデーションカードを必要としません。
4. タイムラインクロック上でアニメーションさせる： サポートされているタイムライン駆動のアニメーションコントラクトを使用します。壁時計のようなCSSアニメーションはタイムライン再生に対応しておらず、エクスポートできません。
5. コンテナ対オブジェクト： 1つのHTMLクリップに対する変換は、そのコンポジション全体を移動させ、子要素は移動しません。内部のオブジェクトを移動するには、そのクリップのHTMLを読み取り、タイムライン上で目的の子要素をアニメーションさせるか、別の実際のクリップを使用します。付属の詳細は同じ移動コンテナ内に保持します。
6. カスタムコンポーネント： TSXモーションコンポーネントは、スクリプトが利用可能な場合、agentWorkspaceアクションmotion_compile（ワークフローmotion-authoring）を介してコンパイルされます。
7. 検証： レンダリングされたフレーム上で、複数の時刻におけるオブジェクトの位置を確認します。カメラのズームだけではオブジェクトのアクションを満たせません。

注意点

• インラインSVGにはxmlnsが必要です。これがないと、静かにゼロピクセルでレンダリングされます。
• 全フレームを単色で塗りつぶすHTML要素は、その継続時間中、その下のすべてを隠します。ルートは透明にしてください。
• ユーザーが変更が反映されていないと言った場合、保存された結果を検査し、同じキーフレームを繰り返すのではなく、実際のメカニズムを変更してください。
• デザインされたUI、図、手続き型グラフィックは、有料の画像生成なしでワークフローを示すことができます。

関連スキル：titles、text-led-video。スペシャリスト：motion-designer。