deconstruct

拆解

这项技能会拆解一段动画或交互。它会为每个状态和事件命名，将每次转换拆分为每个属性各自的轨道，并把两者放在一个用户可以拖动时间轴并编辑的页面上。

记录每一帧

不凭感觉描述任何内容。每个状态都有名称，每次转换都有事件，每个动画属性都有起始值、目标值、延迟、时长和缓动。无法读取的值会标记为 Not verified，绝不估算。

读取计算后的值并提供并排对照证据属于 match。强制组件状态保持展开属于 lab。打开结果属于 verify。判断运动的数值是否正确属于 motion。

1. 捕捉真实运动

打开源内容：代码、实时页面或录屏。读取关键帧、转换和弹簧配置，或者以较低播放速度逐帧查看。只看一次就进行拆解，属于 deconstruct-capture-the-source。

2. 为状态和事件命名

列出元素可以停留的状态，以及使其在状态间转换的事件，例如按下、松开、解析完成和超时。将它们写成包含状态、进入条件和离开条件的表格。像“它缩小，然后旋转”这样的描述属于 deconstruct-name-the-states。

3. 将每次转换拆分为轨道

为每个动画属性单独创建轨道：缩放、不透明度、模糊、宽度、颜色、图标和标签。每条轨道都列出起始值、目标值、延迟、时长和缓动。“大约 300ms”属于 deconstruct-every-property。

保留原样的曲线。弹簧仍应是弹簧，并保留其刚度、阻尼和质量，或其回弹和时长。将弹簧压平成猜测的贝塞尔曲线，属于 deconstruct-keep-the-curve。

4. 用一个时钟驱动动画

将元素渲染为单一时间值的纯函数。这样，拖动时间轴、暂停和循环播放时，同一时间点都会显示相同的帧。只能重播 CSS、无法在转换过程中停止的查看器，属于 deconstruct-one-clock。

5. 构建查看器

将 viewer.html 复制到重建页面旁，作为仅供开发使用的页面；按照其头部注释所示的结构，在旁边编写 timeline.js，然后打开它。页面会显示元素、状态机，以及每条轨道各自的时间轴和实时值。

此查看器随技能一同提供，因此只需编写数据即可。自行编写标记或样式的页面属于 deconstruct-shipped-viewer。查看器会突出显示当前状态，点击某个状态即可跳转到该状态。保留它的时间轴拖动条、播放、暂停和 0.25× 速度。没有时间轴拖动条的时间轴属于 deconstruct-scrub-the-timeline。

检查器可以设置起始值、目标值、延迟、时长和缓动，预览也会随之更新。拖动片段即可更改其延迟。拖动片段的右边缘即可更改其时长。拖动事件标记即可在所有轨道上移动该事件。只在回复中更改时间，而不是直接编辑片段，属于 deconstruct-edit-the-segment。

捏合，或按住 Cmd 并滚动，可缩放时间轴。横向滚动可平移，Fit 会恢复显示完整时长。拖动滑块，预览会随之更新。拖动贝塞尔曲线控制柄，或从缓动菜单中选择关键字。

片段、图层和事件会彼此吸附，也会吸附到播放头。按住 Alt 拖动可禁用吸附。按住 Shift 并单击片段，可将它们一起移动。

弹簧的长度由其曲线决定。更改刚度、阻尼和质量即可更改长度；对于回弹和时长弹簧，也可以拖动边缘。

Cmd+Z 可撤销任何编辑。已编辑的字段会显示一个圆点和 Revert。Original 会按加载时的状态播放时间轴，以便将编辑结果与源内容进行比较。

6. 慢速对比

以 0.25× 速度并排播放原版和重建版本。将 recording 设为原版的录制内容，查看器会在同一时钟下并排播放录制内容和预览。指出每一处偏移的帧。只在全速下检查的拆解结果属于 deconstruct-compare-slowed。

按 I 和 O 可循环播放一个范围，例如从按下到松开。洋葱皮会将上一帧叠加在预览上。擦除会用分隔线将录制内容叠加在预览上。裁剪录制内容，使其与预览帧一致。

7. 交接数据

timeline.js 是交接内容：状态表和轨道合在一个对象中。重建版本会导入该文件，而不是复制一份，因此查看器和交付的动画使用相同的值。只存在于回复中的时间线属于 deconstruct-timeline-as-data。Copy Timeline 会将打开的页面写回该对象。将其粘贴覆盖 timeline.js。如果剪贴板被阻止，提示消息会显示 Copy Failed。只留在打开页面中的编辑属于 deconstruct-copy-the-timeline。发布前，将查看器限制为仅在开发环境中使用，或将其删除，并保留 timeline.js。

对照项

每项检查都由一对内容组成。错误做法旁边列出替代做法。

规则	错误做法	替代做法
deconstruct-capture-the-source	只看一遍就写拆解结果	阅读代码，并以 0.1× 速度逐帧查看
deconstruct-name-the-states	“它先缩小，然后旋转”	根据事件标注 Idle、Pressed、Copying 和 Copied
deconstruct-every-property	“大约 300ms”	在 400ms 时，将 Scale 从 1 变为 0.96，时长 120ms，使用 ease-out
deconstruct-keep-the-curve	将弹簧效果近似为 ease-out	按原样使用 stiffness: 400, damping: 30
deconstruct-one-clock	CSS 重播按钮	根据同一个 t 计算每一帧
deconstruct-scrub-the-timeline	只有循环预览	提供拖动条、播放、暂停和 0.25× 速度
deconstruct-shipped-viewer	从头编写查看器页面	复制 viewer.html，只编写 timeline.js
deconstruct-compare-slowed	只在全速下检查一次	以 0.25× 速度并排对比原版和重建版本
deconstruct-timeline-as-data	在回复中描述时间线	使用由重建版本导入的 timeline.js
deconstruct-edit-the-segment	“将按下时长设为 80ms”	在片段上编辑时长
deconstruct-copy-the-timeline	将编辑留在打开的页面中	粘贴内容并覆盖 timeline.js

报告

严重级别。 HIGH 表示未打开源文件就完成拆解，或缺少状态。MEDIUM 表示估算了时长、简化了曲线、查看器无法拖动时间线、查看器是手写的，或编辑只留在页面中。LOW 表示在慢速检查时发现并指出了偏移。

格式。 每个根本原因列出一条发现：

file:line - [rule-id] what is wrong

然后提供 Rule | Count | Severity 汇总。只要仍有任何 HIGH，就标记为 Block；否则标记为 Approve。将所有无法从源文件中读取的值标记为 Not verified。