icons-badges

图标与徽章动画原则

将迪士尼的 12 条原则应用于小型 UI 元素，赋予其个性并提供有意义的反馈。

应用于图标的原则

1. 挤压与拉伸

点击“点赞”时，爱心图标可以挤压和拉伸。通知徽章出现时可以带着挤压效果弹跳，让小元素更有活力。

2. 预备动作

图标执行动作前，先短暂缩小（0.9，持续 50ms）。铃铛可以先向后倾斜，再向前摇响。为动作做好准备。

3. 演出布局

活动或重要图标应通过颜色、尺寸或动画突出显示。徽章使用对比鲜明的颜色来吸引注意。

4. 连续动作与关键帧动作

简单图标使用关键帧动作（两个状态）。复杂的图标动画（变形）可以使用连续动作，实现自然的过渡。

5. 跟随动作与重叠动作

用户交互停止后，铃铛仍会继续摇响。徽章数字会先更新，然后徽章的弹跳才会结束。多部分图标的动画应错开时序。

6. 缓入与缓出

图标悬停：ease-out。图标点击：ease-in-out。弹跳：使用 cubic-bezier(0.68, -0.55, 0.27, 1.55) 实现过冲效果。

7. 弧形运动

铃铛摇摆应沿钟摆弧线运动。刷新图标应沿真正的圆弧旋转。状态变化时，箭头可以沿弧线运动。

8. 次要动作

图标缩放（主要动作）时，颜色变化（次要动作），光晕脉冲（第三动作）。徽章弹跳时，徽章计数也会变化。

9. 时序

• 悬停缩放：100-150ms
• 点击反馈：50-100ms
• 徽章弹跳：300-400ms
• 铃铛摇响：400-600ms
• 状态脉冲：1500-2500ms
• 变形过渡：250-350ms

10. 夸张

庆祝类图标（彩纸、爱心）可以采用非常丰富的动画。功能性图标（菜单、关闭）则应保持含蓄。动画应与用途相符。

11. 扎实绘制

图标在动画的每一帧都必须保持清晰。保持描边一致。徽章数字在运动过程中应清晰易读。

12. 吸引力

动画图标能增添个性。弹跳的通知显得生动，脉冲的状态显得灵敏。细微之处也很重要。

CSS 实现

.icon-btn:hover .icon {
  transform: scale(1.15);
  transition: transform 150ms ease-out;
}

.icon-btn:active .icon {
  transform: scale(0.9);
  transition: transform 50ms ease-in;
}

.badge {
  animation: badgeBounce 400ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

@keyframes badgeBounce {
  0% { transform: scale(0); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.status-indicator {
  animation: pulse 2000ms ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.1); }
}

.bell-icon:hover {
  animation: ring 500ms ease-in-out;
}

@keyframes ring {
  0%, 100% { transform: rotate(0); }
  20%, 60% { transform: rotate(15deg); }
  40%, 80% { transform: rotate(-15deg); }
}

关键属性

• transform：缩放、旋转
• opacity：脉冲效果
• animation：复杂动画序列
• fill/stroke：SVG 颜色变化
• filter：光晕效果