motion-design

动效设计

使用这个功能性辅助工具，通过构图、变形、节奏和恰当的声音（除非用户要求静音），用一个清晰的创意来完善用户的简报或进行中的作品。在当前任务中运用相关的制作指导；此技能不是渲染模板，也不会创建项目或选择输出格式。这些决策由动效设计创作流程负责。质量意味着观众能理解并记住创意，同时愿意看它动起来。

执行环境

遵循当前宿主的任务流程、阶段、能力和交付约定。此技能提供动效制作指导；不会创建工具访问权限，也不会更改宿主的工作流程。在 OD Next 中，保留其 Core、通用编排、带键值的生产就绪标记，以及写入即交付的默认设置。用自然语言规划；在制作阶段撰写内容。绝不输出 Plan Contract 或 Runtime State 区块，不请求修复协议，也不声称交付约定已由宿主冻结。只有在宿主 Core 授权时，用户实际要求制作视频动效，才允许进行下述有限的视频检查。对于视频简报（定时影片、宣传片、解说视频或作品集），必须声明可编辑的 HTML 源文件和 MP4 均为必需交付物。渲染 MP4 属于 Build 制作，必须在交付前完成。对于由指针或滚动驱动的交互或 UI 微动效，应交付可运行的 HTML/代码；不要将用户要求的交互压平为视频。绝不要把尚未渲染的视频文件描述为已完成。

如果当前任务的工具和范围允许进行视觉迭代，请按预期尺寸检查开场、关键变形、转场、文本停留和结尾，并检查连续播放。修正最明显的问题，然后只重新检查受影响的时刻。仅有一个可运行文件，不能证明动效已成功。区分实际观察到的内容与仅在规格中描述的内容；绝不捏造质量测量结果。

明确简报，不要停滞

优先使用用户的素材、参考资料、脚本和先前决定。明确以下事项： 信息与受众；投放平台／画幅；时长；准确文案；必须展示的素材；视觉方向；音频；以及所需输出。只有当缺失的信息会改变故事走向或导致结果产生误导时才提问。否则，选择连贯的方向，并简要说明重要假设。用户要求你直接制作时，不要强行提供三种风格选项或安排审批环节。

对于没有额外限制的短片，一个实用的起点是 12–18 秒、16:9、1920×1080、30fps、不擅自编写旁白，并提供可重播的源文件。竖版社交媒体简报应采用 9:16。已有的品牌规范、时间安排、平台和文案优先于这些默认设置。不要编造产品宣传语、数据指标、用户评价或素材。

将精简的节拍图纳入现有计划，而不是另做一份文档： 时间 → 观众获得的信息 → 焦点对象 → 变形 → 文案／音频 → 结束方式。 时间预算要包括入场、阅读停留和退场。选择一个反复出现的对象、形状、线条或字体图案，将各个节拍串联起来。

聚焦产品的机制示例（可调整，但不要视为通用风格照搬）： 散落的词语绕圈运行 → 一个词吸引其他词靠拢 → 轨道变成计时器 → 计时器结束并化为文字标识。每次运动都会改变含义；若使用四张毫无关联的标题卡，整体机制就会消失。

添加动态前的美术指导

在扩展到所有场景之前，先确定构图中一帧有力且具代表性的画面。选定实际的层级、裁剪、字体、调色板、纹理和焦点对象。静态画面如果不够出色，粒子、镜头抖动或特效也无法补救。仅进行规划时，请描述这帧画面；不要过早创建成品。

• 采用与主题相关的具体视觉构想。“高级”“电影感”和“现代”本身并不是美术指导。明确画面中有哪些内容、视觉焦点在哪里、材质语言是什么，以及对比结构如何。
• 将字体作为图形对象来设计。运用字号、对齐方式、换行、留白和字体特征进行构图。选择能覆盖实际语言的字体；准备经过测试的备用字体，并在捕获画面前等待字体就绪。
• 优先采用配色精简且对比有意图的方案。不要不看需求就默认使用霓虹渐变、玻璃卡片、发光球体或米色背景。
• 选择一种材质／世界观逻辑：编辑式墨韵、精密仪器、折叠纸张、触感拼贴、矢量几何、绘画质感的场域，或其他有理据的体系。让其光照、边缘和纹理贯穿整部影片。
• 场景可以不对称、满版或稀疏。避免反复将标题居中置于三张卡片上方。字幕和平台界面元素不要进入焦点区域；应根据目标平台设定安全边距，而不是采用统一比例。
• 提供的产品界面截图和徽标须保持原有比例和内容。应有意裁剪，切勿拉伸。整个动画过程中都要确保数据轴、单位和值准确无误。

编排注意力

选择主导动作，并让辅助运动回应它。错开彼此独立的对象，以便理清画面；当集体运动才是重点时，则让它们一起移动。不要机械地错开每个词，也不要强行规定屏幕上始终有固定比例的内容在移动。

可以使用三种层次，但不必强求三种效果全部出现：

1. 主动作承载核心意思。
2. 次要动作传达重量感或因果关系：滞后的标签、逐渐稳定的阴影、弹性边缘，或相连对象的反应。
3. 只有在场景需要时，环境运动才为画面增添生气。安静的场景和供人阅读的停留画面可以真正静止。

时长和间距各有作用：时长安排故事节拍；间距控制节拍之间的加速度和重量感。建议的起始范围：

作用	起始范围	形式
小型点缀／标点	120–220ms	果断弹入，然后稳定下来
主元素入场	350–650ms	快速移动，平稳落位
有意义的形状变换	600–1200ms	清晰呈现铺垫和结果
大范围揭示／镜头移动	900–1800ms	持续移动，并明确抵达目标

这些是电影创作的经验法则，不是 UI 响应时间限制。应根据移动距离、质量感、情绪和配乐进行调整。入场时使用缓出，出场有明确动机时使用缓入，镜头运动则使用平滑的加速／减速。传送带、时钟、扫描和有意设计的机械运动适合匀速移动。俏皮的材质可以略微过冲；精准的仪器默认不应弹跳。

• 快速动作要有预备和收尾。预备动作可以很轻微，但应有清晰可辨的成因，而不是莫名瞬移。
• 物理运动需要沿弧线变化位置时，就使用弧线。需要表现精准、方向或机械意图时，则使用直线路径。
• 可利用共同形状进行匹配剪辑、跟随移动对象进入下一个场景、通过有意义的遮罩揭示画面，或采用干净利落的切换。应根据节拍之间的关系选择转场，而不是为了追求变化。
• 在交接时保持速度和方向连贯。避免比例、光照或对象身份意外跳变。只有拓扑结构支持时才进行变形；经过设计的匹配剪辑胜过令人难以辨认的网格扭曲。
• 交替安排动作与静止。把最强烈的变换留给核心思想；始终维持最大强度会让一切显得毫无差别。
• 有意识地收尾：让主题元素得到呼应，并让最终信息停留片刻。循环动画的起始和结束状态及速度都必须匹配，且不能重复停顿。

选择视觉语法

**产品 / 品牌影片：**围绕真实益处和具体操作来构建。 尽可能使用实际界面，突出变化之处，并将品牌标志性元素延续到结尾画面。缓慢移动镜头拍摄静态页面只能作为辅助素材，不能构成完整演示。

**动态排版：**通过字重、字距、方向和变形，让文字表达含义。保持稳定的阅读区域；不要让每一行都旋转、模糊或散开。如果逐字出现会妨碍理解，就将短语作为整体动画呈现。揭示文字所需的时间不等于阅读时间。

**解说 / 数据：**选择能够保留因果模型的空间隐喻。先展示对象，再对其进行变换；关系变化时保留标签。若比例尺很重要，先展示坐标轴，再展示数值。如果有旁白，应根据实际提供或生成的音频时间点来安排节奏，而不是猜测时间戳。不要添加无关装饰来掩盖解释不清的问题。

**艺术 / 程序化场景：**区分风格结构与表面噪点。明确笔触、材质、调色板、构图和一种标志性动态。例如：木刻使用有方向性的刻线和分层油墨；绘制夜景使用连贯的弧形笔触和流动的光；纸艺剪影使用平面深度、边缘阴影和铰链式动作。只生成一次纹理种子，并让其连贯运动；每帧都重新生成笔触会导致闪烁。应让元素在场景内部动起来，而不只是让镜头在静态画作之间移动。如果工具支持，应使用合适的现成或生成素材来呈现人物身份和复杂解剖结构；保持轮廓、调色板和光照一致。绝不要假装这些素材确实存在。

**3D / 专业工具任务：**如果用户指定了现有的 AE、Blender 或 Remotion 项目，且项目可用，就应保留该项目。读取其状态，编辑范围最小的相关场景，并保留可编辑图层 / 关键帧。是否采用特定工具的工作流，应由目标效果决定，而不是由技能名称决定。不要默认要求安装 AE、Blender、付费服务提供商或新框架。

创作可靠、可编辑的动态效果

制作新的 Open Design 影片时，请使用由时间轴驱动的 HTML，并搭配 GSAP 和可选的 SVG/Canvas。HTML/SVG 适合排版、清晰的示意图和 UI；Canvas 适合密集的 图形、场域和程序化世界。可按需组合使用。若现有渲染器受支持，请予以保留，不要只为符合此默认方案而重建。

将时长、画面尺寸、调色板、字体比例、缓动和场景时序集中在一个 小型配置中。将每个场景的元素与动态效果放在一起。将内容/数据与绘制分开。 复用几何图形和缓存纹理；限制画布外的工作量和粒子数量。确保场景在任何指定时间戳都保持稳定。

Open Design 视频合成契约：

<div id="main" data-composition-id="main" data-start="0"
     data-duration="15" data-width="1920" data-height="1080" data-poster-time="13.5">
  
</div>
<script>
// Load GSAP before this block; retain the host's pinned dependency when supplied.
const duration = 15;
const tl = gsap.timeline({ paused: true });
// Define initial states explicitly, then animate scene objects at absolute times.
// tl.fromTo(...); tl.to(...); Reading holds occupy real time in the timeline.
const clock = { t: 0 };
tl.to(clock, { t: duration, duration, ease: 'none' }, 0);
window.__timelines = { main: tl };
// A procedural layer must draw from clock.t, not increment state each frame.
// Video export seeks with timeline callbacks suppressed, so draw from a
// per-frame loop rather than from onUpdate alone:
// (function render() { drawWorld(clock.t); requestAnimationFrame(render); })();
</script>

这只是协议骨架，不是完整的视觉模板。请创作真正的 合成内容。根级时长、时间轴时长、宽高比和创作简述必须一致。 使用真实秒数：主时间轴必须保持 timeScale(1)，不得重复播放或延迟开始，且其实际 duration() 必须等于 data-duration。设置器 tl.duration(seconds) 会改变播放速度，不会增加阅读停留时间。 请使用上方完整时长的时钟补间，并确保所有轨道都在其时长范围内。 播放器和渲染器会在导出前拒绝不一致的视频时钟。

对于 SVG 弹出/缩放入场，应在 from 状态之前设置共享原点。 为相关图形（圆盘及其阴影）设置共同的组并对其进行动画处理，或在两种状态中设置相同的 svgOrigin。不要只在目标状态中设置：GSAP 的平滑原点补偿可能会使边界框不同的图形发生偏移。

function popShape(tl, node, cx, cy, at, duration = 0.45) {
  const svgOrigin = cx + ' ' + cy;
  tl.fromTo(node, { scale: 0, svgOrigin },
    { scale: 1, svgOrigin, duration, ease: 'back.out(2)' }, at);
}

始终一致地使用实际合成 ID。先注册时间轴，再发出就绪信号； 所有图像/字体依赖项都必须有明确的就绪状态。尽可能将资源保存在本地，并避免依赖无法访问的远程 URL。

确定性动态效果必须支持向前/向后跳转：不得使用基于 Date.now 的场景状态、未设种子的随机数、只能从零开始播放才有效的模拟，或与主时间轴冲突的独立 CSS 动画。将位置和显示效果定义为时间函数，或设为可跳转的时间轴轨道。 绝不要让可见内容依赖时间轴回调（onUpdate、onComplete）；MP4 导出器会在跳转时禁用这些回调。 若要实现音频响应动态效果，若需要精确重放，请使用预先计算的包络或已知的节拍图。绝不要暗示任意脉冲就是对音乐的分析。

Open Design 支架和嵌入功能会共用源内容播放逻辑：打开 HTML 后影片会自动循环播放，且不显示单独的播放器栏。点击画面即可暂停/恢复，或解锁被浏览器自动播放策略阻止的音频。内部的 window.__odMotionPlayer 接口保留播放/暂停、跳转和重播功能。请保留其 script[data-od-motion-source-player]。不要创建 冲突的控件，也不要启动第二个播放时钟。渲染器会在作者脚本运行前设置 window.__odMotionRender，以便在捕获期间禁用预览界面和缩放。支架包含固定版本的 GSAP 3.14.2，位于 ./gsap.min.js；请保留并引用此本地文件。无需下载。优先使用支持中文的已安装/系统字体；未经请求的字体不得阻碍交付。 如果可选下载失败，请改用可用字体，不要继续探测其他镜像、安装字体工具或创建环境。 对于没有宿主播放器的现有独立源文件，请将控件放在合成内容之外，并将其连接到同一个主时间轴。将整个舞台等比缩放以适应窗口；窗口大小变化时不要重新排布场景布局。控件 不得出现在导出帧中。请求减少动态效果时，仍须提供实用的海报画面，并允许用户明确启动播放。

规划并制作视频音效

对于视频动态简报，请在现有的 Design Spec 和节拍图中分别确定人声、音乐和音效。如果影片适合配乐或声音点缀，且用户未要求静音，请主动添加合适的声音。“无旁白”只表示不添加语音，不代表不添加音乐或音效。用户明确要求静音、静音播放或无声音时，以此为准。如果目标场景适合静音（例如静音的环境循环视频），可以选择静音，并说明这一选择。此政策仅适用于视频动态；除非简报有要求，否则不要为普通原型、文档、幻灯片或交互动效添加声音。

在常规计划中记录音频决策。对于有声影片，声明 <meta name="od-motion-audio" content="required">；对于有意静音的影片，声明 content="silent"。这是供实际导出器使用的合成元数据，不是模型输出的规划约定。 对于 required，请在合成目录中制作真实的本地音频素材：使用提供的／已获授权的媒体、主机提供的音频生成工具（如有），或原创合成的器乐／音效 WAV。不要编造素材 URL，不要安装无关的音频环境，也不要用脉动视觉代替声音。如果必须制作音频但制作失败，请报告阻碍因素，而不是将静音成品作为完整交付。

使用渲染器支持的时间参数声明每条音轨，例如： <audio src="assets/music.wav" data-start="0" data-duration="15" data-volume="0.3" preload="auto"></audio>。音效也使用相同约定，并设置各自的起始时间和时长。音频来源必须是本地相对路径，音轨须预先剪辑，并避免使用循环、播放速率和媒体起始位置属性。音乐音量应低于人声，并与实际节拍图中的节奏点对齐。 保留共享的源播放器：它会自动循环画面和声音，并使音频与播放、暂停、跳转和重播同步。不要启动第二个音频时钟，也不要只使用 Web Audio，因为这无法作为可导出的音轨。渲染器会将这些音轨混入 MP4。

在现有的有限视频检查中，验证源音频能遵循这些控制操作、下载的 MP4 含有可听见的音轨，以及关键声音出现在制作时设定的时间点。文件扩展名或音频标签本身都不能证明存在声音。静音影片仍然有效；绝不要要求其他任务类型必须包含音频。

视频制作与双重交付

对于视频简报，请在 Build 阶段使用 Open Design 现有的本地 HyperFrames 渲染器。它不需要视频生成 API 密钥。不要要求用户手动渲染，也不要运行第二个渲染器。Plan 中应声明 hyperframes-html 为制作路径、可编辑源文件为规范版本、MP4 为必需的派生输出。对于交互式简报，使用 html，仅交付源文件。

在易读的计划和合成文件的 MP4 链接中保留源文件与 MP4 的路径。导出器会检查实际输出路径和声明的音频策略；Open Design 不会解析或冻结模型编写的计划。不要添加机器专用代码块，也不要增加用于修复约定的回合。

仅当用户当前实际提出视频动态需求时，才应用此交付指南，包括在其他项目中明确提出的视频动态需求。仅选择了某个场景或加载了辅助程序，并不意味着可以据此制作影片。仅要求计划的任务以计划结束；交互动效以及原型中的悬停／滚动动画应保持为可运行的 HTML。后续请求可以直接编辑现有影片；只有在所请求的更改会影响视频时，才重新渲染。

1. 使用原生 shell 工具搭建可见的源目录： "$OD_NODE_BIN" "$OD_BIN" media scaffold --project "$OD_PROJECT_ID" --composition-dir "motion-source/film"。 新影片使用新的描述性目录；修改时编辑现有源文件。将 hyperframes.json、meta.json、HTML 和本地资源保存在该目录中。
2. 编写 motion-source/film/index.html。其合成根元素必须包含 data-composition-id="main"、data-start="0"、data-duration、data-width、data-height 和 data-fps。在 window.__timelines.main 注册可定位的主时间轴。使用实际的 GSAP 动画，不要使用占位时间轴。资源和字体应保存在本地，并使用相对于此源目录的路径。 在 <head> 中加入 <meta name="od-motion-output" content="video"> 和 <link rel="alternate" type="video/mp4" href="../../film.mp4">。href 必须指向项目中实际计划生成的 MP4。交互式版本应声明 content="interactive"，且不需要 MP4。 对于视频，应从实际时间轴中选择一个稳定且有代表性的时刻，并将其时间（秒）声明为该根元素上的 data-poster-time。该值必须满足 0 <= time < data-duration；避免选择空白的开场或转场。优先选择能在缩略图尺寸下传达产品或主要理念的画面。宿主会验证源文件与视频的时钟和尺寸，并从成品 MP4 中提取这一帧。不要另行制作虚构封面，不要为了封面更改视频开场，也不要将预览容器烘焙进视频。
3. 通过宿主渲染： "$OD_NODE_BIN" "$OD_BIN" media generate --project "$OD_PROJECT_ID" --surface video --model hyperframes-html --composition-dir "motion-source/film" --output "film.mp4"。 如果返回任务 ID，使用 "$OD_NODE_BIN" "$OD_BIN" media wait <id> 并等待任务成功。 排队中的任务、HTML 预览或失败的命令都不代表影片已完成。
4. 保留源文件和资源，并在最终回复中使用项目相对 Markdown 链接，同时链接实际 MP4 和源 HTML。文件查看器支持预览和下载。后续编辑视频时，重新渲染到同一个已链接的 MP4，确保下载内容与当前源文件一致。

如果宿主报告渲染失败，请保留可编辑的源文件，并如实报告阻碍。绝不要伪造下载链接，也不要把仅有 HTML 的输出称为成品视频。只有实际由用户请求的视频动态制作，且仅在宿主 Core 授权时，才允许进行以下有限检查：

• 规划期间，在现有 Design Spec/分镜图中保留事实不变量和必须逐字呈现的文案。压缩字幕时，说明性内容必须保留因果机制和例外情况；装饰性比喻不是事实。
• 首次渲染后，检查实际源文件和导出视频各一次：检查时钟和尺寸，根据这些不变量对照字幕，并检查最多三个有代表性的帧（开场、关键说明、结尾）。确认相关 SVG 图形保持对齐。使用可用的宿主、浏览器或帧检查工具，并实际查看图像；仅阅读源文件不构成视觉证据。不要声称完成了工具无法支持的检查。
• 如果检查或渲染器发现了明确缺陷，最多进行一次针对性修复并重新渲染；只复查受影响的事实或帧。如果仍不正确或无法验证，请报告限制，不要声称已确认无误。
• 不要启动验收 Agent，不要给美观度打分，不要添加单独的流程阶段，也不要反复进行无明确范围的润色。交互式动态、原型、幻灯片、文档及其他任务继续遵循现有的完成即交付政策。

构图时保证质量

对于每个节拍，都要考虑焦点、运动成因、阅读时间和退场方式。 在转场时，要考虑转场前后的状态及其重叠部分。 在结尾时，要考虑收尾、停留时间和重播效果。

制作时，请参考以下具体的缺陷与改进决策：

缺陷	更好的决策
感觉像幻灯片	让同一物体贯穿整个过程，并发生有意义的变化
所有元素都在争抢注意力	确定主要动作；减少或延后辅助元素
缺乏重量感	调整移动时长、加速度、预备动作和稳定过程
文字难以辨认	仅在允许的情况下精简文案；延长停留时间并增强对比度
看起来缺乏特色	强化字体、构图和主题专属的视觉母题
绘画质感闪烁	预先生成并缓存笔触；移动连贯的纹理场
画面节奏单调	有目的地改变镜头尺度以及动作与停留的节奏
画面繁杂却表达有限	删除装饰性运动，展现因果动作

不要编造数值评分来证明美感。简洁地说明可用成品、时长／宽高比，以及缺失的素材、音频或导出功能。