动态图形
addHtmlElement 用于设计容器和布局；文本和字幕命令用于纯文字。
工作流程
- 现有组件可能已足够：
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。 - 首先阅读契约： 使用
searchCatalogue类型commands搜索确切 IDaddHtmlElement，并在编写标记之前阅读其完整的创作契约。 - 尺寸由内容和空间决定： 让文案和可用区域决定尺寸、样式和放置位置。下三分之一（lower third）并不总是需要深色面板；统计数字并不总是需要渐变卡片。
- 在时间轴上进行动画处理， 使用受支持的时间轴驱动动画合约。壁钟 CSS 动画不是时间轴播放，无法导出。
- 容器与子对象： 对一个 HTML 片段进行变换会移动其整个合成，而非其子元素。要移动内部对象，请读取该片段的 HTML 并在时间轴上对目标子元素进行动画处理，或使用单独的独立片段。将附带的细节保持在同一个移动容器中。
- 自定义组件： 当脚本可用时，TSX 运动组件可通过
agentWorkspace动作motion_compile（工作流motion-authoring）进行编译。 - 验证 在渲染帧的多个时间点上检查对象位置。仅靠摄像机缩放无法满足对象动作的需求。
常见陷阱
- 内联 SVG 需要
xmlns，否则会以零像素大小渲染，且无任何提示。 - 一个绘制纯色全屏背景的 HTML 元素会在其整个持续时间内隐藏其下方的所有内容；请确保根元素是透明的。
- 如果用户说某个更改不存在，请检查保存的结果并更改实际机制，而不是重复相同的关键帧。
- 设计的 UI、图表和程序化图形可以展示工作流程，而无需付费的图像生成。
相关技能：titles, text-led-video。专家：motion-designer。