responsive-adaptive

响应式与自适应时长

响应式时长会根据上下文调整时长：设备性能、移动距离、用户偏好和交互类型。没有一种时长适用于所有情况。

迪士尼动画原则与自适应运动

根据上下文应用

挤压与拉伸：根据设备缩放——在移动设备上更加微妙（可供形变的屏幕空间更小）。

预备动作：在触控设备上缩短——触控用户期望比鼠标用户更快地得到响应。

演出布局：适配视口——小屏幕需要更聚焦的演出布局，减少同时发生的运动。

直线动作／姿势到姿势：采用相同方法，按比例调整时长——姿势保持不变，调整时序。

跟随动作与重叠动作：与距离成正比——移动距离越长，跟随动作所需时间越长。

慢入／慢出：调整曲线强度——动画越快，缓动越陡。

弧线运动：路径相同，速度不同——弧线形状保持不变，移动时间随之变化。

次要动作：在移动设备上减少——减少同时进行的动画以提升性能。

时序：唯一需要自适应的变量——时序会变化，原则保持不变。

夸张：在小屏幕上减少——根据视口／元素尺寸按比例调整。

扎实绘制：考虑性能——在性能较弱的设备上减少 3D 变换。

吸引力：适合上下文——在桌面设备上感觉恰当的效果，在移动设备上可能会显得缓慢。

自适应策略

基于距离的时长

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

/* Duration scales with distance */
/* 50px travel = 200ms, 200px travel = 450ms */

function getDuration(distance) {
  const baseDuration = 300;
  const baseDistance = 100;
  return Math.min(600, baseDuration * Math.sqrt(distance / baseDistance));
}

基于设备的时长

/* 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; }
}

基于偏好的时长

/* 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 */
  }
}

上下文规则

上下文	时长调整
触控设备	比桌面设备缩短 25%
小视口	比桌面设备缩短 20%
长距离移动	基础时长增加 50%
短距离移动	基础时长减少 30%
用户偏好减少动态效果	即时或尽可能短
低电量模式	减少 50% 或禁用
高频操作	使用最短时长
首次查看	完整时长
重复交互	缩短时长

实现模式

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

关键要点

优秀的动画会像排版一样自适应——在一种尺寸／上下文中有效的效果，换一种情况可能就不再适用。构建系统，而不是固定值。在不同上下文中进行测试。时长是一个变量，而不是常量。