用途
本准则用于指导界面中「吸引用户注意力」类动画的设计与实现，适用于通知徽章、新功能高亮、错误提示、促销横幅，以及任何以吸引注意力为目的的动画。其核心方法是将迪士尼的 12 项动画原则应用到聚焦性动效中。
主要能力（原则应用）
- 挤压与拉伸：通过缩放脉冲吸引注意力，1.0 → 1.1 → 1.0 的循环能捕捉周边视觉。
- 预备动作：在注意力动画前短暂停顿，先蓄势再释放。
- 舞台布置：把注意力元素放在用户能看到的位置，如角落徽章、行内高亮。
- 逐帧与姿势对姿势：设计注意力的不同状态——静止、激活/脉冲、已确认。
- 跟随与重叠：徽章先脉冲，然后计数更新，让注意力信号错开出现。
- 缓入缓出：脉冲使用缓入缓出，平滑振荡比尖锐弹跳更不刺眼。
- 弧线：抖动动画沿弧线轨迹，左右运动并带轻微垂直振荡。
- 次要动作：脉冲＋发光＋颜色变化可实现最大注意力（需谨慎使用）。
- 夸张：这是夸张大显身手的地方，缩放到 1.2、明亮色彩、大胆动效。
- 扎实绘图：注意力元素仍须感觉属于 UI 的一部分，不能悬浮或脱离。
- 吸引力：注意力应感觉像有帮助的通知，而不是咄咄逼人的要求。
使用方式（时机建议）
不同注意力类型的推荐时长与循环：
- 徽章脉冲：300ms，2-3 次，动画结束后停止。
- 通知圆点：2000ms，3 次，总计 6 秒。
- 新功能：500ms，2 次，保持含蓄。
- 错误抖动：400ms，1 次，无。
- 紧急警报：1000ms，无限，直到被关闭。
- 促销：3000ms，2 次，6 秒。
其他时机说明：单次注意力吸引 300-500ms；重复脉冲 2000-3000ms 一个周期；紧急脉冲 1000-1500ms 一个周期；衰减策略为 3-5 个周期或 10 秒后停止。
实现模式
资料提供了 CSS 与 JavaScript 示例，包括脉冲（pulse）、辉光（glow）、错误抖动（shake）、铃声摆动（ring），以及通过 CSS 类与 setTimeout 或 Web Animations API 在超时后自动停止注意力动画的模式。
关键规则与限制
- 同一时间最多显示 1 个注意力动画。
- 3-5 个周期后自动停止（最长 10 秒）。
- 提供永久关闭的方式。
- 绝不用于非必要内容。
- 遵循 prefers-reduced-motion：仅显示静态指示，不做动画。
- 紧急动画必须为无障碍提供音频/触觉替代方案。
适用场景
适用于需要在界面中引导用户注意特定元素（徽章、通知、错误、促销等）的前端与交互设计场景。