notifications-toasts

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Notification & Toast Animation Principles

通知与Toast动画原则

Apply Disney's 12 principles to notifications for attention-grabbing yet non-disruptive alerts.

将迪士尼的12条动画原则应用于通知，打造既吸引注意力又不干扰用户的提示效果。

Principles Applied to Notifications

适用于通知的动画原则

1. Squash & Stretch

1. 挤压与拉伸（Squash & Stretch）

Toast can compress slightly on entrance impact, then stretch back. Creates a "landing" feel as if it arrived from off-screen.

提示框（toast）在进入屏幕时可轻微压缩，随后恢复原状。营造出一种从屏幕外“着陆”的视觉感受。

2. Anticipation

2. 预备动作（Anticipation）

Before auto-dismiss, toast can contract slightly (95% scale) for 100ms. Signals imminent departure to user.

在自动消失前，提示框可轻微收缩至原大小的95%，持续100毫秒。以此向用户发出即将消失的信号。

3. Staging

3. 舞台呈现（Staging）

Notifications should appear in consistent locations. Use color and icons to stage importance: info, success, warning, error.

通知应出现在固定位置。通过颜色和图标区分重要性：信息类、成功类、警告类、错误类。

4. Straight Ahead & Pose to Pose

4. 逐帧动画与关键帧动画（Straight Ahead & Pose to Pose）

Define states: entering, visible, exiting, stacked. Clear keyframes for entrance, attention (if needed), and exit.

定义不同状态：进入、显示、退出、堆叠。为进入、（必要时的）吸引注意力、退出阶段设置清晰的关键帧。

5. Follow Through & Overlapping Action

5. 跟随动作与重叠动作（Follow Through & Overlapping Action）

Icon animates after container arrives (checkmark draws, bell wobbles). Progress bar for auto-dismiss follows toast entrance.

容器进入后再对图标进行动画处理（如绘制对勾、铃铛晃动）。自动消失的进度条需在提示框进入后再启动。

6. Ease In & Ease Out

6. 缓入缓出（Ease In & Ease Out）

Enter:

ease-out

(fast in, slow settle). Exit:

ease-in

(slow start, fast out).

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

for bounce.

进入动画：使用

ease-out

（快速进入，缓慢稳定）。退出动画：使用

ease-in

（缓慢开始，快速退出）。使用

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

实现弹跳效果。

7. Arcs

7. 弧线运动（Arcs）

Toasts sliding from corners can follow slight arc. Bell icons should swing in arc, not rotate rigidly.

从角落滑入的提示框可沿轻微弧线运动。铃铛图标应以弧线摆动，而非生硬旋转。

8. Secondary Action

8. 次要动作（Secondary Action）

While toast slides in (primary), shadow appears (secondary), icon animates (tertiary), progress bar starts (quaternary).

当提示框滑入（主要动作）时，阴影逐渐显现（次要动作）、图标开始动画（第三动作）、进度条启动（第四动作）。

9. Timing

9. 时间控制（Timing）

Toast enter: 200-300ms
Toast exit: 150-250ms
Auto-dismiss delay: 3000-5000ms
Attention pulse: 1000ms loop
Success checkmark draw: 300ms
Stack reorder: 200ms

提示框进入：200-300毫秒
提示框退出：150-250毫秒
自动消失延迟：3000-5000毫秒
注意力脉冲动画：1000毫秒循环
成功对勾绘制：300毫秒
堆叠重排：200毫秒

10. Exaggeration

10. 夸张表现（Exaggeration）

Error notifications can shake or pulse red. Critical alerts can be larger, bolder animations. Match urgency to importance.

错误通知可添加抖动或红色脉冲效果。严重警告可使用更大、更醒目的动画效果。根据紧急程度匹配动画强度。

11. Solid Drawing

11. 清晰造型（Solid Drawing）

Maintain consistent toast sizing. Icons should be crisp. Progress bars should be smooth (use transforms, not width).

保持提示框尺寸一致。图标应清晰锐利。进度条需平滑过渡（使用transform属性，而非width属性）。

12. Appeal

12. 吸引力（Appeal）

Smooth notifications feel polished. Jarring popups annoy users. A well-animated toast conveys professionalism.

流畅的通知动画会让产品显得精致。突兀的弹窗会惹恼用户。制作精良的提示框动画能体现专业性。

CSS Implementation

CSS实现

css

.toast {
  animation: toastEnter 300ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.toast.exiting {
  animation: toastExit 200ms ease-in forwards;
}

@keyframes toastEnter {
  from {
    opacity: 0;
    transform: translateY(-100%) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes toastExit {
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

.toast-progress {
  transform-origin: left;
  animation: progress 4000ms linear forwards;
}

css

.toast {
  animation: toastEnter 300ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.toast.exiting {
  animation: toastExit 200ms ease-in forwards;
}

@keyframes toastEnter {
  from {
    opacity: 0;
    transform: translateY(-100%) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes toastExit {
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

.toast-progress {
  transform-origin: left;
  animation: progress 4000ms linear forwards;
}

Key Properties

核心属性

```
transform
```
: translate, scale
```
opacity
```
: fade
```
animation
```
: entrance/exit sequences
```
transform-origin
```
: progress bars
```
box-shadow
```
: depth

```
transform
```
: 位移、缩放
```
opacity
```
: 淡入淡出
```
animation
```
: 进入/退出动画序列
```
transform-origin
```
: 进度条原点
```
box-shadow
```
: 视觉深度