UI 动效规划
Hypit UI 动效参考指南：从录屏拆解到逐段对照
结合 Tree 的 UI 动效帖子，整理参考测量、关键状态、转场节奏和并排验收方法，写出可执行的界面动效简报。
HypitAI 编辑整理 · 核对日期
先把动效参考变成可测量的要求
Tree 在 9 月 21 日介绍了借助 Hypit 工作流分析界面录屏、编写网页原型并与参考并排比较的思路。值得借鉴的是先测量状态和转场，再动手实现。原帖中的还原率百分比属于作者表述，本站未独立验证；下面的简报是本站整理的规划示例，不是已复现的工程。
先选成片，还是可交互原型
产品演示动画和可交互网页的验收条件不同。录屏能展示外观与节奏，却不能证明拖拽、键盘操作和应用状态真的可用。官方 Hypit Studio 文档说明的是视频编排预览及组件编辑能力，不能据此推导网页已达到生产可用标准。
准备一份参考资料包
提供有权使用的本地参考与自己的界面素材。填写实际测到的尺寸与时间，不把别人工程的像素值直接套过来。
| 文件 | 填写内容 | 检查重点 |
|---|---|---|
| reference.mp4 | 完整界面录屏 | 尺寸、时长、旋转方向、源帧时间 |
| states.csv | 状态编号、可见内容、触发动作、下一状态 | 每个转场都有开始与结束 |
| assets/ | 自己的图标、头像、文案和字体 | 比例正确，没有缺失占位图 |
| motion-notes.md | 锚点、边界、运动方向及未确定信息 | 实测值和估计值分开 |
| review.csv | 参考位置、原型位置、差异、修改动作 | 每条问题可复现 |
原创示例：头像选择器的四个状态
先确定下面的状态转换，再从自己的参考填写事件时间。稀疏抽帧可帮助寻找转场区间；要细化边界，应检查相邻原始帧，不能仅凭间隔较大的截图声称达到毫秒精度。
| 状态 | 可见结果 | 触发 | 验收 |
|---|---|---|---|
| 静止 | 已选头像，选择器关闭 | 初次加载或关闭完成 | 布局不跳动 |
| 展开 | 选项围绕头像进入 | 展开操作 | 起点、方向、缓动一致 |
| 选择 | 某个选项成为当前项 | 选择操作或演示时间点 | 高亮与当前头像对应 |
| 收起 | 选项退出，新头像保留 | 确认操作 | 没有残留高亮或突然跳变 |
可直接改写的 Agent 简报
这是本站编写的规划示例。先选择动画或交互原型，再替换文件名。
/hypit 分析 reference.mp4，规划一个 UI 动效项目。
交付类型：[产品演示动画 / 可交互网页原型，选一种]。
使用我提供的 assets/ 和 states.csv，列出缺失素材。
先报告尺寸、时长、源帧时间，再列关键状态和不确定的转场区间。
在参考坐标系测量几何关系，说明如何映射到目标视口。
先实现一个转场，提供起点同步的并排对照录屏。
把可观察差异记入 review.csv，不给没有依据的相似度百分比。
如果交付交互原型，再检查鼠标、触摸、键盘、焦点与连续操作。
交付源文件、预览、对照录屏和未解决问题。用相同比例和时间起点比较
并排播放前，对齐起始动作、视口、画幅和播放速率。分别看转场边界、中间位置和最终静止状态，再按正常速度完整播放。时间偏差与位置偏差分开记录；录屏对齐也不能替代真实交互测试。
补上录屏看不见的行为检查
如果目标是交互原型，试试连续展开、运动中取消、快速切换和窗口缩放，并检查键盘焦点与触摸目标。如果目标是视频，检查导出文件是否掉帧、裁切或结尾突停。把未解决差异和源工程一起保存。