Back to Details

responsive-adaptive

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Responsive & Adaptive Timing

响应式自适应计时

Responsive timing adapts duration to context: device capability, travel distance, user preferences, and interaction type. One duration doesn't fit all situations.
响应式计时会根据上下文调整动画时长：设备性能、移动距离、用户偏好以及交互类型。单一的时长无法适配所有场景。

Disney Principles for Adaptive Motion

迪士尼自适应动效原则

Context-Aware Application

上下文感知应用

Squash & Stretch: Scale with device - more subtle on mobile (less screen real estate for deformation).
Anticipation: Shorter on touch devices - touch users expect faster response than mouse users.
Staging: Adapt to viewport - smaller screens need more focused staging, less simultaneous motion.
Straight Ahead/Pose to Pose: Same approach, scaled duration - poses stay, timing adjusts.
Follow Through: Proportional to distance - longer travel = more follow-through time.
Slow In/Slow Out: Adjust curve intensity - faster animations need sharper easing.
Arcs: Same paths, different speeds - arc shape remains, traversal time changes.
Secondary Action: Reduce on mobile - fewer simultaneous animations for performance.
Timing: THE adaptive variable - timing changes, principles stay.
Exaggeration: Less on smaller screens - proportional to viewport/element size.
Solid Drawing: Performance-aware - reduce 3D transforms on weaker devices.
Appeal: Context-appropriate - what feels right on desktop may feel slow on mobile.
挤压与拉伸（Squash & Stretch）：随设备缩放形变程度——在移动端使用更 subtle 的效果（移动端屏幕空间有限，形变展示空间不足）。
预备动作（Anticipation）：触控设备上时长更短——触控用户比鼠标用户期待更快的响应速度。
动作布局（Staging）：适配视口尺寸——更小的屏幕需要更聚焦的动效布局，减少同时发生的动画。
逐帧动画/关键帧动画（Straight Ahead/Pose to Pose）：实现逻辑不变，缩放时长——关键帧保留，时间节奏调整。
跟随动作（Follow Through）：与移动距离成正比——移动距离越长，跟随动作的时长越长。
慢进慢出（Slow In/Slow Out）：调整缓动曲线强度——更快的动画需要更锐利的缓动效果。
弧形运动（Arcs）：路径不变，速度不同——弧形轨迹保持不变，移动时长动态调整。
次要动作（Secondary Action）：移动端减少使用——为了性能表现，减少同时运行的动画数量。
时间节奏（Timing）：核心自适应变量——时间节奏可变，动效原则不变。
夸张表现（Exaggeration）：小屏幕上减少使用——夸张程度与视口/元素大小成正比。
立体造型（Solid Drawing）：性能感知——在性能较弱的设备上减少3D变换的使用。
吸引力（Appeal）：适配上下文——桌面端体验流畅的动画在移动端可能会显得卡顿缓慢。

Adaptive Strategies

自适应策略

Distance-Based Duration

基于距离的时长计算

css
/* Base duration for reference distance */
--base-duration: 300ms;
--base-distance: 100px;

/* Duration scales with distance */
/* 50px travel = 200ms, 200px travel = 450ms */
javascript
function getDuration(distance) {
  const baseDuration = 300;
  const baseDistance = 100;
  return Math.min(600, baseDuration * Math.sqrt(distance / baseDistance));
}
css
/* 参考距离对应的基础时长 */
--base-duration: 300ms;
--base-distance: 100px;

/* 时长随距离缩放 */
/* 移动50px = 200ms，移动200px = 450ms */
javascript
function getDuration(distance) {
  const baseDuration = 300;
  const baseDistance = 100;
  return Math.min(600, baseDuration * Math.sqrt(distance / baseDistance));
}

Device-Based Duration

基于设备的时长设置

css
/* Desktop - full duration */
.transition { transition-duration: 400ms; }

/* Tablet - slightly faster */
@media (max-width: 1024px) {
  .transition { transition-duration: 350ms; }
}

/* Mobile - faster for perceived responsiveness */
@media (max-width: 768px) {
  .transition { transition-duration: 250ms; }
}
css
/* 桌面端 - 完整时长 */
.transition { transition-duration: 400ms; }

/* 平板 - 稍快的时长 */
@media (max-width: 1024px) {
  .transition { transition-duration: 350ms; }
}

/* 移动端 - 更快的时长提升感知响应速度 */
@media (max-width: 768px) {
  .transition { transition-duration: 250ms; }
}

Preference-Based Duration

基于用户偏好的时长设置

css
/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .transition {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Reduce motion, don't eliminate */
@media (prefers-reduced-motion: reduce) {
  .transition {
    transition-duration: 100ms;
    transform: none; /* Only opacity fades */
  }
}
css
/* 尊重用户减少动效的偏好 */
@media (prefers-reduced-motion: reduce) {
  .transition {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* 减少动效而非完全移除 */
@media (prefers-reduced-motion: reduce) {
  .transition {
    transition-duration: 100ms;
    transform: none; /* 仅保留透明度渐变 */
  }
}

Context Rules

上下文规则

ContextDuration Adjustment
Touch device-25% from desktop
Small viewport-20% from desktop
Large travel distance+50% base
Small travel distance-30% base
User prefers reducedInstant or minimal
Low power mode-50% or disabled
High-frequency actionUse minimum duration
First-time viewFull duration
Repeat interactionReduced duration
上下文时长调整规则
触控设备比桌面端少25%
小视口比桌面端少20%
长移动距离比基础值多50%
短移动距离比基础值少30%
用户偏好减少动效即时或最小时长
低电量模式减少50%或禁用
高频操作使用最小时长
首次浏览完整时长
重复交互减少时长

Implementation Pattern

实现模式

css
:root {
  --duration-instant: 50ms;
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
}

@media (max-width: 768px) {
  :root {
    --duration-fast: 100ms;
    --duration-normal: 200ms;
    --duration-slow: 350ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast: 0ms;
    --duration-normal: 100ms;
    --duration-slow: 150ms;
  }
}
css
:root {
  --duration-instant: 50ms;
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
}

@media (max-width: 768px) {
  :root {
    --duration-fast: 100ms;
    --duration-normal: 200ms;
    --duration-slow: 350ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast: 0ms;
    --duration-normal: 100ms;
    --duration-slow: 150ms;
  }
}

Key Insight

核心观点

Great animation adapts like typography adapts - what works at one size/context may not work at another. Build systems, not fixed values. Test across contexts. Duration is a variable, not a constant.
优秀的动画和排版一样需要适配——在某一种尺寸/上下文下效果好的设计不一定适配其他场景。要构建系统，而不是固定值。要跨上下文测试。时长是变量，不是常量。