先定交付物，再选择动画路线
演示动画至少包含三种不同工作：把产品流程讲清楚的视频、在网页中响应操作的微动效、把抽象机制拆成可理解步骤的概念动画。它们可以共享色彩和分镜，却不能把一个文件直接当成所有平台的成品。本文用虚构的社区维修站预约服务作示例：向居民解释“选时段、描述物品、确认预约”，同时给网页增加确认反馈。以下是制作方案与验收方法，没有声称已经替读者渲染视频或测试项目。
开始前写一份交付单：观众是谁、看完应理解哪一个动作、发布位置、语言、画幅、时长、是否需要声音和字幕、素材授权、可编辑源文件及最终文件格式。维修站要一条横版45秒介绍、一条竖版短片和一个网页确认动效。横竖版分别安排构图，不能只裁掉两侧；网页需要真实按钮状态，不能拿一段循环视频代替成功反馈。
场景一：用 Remotion 把产品流程组织成代码视频
Remotion 的价值是让 React 项目中的画面与时间对应，适合需要反复替换文案、数据或语言的演示。先检查现有项目的 Node、React 和 Remotion 版本、锁文件、启动与渲染说明。它的源码和文档公开，但使用条件应按当前许可证及组织用途核对，不能只因能访问 GitHub 就称为所有商业场景免费。不会维护前端项目的团队，可以由开发者建立模板，再让编辑修改受约束的内容字段。
为45秒片子写五个镜头：0到6秒解释“修理前先预约”；6到16秒选择时段；16到28秒填写物品与问题；28到38秒检查预约摘要；38到45秒给出地址及取消方式。每个镜头写清视觉焦点、字幕、旁白、进入与退出状态。先做静态画面确认信息层级，再加运动；一个镜头只突出一个决策，避免同时飞入多组文字。
采用30fps时，总长度是1350帧，五段边界分别为0、180、480、840、1140、1350。Composition 保存画幅、帧率和总帧数；旧项目常用 Sequence 的 from 与 durationInFrames 放置镜头，注意子镜头的局部帧与全片帧不同。当前官方文档对新项目的时间组织已有更新，应跟随安装版本的推荐接口，不要盲抄旧示例。把开始帧和持续帧放在同一时间表中，检查相邻镜头是否留黑、重叠或提前卸载。
让运动由明确的帧位置决定：拖到同一帧应得到同一画面。日期、随机装饰和远程图片应固定输入或缓存，不能依赖每次渲染的当前时间。测试用预约姓名用虚构资料，不能把真实居民电话放进演示素材。字幕使用完整句意的短行，中文字体和英文换行分别检查；旁白录好后再微调镜头停留，而不是把整段说明压缩到无法阅读。
在 Studio 里审阅开始、每次交接和结束帧，再从项目已有脚本或官方渲染入口导出。若 Composition 的 ID 是 RepairBooking，可按当前项目配置使用 npx remotion render RepairBooking out/repair-booking.mp4；执行前确认该 ID、依赖和输出路径存在且不会覆盖需要保留的版本。先渲染短区间检查字体、图像与音频，再导出完整片。交付应包含项目源码、内容输入、字体与素材清单、渲染设置和可播放 MP4，不能只给一张预览截图。
场景二：网页微动效与 Lottie 分开处理
预约按钮的动效要服务于状态。待提交时保持清楚的按钮文字；处理中防止重复请求，并显示文本状态；成功后展示预约编号和下一步；失败时提供可恢复的重试入口。动画结束不等于请求成功，界面必须由实际结果决定。键盘用户应能完成相同流程，焦点不能因为成功图标出现而消失。减少动态效果的设置下，用静态状态和文字仍应讲清结果。
普通悬停、淡入、加载点和面板展开，优先评估现有 CSS 或 JavaScript 是否已经足够。把触发条件、持续时间、可中断方式和结束状态写在组件旁边。在 React、Vue 或 Svelte 中接入时，遵守各自组件生命周期；切换页面后清理监听器和播放器实例，避免回到页面时叠加播放。先在最小组件里验证，再放入实际布局，不能把独立样例顺畅当成整站性能结论。
Lottie 适合已有兼容动画数据的矢量播放需求。lottie-web 是可检查源码和文档的成熟参考，仓库标示 MIT；素材、字体和商业资产仍有各自授权。已有合规 JSON 可以直接评估播放器兼容性；如果从 After Effects 制作，Bodymovin 是常见导出路径。并非每个 AE 特效都能正确表达，也不能把任意 HTML、CSS 或 SVG 改后缀就得到 Lottie 文件。是否需要 AE，取决于素材来源和制作流程，不是播放 JSON 的必需前提。
给确认图标先规定80×80的容器、播放一次、停止在可理解的末帧，并准备静态备用图。检查 JSON 是否引用外部图片、包含不需要的图层或过长时间段；优化后重新比对关键帧，避免为了体积损坏遮罩和文字。以目标设备上的加载时间、内存和交互延迟作判断，不能承诺“所有动画都很小”。播放器加载失败时保留成功文本；动效应增强结果，而不是成为结果唯一载体。
场景三：AI 分镜到成片，以及概念动画
AI 可以帮助把需求拆成镜头候选，但分镜文本不是已渲染的视频。给它明确输入：45秒、五镜头、每镜头一个操作、居民能读懂的表达、虚构预约数据、不得生成无依据的效率数字。要求返回镜头表、台词、画面素材需求、时间长度和待确认信息。审核者先纠正业务流程，再决定用代码视频、手工剪辑还是其他已安装工具实现；不要因为某个 Skill 名称里有 video 就假设它自带渲染器、模型额度或可用账号。
实操提示可写成：“为社区维修站设计45秒预约说明。按选时段、描述问题、检查摘要顺序讲述；列出每镜头时长、字幕、视觉状态和所需素材。先提交分镜，不下载素材、不生成真实预约、不发布。标出不能确定的信息，等待业务资料补齐后再安排渲染。”生成后检查总时长是否真为45秒、各镜头是否重复、取消预约的入口是否被遗漏，并把审批过的版本作为后续制作唯一依据。
概念动画则换一种组织方式。例如解释预约冲突：画面上有三张申请卡和两个时段，先显示相同时间请求，再显示系统提示冲突，最后让用户改选另一个空闲时段。卡片运动必须对应规则，不要把装饰箭头当作系统真的自动调度。为每个阶段保留静态注释，读者暂停时也能理解。先用几张静态分镜验证概念，再做8到12秒短循环，避免长片中出现还没想清楚的机制。
选择 GIF 还是 MP4 要看使用环境。GIF 可方便嵌入但通常不适合声音和长时间高质量画面，体积及颜色也需实际检查；MP4 更适合带旁白和字幕的视频交付。需要透明叠加时另行核对目标编码与播放器支持，不把 MP4 一概视为透明格式。网页上的解释如果需要点击、分支和键盘操作，应保留可访问的交互实现，录像只是补充。每种交付物分别记录尺寸、时长、文件大小和播放检查结果。
能关联哪些 Skill，分别用在哪一步
当前本次目录检查未找到与原文列举名称对应、可核验的 Remotion 或 Lottie 制作 Skill，因此不伪造“六个必装”的详情链接。视频时间线和播放器部分按上面的一手项目文档实现。已核验的 Canvas Design 可用于前期原创静态分镜板或视觉基调的 PDF、PNG，需要明确尺寸、允许使用的素材和可写输出目录。它不负责生成视频、交互组件或 Lottie JSON。
Webapp Testing 用于网页确认流程的本地浏览器检查：加载页面、执行键盘与提交路径、观察 DOM、记录截图及控制台线索。它需要可运行的测试站点、启动命令、端口及相应 Python/Playwright 环境；测试数据与写入范围必须先约定。它不证明真实预约送达，也不替代视频逐帧质量检查。详情中的来源核验、静态扫描和运行证据属于不同信号，不能从来源可访问推断“已安全测试”。
排错与验收：按症状回到对应层
预览正常但导出缺字，先检查渲染环境是否有指定字体、字体是否加载完成、换行是否依赖本地缓存。片头黑屏或字幕少一段，核对镜头边界和总帧数；只在某个画幅截断，回到独立构图与安全区域。音画错位，比较旁白时长、素材裁切和项目帧率，不要靠随意加速整条音轨掩盖问题。导出失败保存日志与失败区间，确认依赖版本及素材路径后做小范围复现。
Lottie 与设计预览不一致，先核对播放器版本、渲染方式、素材依赖和不支持的效果；复杂效果可以改画法或提供静态备用。网页离开后仍播放，检查组件卸载清理。用户关闭动画后无法知道提交结果，说明信息设计不合格，应恢复明确的文字反馈。不要在问题未定位时同时换播放器、改 JSON 和重写组件，否则难以判断哪一步解决了问题。
交付前由另一位读者按完整路径观看：标题是否准确、字幕是否完整、演示输入与输出是否一致、是否有虚构为真实的数据、三个场景是否都交代产物。实际播放导出的文件，检查片头、每个交接点和片尾；网页用鼠标及键盘走通成功、失败、重试和减少动效路径。记录实际观察结果及未覆盖设备，不把计划中的检查写成已通过。保留可编辑版本，后续业务流程变化时一起更新视频、网页反馈和字幕。
FAQ 与来源使用
不会 React 可以直接做吗？可以先完成分镜、文案和素材清单，但代码模板仍需有人维护；先选择团队能持续编辑的流程。Remotion Skill 与 Remotion 本体相同吗？前者通常提供任务说明或规则，后者承担项目运行及渲染，安装说明文件不等于安装好运行环境。所有网页动效都要 Lottie 吗？不需要，简单状态变化通常先评估平台现有能力。AI 分镜能直接算成片吗？不能，必须生成实际媒体并播放验收。能直接把中文片翻成英文吗？应另行检查阅读速度、旁白长度和构图，不能只换字符串。
制作依据是 Remotion 官方仓库及时间线、渲染文档，Lottie Web 官方仓库，以及 MDN 的减少动态效果说明。原创维修站案例用于解释制作与验收，不代表任何工具的实测结果。原文中英文来源及本次参考地址保留在编辑记录；Skill 详情链接只承担上面明确写出的静态设计和网页测试步骤。