构建依赖上下文的动画时，按设备、距离…

适用于需要根据设备能力、移动距离、用户偏好或交互类型动态改变动画时长的界面动画。

适用场景

解决思路

1. 将动画时长作为自适应变量：迪士尼原则保持不变，只调整 timing；根据设备能力、移动距离、用户偏好和交互类型选择时长。
2. 挤压与拉伸（Squash & Stretch）：随设备缩放，移动端更轻微，因为屏幕空间更小、形变空间更少。
3. 预备动作（Anticipation）：触摸设备上缩短，因为触摸用户期望比鼠标用户更快响应。
4. 舞台调度（Staging）：按视口适配，小屏幕使用更聚焦的 staging，减少同时发生的运动。
5. 直进与姿态对应（Straight Ahead/Pose to Pose）：保持同一方法和关键 pose，按比例缩放 duration，只调整 timing。
6. 跟随动作（Follow Through）：与距离成比例，移动距离越长，留出越多 follow-through 时间。
7. 慢入慢出（Slow In/Slow Out）：调整缓动曲线强度，更快的动画使用更锐利的 easing。
8. 弧线（Arcs）：保持相同路径，只改变速度；弧线形状不变，穿越时间变化。
9. 次要动作（Secondary Action）：移动端减少，减少同时动画数量以提升性能。
10. Timing：把它作为自适应变量，改变 timing，不改变原则。
11. 夸张（Exaggeration）：小屏幕上减少，强度与视口或元素尺寸成比例。
12. 扎实绘制（Solid Drawing）：感知性能，在较弱设备上减少 3D transforms。
13. 吸引力（Appeal）：按上下文适配，桌面端感觉合适的动画在移动端可能显得慢。
14. 基于距离的时长：定义 --base-duration: 300ms 和 --base-distance: 100px；时长随距离缩放，例如 50px travel = 200ms，200px travel = 450ms。
15. 基于距离的时长 JavaScript：使用 getDuration(distance)，baseDuration = 300，baseDistance = 100，返回 Math.min(600, baseDuration * Math.sqrt(distance / baseDistance))。
16. 基于设备的时长：桌面端 .transition { transition-duration: 400ms; }。
17. 基于设备的时长：@media (max-width: 1024px) 时 .transition { transition-duration: 350ms; }。
18. 基于设备的时长：@media (max-width: 768px) 时 .transition { transition-duration: 250ms; }。
19. 基于偏好的时长：在 @media (prefers-reduced-motion: reduce) 下，将 .transition 的 transition-duration 和 animation-duration 设为 0.01ms !important。
20. 基于偏好的时长：也可减少而非消除：在 @media (prefers-reduced-motion: reduce) 下将 .transition { transition-duration: 100ms; transform: none; }，只保留 opacity 淡入淡出。
21. 上下文规则：触摸设备时长从桌面端减少 25%。
22. 上下文规则：小视口时长从桌面端减少 20%。
23. 上下文规则：大移动距离在 base 上增加 50%。
24. 上下文规则：小移动距离在 base 上减少 30%。
25. 上下文规则：用户偏好 reduced 时使用 instant 或 minimal。
26. 上下文规则：低电量模式时长减少 50% 或禁用动画。
27. 上下文规则：高频动作使用 minimum duration。
28. 上下文规则：首次查看使用 full duration。
29. 上下文规则：重复交互使用 reduced duration。
30. 实现模式：在 :root 定义 --duration-instant: 50ms; --duration-fast: 150ms; --duration-normal: 300ms; --duration-slow: 500ms;。
31. 实现模式：在 @media (max-width: 768px) 的 :root 中覆盖 --duration-fast: 100ms; --duration-normal: 200ms; --duration-slow: 350ms;。
32. 实现模式：在 @media (prefers-reduced-motion: reduce) 的 :root 中覆盖 --duration-instant: 0ms; --duration-fast: 0ms; --duration-normal: 100ms; --duration-slow: 150ms;。
33. 关键洞察：构建系统，而非固定值；跨上下文测试；把 duration 当作变量，而不是常量。