icons-badges

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Icon & Badge Animation Principles

图标与徽章动画原则

Apply Disney's 12 principles to small UI elements for personality and meaningful feedback.

将迪士尼12项动画原则应用于小型UI元素，打造富有个性且具备实际意义的交互反馈。

Principles Applied to Icons

适用于图标的动画原则

1. Squash & Stretch

1. 挤压与拉伸

Heart icons can squash/stretch on "like" tap. Notification badges can bounce with squash on arrival. Adds life to small elements.

点赞点击时爱心图标可产生挤压/拉伸效果。通知徽章到达时可伴随挤压弹跳效果，为小型元素注入活力。

2. Anticipation

2. 预备动作

Before icon action, brief scale down (0.9) for 50ms. Bell can tilt back before ringing forward. Prepares for action.

在图标触发动作前，先执行50毫秒的小幅缩小（缩放到0.9倍）。铃铛图标在向前响铃前可先向后倾斜，为即将发生的动作做铺垫。

3. Staging

3. 舞台呈现

Active/important icons should be visually prominent: color, size, or animation. Badges use contrasting colors to stand out.

活跃/重要图标应在视觉上更突出：可通过颜色、大小或动画实现。徽章使用对比色以凸显自身。

4. Straight Ahead & Pose to Pose

4. 逐帧动画与关键帧动画

Simple icons use pose-to-pose (two states). Complex icon animations (morphing) can use straight-ahead for organic transitions.

简单图标采用关键帧动画（两种状态）。复杂图标动画（形变效果）可采用逐帧动画实现更自然的过渡。

5. Follow Through & Overlapping Action

5. 跟随动作与重叠动作

Bell ring continues after user interaction stops. Badge number updates before badge bounce settles. Multi-part icons offset timing.

用户交互结束后铃铛响铃动画仍会持续。徽章弹跳效果结束前数字就已完成更新。多部件图标可错开动画时间。

6. Ease In & Ease Out

6. 缓入缓出

Icon hover:

ease-out

. Icon click:

ease-in-out

. Bounce:

cubic-bezier(0.68, -0.55, 0.27, 1.55)

for overshoot.

图标悬停：

ease-out

。图标点击：

ease-in-out

。弹跳效果：使用

cubic-bezier(0.68, -0.55, 0.27, 1.55)

实现超出回弹效果。

7. Arcs

7. 弧形运动

Bell swinging follows pendulum arc. Refresh icons spin in true circular arcs. Arrows can arc during state changes.

铃铛摆动遵循钟摆弧形轨迹。刷新图标按正圆形轨迹旋转。箭头在状态切换时可沿弧形运动。

8. Secondary Action

8. 次要动作

While icon scales (primary), color changes (secondary), glow pulses (tertiary). Badge count changes while badge bounces.

图标缩放（主动作）进行时，可同步触发颜色变化（次要动作）、光晕脉动（第三动作）。徽章弹跳时同步更新计数。

9. Timing

9. 时长控制

Hover scale: 100-150ms
Click feedback: 50-100ms
Badge bounce: 300-400ms
Bell ring: 400-600ms
Status pulse: 1500-2500ms
Morph transition: 250-350ms

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

10. Exaggeration

10. 夸张表现

Celebratory icons (confetti, hearts) can be very animated. Functional icons (menu, close) should be subtle. Match purpose.

庆祝类图标（彩屑、爱心）的动画可以更活泼。功能性图标（菜单、关闭）的动画应保持克制，符合使用场景定位。

11. Solid Drawing

11. 扎实绘制

Icons must remain crisp at all animation frames. Maintain stroke consistency. Badge numbers should be legible during motion.

图标在所有动画帧中都必须保持清晰。维持描边粗细一致。徽章数字在运动过程中要保证易读性。

12. Appeal

12. 吸引力

Animated icons add personality. A bouncing notification feels alive. A pulsing status feels responsive. Small touches matter greatly.

动画图标可增添个性。弹跳的通知给人鲜活感。脉动的状态给人响应灵敏的感觉。微小的细节能带来极大的体验提升。

CSS Implementation

CSS实现

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); }
}

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); }
}

Key Properties

核心属性

```
transform
```
: scale, rotate
```
opacity
```
: pulse effects
```
animation
```
: complex sequences
```
fill
```
/
```
stroke
```
: SVG color changes
```
filter
```
: glow effects

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