动效设计原则

为什么动效设计需要规则

动效很容易写得“显眼”，却很难写得“合理”。一个界面里，状态变化看不出对应关系，元素移动缺少节奏，反馈看起来拖慢了操作，动画反而挡住了用户要完成的下一步。这类问题很少来自单个动画函数，更多来自一开始就没定义清楚：这个动画到底在服务什么。

技能如何工作

这个技能的核心逻辑是先问“为什么动”，再决定“怎么动”。工作流分为五步：

• 判定动效目的：把动画明确归入 反馈、引导 或 叙事 三类之一。
• 选择缓动曲线：进入强调 ease-out，退出强调 ease-in。
• 控制时长：区分微交互 100-200ms 与转场 300-500ms 两组数值。
• 编排入场：使用 stagger 延迟 50-80ms 拉开元素层次，避免整组同时弹出。
• 无障碍适配：必须响应 prefers-reduced-motion，为偏好减少动效的用户提供替代呈现。

输入与输出

输入是与动效原则相关的具体需求、问题描述和约束条件。输出是结构化的分析、方案或模板，并遵循 references/template.md 的格式，包含可直接套用的表格、清单与步骤。

适用边界与注意点

它不包含素材生成、渲染实现或代码自动修复能力。给出的时长、曲线和延迟是决策起点，需要结合具体场景检验；涉及复杂转场或品牌动效系统时，也应在模板上继续扩展，而不是照搬默认值。