Remotion 产品动画
将产品交互转化为清晰的视觉叙事:建立上下文,展示一个动作,使其结果可读,然后将注意力传递给下一个动作。根据需求调整动画风格。静态镜头、无声电影、克制的过渡以及连续的摄像机移动都是有效选择。
确立影片
确定受众、产品成果、时长、尺寸、所需的画面以及提供的素材。明确记录关于声音、摄像机运动、原生 UI 行为以及字幕的显式选择。解决缺失的关键要素;为附属样式选择合理的默认值。
在规划声明之前,先检查实际的界面和可用内容。保留可识别的字体、比例、颜色、标签和交互行为。使用经授权的真实素材;对合成演示数据做标记。记录宣称数量的来源和截图日期、计数的单位、过滤器以及去重方法。代表性子集不能证明全目录声明的有效性。
编写一个紧凑的镜头计划,包含每个镜头的帧区间、聚焦目标、动作/结果、可读区间、过渡以及可选的声音提示。包含结尾。当同时要求横屏和竖屏画幅时,分别规划;仅靠裁剪可能会丢失控件或标签。
选择相关指南
- 当规划摄像机运动、缓动、重叠过渡,或调整布局和光标目标时,阅读编排。
- 当实现动画、原生 CSS 行为、运动模糊或离散屏幕之间的硬切时,阅读确定性 UI。
- 当放置音频、优化导出或验证交付影片时,阅读声音与渲染。其视觉验证部分同样适用于无声作品。
在需要时,使用 scripts/motion.mjs 进行可复用的数学计算。它无依赖;可以复制或通过适当的相对路径导入目标项目。在集成之前,检查其导出的功能和参数约定。progress、expoIn、expoOut 和 track 处理时序;cameraAt 和 project 帮助评估合成的取景;selectState 选择剪切点;cueStartFrame 和 duckGain 辅助音频放置。该辅助文件是可选的,并且不会创建 Remotion 项目。本技能独立于任何仓库演示。
构建与检查
使动画成为帧和固定输入的纯函数。将离散屏幕的选择保留在时间采样之外,将连续动画钩子放在时间采样之内,并将音频放在时间采样之外。有关此区别及其交叉淡入淡出例外情况,请参阅确定性参考文档。
首先实现一个代表性的动作和交接。在重复模式之前,检查在可读区间、速度峰值、剪切边界和目标位置处的渲染帧。当动作不清晰时,改变时序、阶段或层级;装饰无法弥补缺失的因果关系。
摄像机运动应揭示上下文或引导注意力。如果连续移动符合需求,则对独立计时的平移和推拉轨道进行重叠,并检查其投影结果。移动父级并不能证明其焦点对象在屏幕上移动。当符合需求时,选择安静或完全静止的定格。颗粒感、呼吸感、抖动和永久运动都是可选的美学决定。
在任何布局编辑之后,重新评估后续流程、摄像机目标、光标命中点、滚动边界和取景。仅凭成功渲染并不能验证它们。
交付证据
使用项目固定的工具链渲染所需格式。检查风险过渡周围的连续帧,以及在播放可用的情况下以正常速度检查编码结果。验证文本、真实内容、光标对齐、裁剪、素材就绪性、时长和结局。对于声音,区分测量信号检查与实际试听。
报告输出路径、实际运行的命令/检查、素材限制以及未解决的缺陷。明确说明何时无法进行实时播放或音频试听。联系表支持视觉审查,但不能确定节奏或音频质量。仅在用户授权范围内外部发布或发送工作。