deconstruct

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Deconstruct

This skill takes an animation or interaction apart. It names every state and event, splits each transition into one track per property and puts both on a page the user can scrub.

该 skill 会拆解动画或交互。它为每个 state 和 event 命名，将每次 transition 按属性拆分为一条独立 track，并把 state machine 与各条 track 放在一个可供用户拖动浏览的页面上。

Every frame accounted for

每一帧都有据可查

Nothing is described by feel. Every state has a name, every transition has an event and every animated property has its from, to, delay, duration and easing. A value that could not be read is marked

Not verified

, never estimated.

Reading computed values and the side-by-side proof belong to

match

. Forcing component states open belongs to

lab

. Opening the result runs in

verify

. Whether the motion's values are right belongs to

motion

不凭感觉描述任何内容。每个 state 都有名称，每次 transition 都有 event，每个动画属性都记录其 from、to、delay、duration 和 easing。无法读取的值标为

Not verified

，绝不估算。

读取 computed values 以及并排对照验证属于

match

。强制打开 component states 属于

lab

。打开结果这一步在

verify

中执行。motion 的数值是否正确属于

motion

。

1. Capture the real motion

1. 捕获真实 motion

Open the source: the code, the live page or a recording. Read keyframes, transitions and spring configs, or step through frames at reduced playback speed. A breakdown from one viewing is

deconstruct-capture-the-source

打开 source：可以是代码、实时页面或录制内容。读取 keyframes、transitions 和 spring 配置，或以降低的播放速度逐帧查看。仅观看一次就做出的拆解属于

deconstruct-capture-the-source

。

2. Name the states and events

2. 命名 states 和 events

List the states the element can rest in and the events that move it between them, such as press, release, resolve and timeout. Write them as a table of state, entered on and left on. A sentence like "it shrinks, then spins" is

deconstruct-name-the-states

列出 element 可以停留的所有 state，以及在 state 之间触发切换的 event，例如 press、release、resolve 和 timeout。将它们写成一张包含 state、entered on 和 left on 的表格。像“它先缩小，然后旋转”这样的描述属于

deconstruct-name-the-states

。

3. Split each transition into tracks

3. 将每次 transition 拆分为 tracks

Give every animated property its own track: scale, opacity, blur, width, colour, icon and label. Each track lists from, to, delay, duration and easing. "About 300ms" is

deconstruct-every-property

Keep the curve as written. A spring stays a spring with its stiffness, damping and mass, or its bounce and duration. A spring flattened into a guessed bezier is

deconstruct-keep-the-curve

为每个动画属性设置一条独立 track：scale、opacity、blur、width、colour、icon 和 label。每条 track 列出 from、to、delay、duration 和 easing。“About 300ms”这样的描述属于

deconstruct-every-property

。

保持 curve 的原有写法。spring 仍然是 spring，并保留其 stiffness、damping 和 mass，或 bounce 和 duration。将 spring 压平成猜测的 bezier 属于

deconstruct-keep-the-curve

。

4. Drive it from one clock

4. 使用同一个 clock 驱动

Render the element as a pure function of one time value. Scrubbing, pausing and looping then show the same frame for the same time. A viewer that replays CSS and cannot stop mid-transition is

deconstruct-one-clock

将 element 渲染为单个时间值的 pure function。进行 scrub、pause 和 loop 时，相同时间应显示相同 frame。只能重放 CSS、无法在 transition 中途停止的 viewer 属于

deconstruct-one-clock

。

5. Build the viewer

5. 构建 viewer

Copy viewer.html beside the rebuild as a development-only page, write

timeline.js

next to it in the shape its header comment shows and open it. It shows the element, the state machine and one lane per track with its live value.

The viewer ships with the skill, so write data only. A page with its own markup or styles is

deconstruct-shipped-viewer

. It highlights the active state, and clicking a state seeks to it. Its scrubber, play, pause and 0.25× stay in. A timeline with no scrubber is

deconstruct-scrub-the-timeline

将 viewer.html 复制到 rebuild 旁边，作为仅用于开发的页面；按照其 header comment 指定的结构，在旁边编写

timeline.js

，然后打开。它会显示 element、state machine，以及每条 track 对应的一条 lane，并显示其实时值。

viewer 随 skill 一同提供，因此只需编写 data。自带 markup 或 styles 的页面属于

deconstruct-shipped-viewer

。它会高亮当前 state，点击某个 state 即可跳转到该状态。它的 scrubber、play、pause 和 0.25× 倍速功能都会保留。没有 scrubber 的 timeline 属于

deconstruct-scrub-the-timeline

。

6. Compare at slow speed

6. 以慢速进行对比

Play the original and the rebuild side by side at 0.25×. Set

recording

to a capture of the original, and the viewer plays it beside the preview on the same clock. Name every frame that drifts. A breakdown checked only at full speed is

deconstruct-compare-slowed

以 0.25× 倍速并排播放 original 和 rebuild。将

recording

设置为 original 的 capture，viewer 会在同一个 clock 下与 preview 一同播放。指出每一个出现 drift 的 frame。仅按 full speed 检查的拆解属于

deconstruct-compare-slowed

。

7. Hand back the data

7. 交回数据

timeline.js

is the hand-back: the state table and the tracks as one object. The rebuild imports that file rather than a copy, so the viewer and the shipped motion read the same values. A timeline that lives only in the reply is

deconstruct-timeline-as-data

. Gate the viewer to development or delete it before release, and keep

timeline.js

timeline.js

是交付物：它将 state table 和 tracks 放在同一个 object 中。rebuild 应导入此文件而不是进行复制，这样 viewer 和最终 motion 就会读取相同的 values。只在回复中描述 timeline 属于

deconstruct-timeline-as-data

。将 viewer 限制为仅供 development 使用，或在 release 前将其删除，同时保留

timeline.js

。

The pair

成对呈现

Every check is a pair. The broken line sits beside the line that replaces it.

Rule	Broken	Replacement
`deconstruct-capture-the-source`	A breakdown from watching it once	The code read and frames stepped at 0.1×
`deconstruct-name-the-states`	"It shrinks, then spins"	Idle, Pressed, Copying and Copied with their events
`deconstruct-every-property`	"About 300ms"	Scale `1` to `0.96` , 120ms, ease-out, at 400ms
`deconstruct-keep-the-curve`	A spring approximated as `ease-out`	`stiffness: 400, damping: 30` as written
`deconstruct-one-clock`	A CSS replay button	Every frame computed from one `t`
`deconstruct-scrub-the-timeline`	A looping preview only	A scrubber, play, pause and 0.25×
`deconstruct-shipped-viewer`	A viewer page written from scratch	`viewer.html` copied, only `timeline.js` written
`deconstruct-compare-slowed`	Checked once at full speed	Original and rebuild side by side at 0.25×
`deconstruct-timeline-as-data`	A timeline described in the reply	`timeline.js` , imported by the rebuild

每次检查都由两项组成：有问题的一行紧挨着其替代方案。

规则	有问题的方式	替代方案
`deconstruct-capture-the-source`	仅观看一次便得出拆解	读取代码，并以 0.1× 倍速逐帧查看
`deconstruct-name-the-states`	“它先缩小，然后旋转”	Idle、Pressed、Copying 和 Copied，以及各自的 events
`deconstruct-every-property`	“About 300ms”	Scale 从 `1` 到 `0.96` ，120ms，ease-out，在 400ms 时触发
`deconstruct-keep-the-curve`	将 spring 近似为 `ease-out`	按原样保留 `stiffness: 400, damping: 30`
`deconstruct-one-clock`	通过 CSS 重播的按钮	每一帧均由同一个 `t` 计算得出
`deconstruct-scrub-the-timeline`	只有循环播放的 preview	提供 scrubber、play、pause 和 0.25× 倍速
`deconstruct-shipped-viewer`	从零编写 viewer 页面	复制 `viewer.html` ，仅编写 `timeline.js`
`deconstruct-compare-slowed`	仅按 full speed 检查一次	将 original 和 rebuild 以 0.25× 倍速并排对比
`deconstruct-timeline-as-data`	在回复中描述 timeline	使用 `timeline.js` ，并由 rebuild 导入

Reporting

报告

Severity.

HIGH

is a breakdown made without opening the source, or a missing state.

MEDIUM

is an estimated timing, a flattened curve, a viewer that cannot scrub or a hand-written viewer.

LOW

is drift found and named at slow speed.

Format. One finding per root cause:

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

Then a

Rule | Count | Severity

summary.

Block

when any

HIGH

remains,

Approve

otherwise. Mark every value you could not read from the source as

Not verified

严重程度。 未打开 source 就完成拆解，或缺少 state，属于

HIGH

。使用估算的 timing、将 curve 压平、viewer 无法 scrub，或手写 viewer，属于

MEDIUM

。在慢速下发现并指出 drift，属于

LOW

。

格式。 每个 root cause 输出一条 finding：

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

随后提供

Rule | Count | Severity

汇总。如果仍有任何

HIGH

，则判定为

Block

；否则判定为

Approve

。将所有无法从 source 读取的值标为

Not verified

。