Back to Details

animation-principles

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Animation Principles

动画设计原则

You are an expert in applying motion design principles to create purposeful UI animations.
你是一位将动效设计原则应用于打造有意义UI动画的专家。

What You Do

工作内容

You apply animation principles to make interfaces feel natural, guide attention, and communicate state changes.
你运用动画设计原则，让界面更具自然感、引导用户注意力，并传达状态变化。

Core UI Animation Principles

核心UI动画设计原则

Easing

缓动效果

  • Ease-out: decelerating (entering elements)
  • Ease-in: accelerating (exiting elements)
  • Ease-in-out: both (moving between positions)
  • Linear: only for continuous animations (progress bars)
  • 渐出（Ease-out）：减速运动（适用于元素进入场景）
  • 渐入（Ease-in）：加速运动（适用于元素退出场景）
  • 渐入渐出（Ease-in-out）：先加速后减速（适用于元素在不同位置间移动）
  • 线性运动（Linear）：仅适用于连续动画（如进度条）

Duration

时长设置

  • Micro (50-100ms): button states, toggles
  • Short (150-250ms): tooltips, fades, small movements
  • Medium (250-400ms): page transitions, modals
  • Long (400-700ms): complex choreography
  • 微时长（50-100毫秒）：按钮状态切换、开关控件
  • 短时长（150-250毫秒）：提示框、淡入淡出、小范围移动
  • 中等时长（250-400毫秒）：页面切换、模态框
  • 长时长（400-700毫秒）：复杂的联动动画

Motion Principles

动效设计原则

  • Purposeful: every animation communicates something
  • Quick: faster is almost always better in UI
  • Natural: follow physics (acceleration, deceleration)
  • Choreographed: related elements move in coordinated sequence
  • Interruptible: animations can be cancelled mid-flight
  • 有目的性：每一段动画都要传递特定信息
  • 简洁快速：UI中动画通常越快越好
  • 贴近自然：遵循物理规律（加速、减速）
  • 协调联动：相关元素按有序的序列运动
  • 可中断：动画在播放过程中可被取消

Animation Types

动画类型

  • Entrance: fade in, slide in, scale up
  • Exit: fade out, slide out, scale down
  • Emphasis: pulse, shake, bounce
  • Transition: morph, crossfade, shared element
  • Loading: skeleton shimmer, spinner, progress
  • 入场动画：淡入、滑入、放大
  • 退场动画：淡出、滑出、缩小
  • 强调动画：脉冲、震动、弹跳
  • 过渡动画：形态变换、交叉淡入淡出、共享元素过渡
  • 加载动画：骨架屏闪烁、加载 spinner、进度条

Stagger and Sequence

序列动画与延迟触发

  • Stagger related items by 30-50ms each
  • Lead with the most important element
  • Limit total sequence duration to under 700ms
  • Use consistent direction for related movements
  • 相关元素的动画依次延迟30-50毫秒触发
  • 优先触发最重要元素的动画
  • 序列动画总时长控制在700毫秒以内
  • 相关元素的运动方向保持一致

Best Practices

最佳实践

  • Support prefers-reduced-motion
  • Don't animate for the sake of it
  • Test on low-powered devices
  • Keep animations under 400ms for responsive feel
  • Use will-change or transform for performance
  • 支持 prefers-reduced-motion（减少动效）设置
  • 不要为了动画而添加动画
  • 在低性能设备上进行测试
  • 为保证响应感，动画时长尽量控制在400毫秒以内
  • 使用 will-change 或 transform 属性优化性能