Back to Details

attention-grabbers

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Attention-Grabbing Animations

吸引注意力的动画

Apply Disney's 12 principles to focus-drawing motion.
将迪士尼的12项动画原则应用于吸引注意力的动效设计。

Principle Application

原则应用

Squash & Stretch: Pulsing scale draws attention. 1.0 → 1.1 → 1.0 cycle catches peripheral vision.
Anticipation: Brief pause before attention animation. Let it build then release.
Staging: Position attention elements where users will see them. Corner badges, inline highlights.
Straight Ahead vs Pose-to-Pose: Design attention states: rest, active/pulsing, acknowledged.
Follow Through & Overlapping: Badge pulses, then count updates. Stagger the attention signals.
Slow In/Slow Out: Ease in/out on pulses. Smooth oscillation is less jarring than sharp bounces.
Arcs: Shake animations follow arc patterns. Left-right with slight vertical oscillation.
Secondary Action: Pulse + glow + color shift for maximum attention (use sparingly).
Timing:
  • Single attention grab: 300-500ms
  • Repeating pulse: 2000-3000ms cycle
  • Urgent pulse: 1000-1500ms cycle
  • Decay: Stop after 3-5 cycles or 10 seconds
Exaggeration: This is where exaggeration shines. Scale to 1.2, bright colors, bold motion.
Solid Drawing: Attention elements must still feel part of the UI, not floating or detached.
Appeal: Attention should feel like helpful notification, not aggressive demand.
Squash & Stretch：通过脉冲式缩放吸引注意力。1.0 → 1.1 → 1.0的循环能捕捉用户的周边视觉。
Anticipation：在注意力动画开始前设置短暂停顿，先铺垫再触发。
Staging：将注意力元素放置在用户易见的位置，如角落徽章、行内高亮区域。
Straight Ahead vs Pose-to-Pose：设计注意力元素的不同状态：静止、活跃/脉冲、已确认。
Follow Through & Overlapping：徽章脉冲后再更新计数，错开注意力信号的触发时机。
Slow In/Slow Out：脉冲动效采用缓入缓出。平滑的振荡比生硬的弹跳更不突兀。
Arcs：抖动动画遵循弧形轨迹，左右晃动时伴随轻微的上下振荡。
Secondary Action：结合脉冲、发光和颜色变化以最大化注意力吸引效果（需谨慎使用）。
Timing:
  • 单次注意力吸引：300-500ms
  • 重复脉冲：2000-3000ms周期
  • 紧急脉冲：1000-1500ms周期
  • 自动停止：3-5个周期后或10秒后停止
Exaggeration：这是夸张手法的绝佳应用场景。缩放至1.2倍、使用明亮色彩、大胆的动效。
Solid Drawing：注意力元素仍需融入UI，避免显得悬浮或脱节。
Appeal：注意力提示应是友好的通知，而非强制的干扰。

Timing Recommendations

时长推荐

Attention TypeDurationCyclesDecay
Badge Pulse300ms2-3Stop after animation
Notification Dot2000ms36 seconds total
New Feature500ms2Stay subtle
Error Shake400ms1None
Urgent Alert1000msinfiniteUntil dismissed
Promotional3000ms26 seconds
注意力类型时长循环次数自动停止
徽章脉冲300ms2-3次动画结束后停止
通知点2000ms3次总计6秒后停止
新功能提示500ms2次保持低调
错误抖动400ms1次无
紧急警报1000ms无限循环直至用户关闭
推广内容3000ms2次6秒后停止

Implementation Patterns

实现示例

css
/* Pulse attention */
.badge-pulse {
  animation: pulse 2000ms ease-in-out 3;
}

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

/* Subtle glow */
.glow-attention {
  animation: glow 2000ms ease-in-out 3;
}

@keyframes glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
  50% { box-shadow: 0 0 0 8px rgba(59, 130, 246, 0.3); }
}

/* Error shake */
.shake {
  animation: shake 400ms ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}

/* Ring animation (notification) */
.ring {
  animation: ring 2500ms ease-in-out 2;
}

@keyframes ring {
  0%, 100% { transform: rotate(0); }
  10%, 30% { transform: rotate(10deg); }
  20%, 40% { transform: rotate(-10deg); }
  50%, 100% { transform: rotate(0); }
}
css
/* Pulse attention */
.badge-pulse {
  animation: pulse 2000ms ease-in-out 3;
}

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

/* Subtle glow */
.glow-attention {
  animation: glow 2000ms ease-in-out 3;
}

@keyframes glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
  50% { box-shadow: 0 0 0 8px rgba(59, 130, 246, 0.3); }
}

/* Error shake */
.shake {
  animation: shake 400ms ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}

/* Ring animation (notification) */
.ring {
  animation: ring 2500ms ease-in-out 2;
}

@keyframes ring {
  0%, 100% { transform: rotate(0); }
  10%, 30% { transform: rotate(10deg); }
  20%, 40% { transform: rotate(-10deg); }
  50%, 100% { transform: rotate(0); }
}

Attention Budget

注意力预算控制

javascript
// Auto-stop attention after timeout
const attention = element.animate([
  { transform: 'scale(1)' },
  { transform: 'scale(1.15)' },
  { transform: 'scale(1)' }
], {
  duration: 2000,
  iterations: 3
});

// Or with CSS
setTimeout(() => {
  element.classList.remove('attention');
}, 6000);
javascript
// Auto-stop attention after timeout
const attention = element.animate([
  { transform: 'scale(1)' },
  { transform: 'scale(1.15)' },
  { transform: 'scale(1)' }
], {
  duration: 2000,
  iterations: 3
});

// Or with CSS
setTimeout(() => {
  element.classList.remove('attention');
}, 6000);

Key Rules

核心规则

  1. Maximum 1 attention animation visible at a time
  2. Auto-stop after 3-5 cycles (10 seconds max)
  3. Provide way to permanently dismiss
  4. Never use for non-essential content
  5. prefers-reduced-motion
    : static indicator only, no animation
  6. Urgent animations must have audio/haptic alternative for accessibility
  1. 同一时间最多显示1个注意力动画
  2. 3-5个周期后自动停止（最长10秒）
  3. 提供永久关闭的方式
  4. 切勿用于非必要内容
  5. 若用户开启
    prefers-reduced-motion
    ：仅显示静态提示，不播放动画
  6. 紧急动画需提供音频/触觉替代方案以保障可访问性