Back to Details

animation-principles

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Animation principles

动画原则

This skill reviews how motion is staged once the timing function is chosen. It checks press feedback, deformation, stagger and focus.
Every check is a pair. The broken line sits beside the line that replaces it.
Press scale, squash and stagger amounts below are exact. A project that omits press feedback on a control is a finding. A project that uses one consistent scale near 
0.98
is not. Curves, the 
300ms
cap and context-menu entrances belong to 
timing-functions
. Exit mounting belongs to 
exit-animations
.
此 skill 审查在确定 timing function 后如何编排动效。它检查按压反馈、形变、stagger 和视觉焦点。
每项检查均成对呈现。错误写法与替代写法并排展示。
下方给出的按压缩放、挤压与拉伸、stagger 数值均为精确值。如果控件缺少按压反馈，则构成一个问题。如果项目统一使用接近 
0.98
的缩放值，则不构成问题。曲线、
300ms
上限和 context-menu 入场属于 
timing-functions
。退出挂载属于 
exit-animations
。

When to use

使用时机

Use this when adding or reviewing animation on controls, lists, overlays or entrances. Use 
timing-functions
first when the question is spring versus easing. Use 
exit-animations
when a component fails to leave the tree.
在为控件、列表、overlay 或入场效果添加或审查动画时使用此 skill。如果问题是使用 
spring
还是 
easing
，请先使用 
timing-functions
。如果组件未能离开渲染树，请使用 
exit-animations
。

1. Read the motion in scope

1. 阅读范围内的动效

Read the files the user named. If none are named, ask which surfaces to review. Note each animated element and whether it is a press, a list entrance, an overlay or background decoration.
读取用户指定的文件。如果未指定任何文件，则询问需要审查哪些界面。记录每个带动画的元素，并注明它属于按压效果、列表入场、overlay 还是背景装饰。

2. Check staging

2. 检查编排

Similar controls share one duration. A primary button at 
200ms
and a secondary button at 
150ms
is 
timing-consistent
.
An interactive control needs an active scale. The published press scale is 
0.98
. Squash and stretch stay inside 
0.95
to 
1.05
. 
whileTap
of 
0.8
is 
physics-subtle-deformation
.
Stagger stays under 
50ms
per item. 
staggerChildren: 0.03
passes. 
0.15
is 
physics-no-excessive-stagger
.
Only one element animates prominently at a time. That is 
staging-one-focal-point
. A modal or dialog dims what is behind it, as in 
background: var(--black-a6)
, which is 
staging-dim-background
. A tooltip or overlay that can paint underneath siblings is 
staging-z-index-hierarchy
.
Springs used for overshoot, ease curves and the 
300ms
cap are 
timing-functions
. Cite that skill beside a duration finding. Do not restate its curve table here.
相似的控件使用相同的持续时间。主按钮为 
200ms
、次按钮为 
150ms
，属于 
timing-consistent
。
交互式控件需要具备激活态缩放。规范规定的按压缩放值为 
0.98
。挤压与拉伸应保持在 
0.95
到 
1.05
之间。
whileTap
设为 
0.8
属于 
physics-subtle-deformation
。
每项的 stagger 应低于 
50ms
。
staggerChildren: 0.03
通过检查。
0.15
属于 
physics-no-excessive-stagger
。
同一时间只能有一个元素被突出地设置动画，这属于 
staging-one-focal-point
。modal 或 dialog 应通过类似 
background: var(--black-a6)
的方式弱化后方内容，这属于 
staging-dim-background
。如果 tooltip 或 overlay 可能绘制在兄弟节点下方，则属于 
staging-z-index-hierarchy
。
用于产生超调的 
spring
、
ease
曲线和 
300ms
上限均属于 
timing-functions
。发现持续时间问题时，请在旁边引用该 skill。不要在此重复其曲线表。

3. Report and stop

3. 报告并停止

Write the findings, then the summary table. Do not restyle the motion while reporting unless the user asked for a fix.
先写出发现的问题，然后给出汇总表。除非用户要求修复，否则报告时不要调整动效样式。

The pair

成对检查

Every check is a pair. The broken line sits beside the line that replaces it.
RuleBrokenReplacement
timing-consistent
.button-primary { transition: 200ms }
and 
.button-secondary { transition: 150ms }
Both controls at 
transition: 200ms
physics-active-state
.button:hover { background: var(--gray-3) }
and no 
:active
.button:active { transform: scale(0.98) }
physics-subtle-deformation
whileTap={{ scale: 0.8 }}
whileTap={{ scale: 0.98 }}
physics-no-excessive-stagger
staggerChildren: 0.15
staggerChildren: 0.03
staging-one-focal-point
Two siblings both 
animate={{ scale: 1.1 }}
One element carries the entrance
staging-dim-background
.overlay { background: transparent }
.overlay { background: var(--black-a6) }
staging-z-index-hierarchy
.tooltip {}
with no stacking
.tooltip { z-index: 50 }
每项检查均成对呈现。错误写法与替代写法并排展示。
规则错误写法替代写法
timing-consistent
.button-primary { transition: 200ms }
and 
.button-secondary { transition: 150ms }
Both controls at 
transition: 200ms
physics-active-state
.button:hover { background: var(--gray-3) }
and no 
:active
.button:active { transform: scale(0.98) }
physics-subtle-deformation
whileTap={{ scale: 0.8 }}
whileTap={{ scale: 0.98 }}
physics-no-excessive-stagger
staggerChildren: 0.15
staggerChildren: 0.03
staging-one-focal-point
Two siblings both 
animate={{ scale: 1.1 }}
One element carries the entrance
staging-dim-background
.overlay { background: transparent }
.overlay { background: var(--black-a6) }
staging-z-index-hierarchy
.tooltip {}
with no stacking
.tooltip { z-index: 50 }

Reporting

报告

Severity. Use the ladder in this skill. Do not raise a preference to 
HIGH
.
Verification. Read the declared values in the files in scope. A browser is optional. Mark any check you could not run as 
Not verified
.
Format. One finding per root cause:
file:line - [rule-id] what is wrong
Then a summary:
RuleCountSeverity
Block
when any 
HIGH
remains. 
Approve
otherwise, and leave lesser rows in the table. Never 
Approve
a file you did not read. With nothing to report, say "No actionable findings" and list what was not verified.
严重程度。 使用此 skill 中的分级阶梯。不要将偏好项提升为 
HIGH
。
验证。 读取范围内文件中声明的值。浏览器验证是可选的。将任何无法执行的检查标记为 
Not verified
。
格式。 每个根本原因只写一个问题：
file:line - [rule-id] what is wrong
然后给出汇总：
规则数量严重程度
只要仍有任何 
HIGH
，就判定为 
Block
；否则判定为 
Approve
，并在表中保留严重程度较低的项。绝不能对未读取的文件给出 
Approve
。如果没有需要报告的问题，请说“无可执行的问题”，并列出未验证的内容。