animation-principles

动效原则

本技能会在选定时间函数后，检查动效如何编排，包括按压反馈、形变、交错和焦点。

每项检查都由一对内容组成：问题代码旁边是替代它的代码。

以下按压缩放、挤压和交错幅度均为精确值。控件缺少按压反馈属于一项发现。项目使用统一的、接近 0.98 的缩放则不属于问题。曲线、300ms 上限和上下文菜单入场效果属于 timing-functions。退出时卸载组件属于 exit-animations。

适用场景

在添加或审查控件、列表、叠加层或入场效果的动效时使用本技能。如果问题是弹簧还是缓动，请先使用 timing-functions。如果组件未能从组件树中移除，请使用 exit-animations。

1. 阅读范围内的动效

阅读用户指定的文件。如果用户没有指定文件，请询问要审查哪些界面。记录每个带动效的元素，以及它属于按压、列表入场、叠加层还是背景装饰。

2. 检查编排

相似控件应使用相同的时长。主按钮使用 200ms、次按钮使用 150ms，属于 timing-consistent。

交互控件需要有激活状态缩放。规定的按压缩放值为 0.98。挤压和拉伸应控制在 0.95 到 1.05 之间。whileTap 使用 0.8 属于 physics-subtle-deformation。

每个项目的交错时间应低于 50ms。staggerChildren: 0.03 符合要求。0.15 属于 physics-no-excessive-stagger。

同一时间只能有一个元素成为主要动效焦点。这属于 staging-one-focal-point。模态框或对话框应调暗其后方的内容，例如 background: var(--black-a6)，这属于 staging-dim-background。可能绘制在同级元素下方的工具提示或叠加层属于 staging-z-index-hierarchy。

用于过冲的弹簧、缓动曲线和 300ms 上限属于 timing-functions。报告时长问题时请引用该技能。此处不要重述其曲线表。

3. 报告并停止

写出发现，然后提供汇总表。除非用户要求修复，否则报告时不要重新调整动效样式。

问题代码与替代代码

每项检查都由一对内容组成：问题代码旁边是替代它的代码。

规则	问题代码	替代代码
timing-consistent	.button-primary { transition: 200ms } 和 .button-secondary { transition: 150ms }	两个控件都使用 transition: 200ms
physics-active-state	.button:hover { background: var(--gray-3) } 且没有 :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	两个同级元素都使用 animate={{ scale: 1.1 }}	仅一个元素负责入场效果
staging-dim-background	.overlay { background: transparent }	.overlay { background: var(--black-a6) }
staging-z-index-hierarchy	.tooltip {}，没有层叠设置	.tooltip { z-index: 50 }

报告

严重性。 使用本技能中的分级标准。不要将偏好问题升级为 HIGH。

验证。 阅读范围内文件中声明的值。浏览器验证为可选项。将无法执行的检查标记为 Not verified。

格式。 每个根本原因对应一项发现：

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

然后提供汇总：

规则	数量	严重性

只要仍有任何 HIGH，就标记为 Block。否则标记为 Approve，并在表格中保留较低级别的问题。绝不要对未阅读的文件标记 Approve。没有需要报告的问题时，请写明“没有可执行的发现”，并列出尚未验证的内容。