50. 🎬 动效设计理论 Motion Design Theory ★★★★☆

🌏 Web 网页规范

  • CSS Timing Functions · Cubic-bezier 缓动曲线分类与应用场景
  • View Transitions API · 页面级形态变与跨文档过渡编排
  • Motion Choreography · 列表交错 (Stagger)、1/3 同步规则
  • prefers-reduced-motion · 无障碍降级策略与持续时间令牌

📱 App 移动端规范

  • Spring Physics · 质量/刚度/阻尼参数与贝塞尔取舍
  • Shared Element Transitions · Hero 图片展开至详情页
  • iOS vs Android · UIKit 弹簧 vs Material Motion 指南差异
  • Gesture-driven Animation · 橡皮筋回弹、动能滚动与手势跟手

Web 缓动曲线分类与动效编排体系

Easing Taxonomy & Motion Choreography

Web 端动效以 Disney 12 原则为理论根基，将挤压拉伸 (Squash & Stretch) 映射到按钮按压、预期 (Anticipation) 映射到加载态、跟随 (Follow-through) 映射到滚动惯性。缓动曲线分类学规定：ease-in 用于退出、ease-out 用于入场、ease-in-out 用于位移。动效编排通过 Stagger 错开列表项入场、1/3 规则限制同步动画数量。Motion Personality 分四档：Playful / Premium / Corporate / Energetic。持续时间令牌分 quick (150ms) / standard (300ms) / slow (500ms)。CSS View Transitions API 实现页面级形态变，prefers-reduced-motion 确保无障碍降级。

App 弹簧物理与共享元素转场体系

Spring Physics & Shared Element Transitions

App 端动效核心是 Spring 弹簧物理引擎，通过质量 (Mass)、刚度 (Stiffness)、阻尼 (Damping) 三参数定义运动质感，比贝塞尔曲线更贴近真实物理。共享元素转场 (Shared Element Transitions) 让 Hero 图片从列表无缝展开至详情页。iOS 使用 UIKit 弹簧动画（interactive spring），Android 遵循 Material Motion 指南（emphasis/standard/emphasized 三档）。手势驱动动画包括橡皮筋回弹 (Rubber Band)、动能滚动 (Momentum Scroll)，要求动画可在任意时刻被打断并反向。

LIVE PLAYGROUND: 缓动曲线对比实验场 Easing Curve Comparison 切换上方 Web/App 视角轨道，观察演示形变
https://web.meta-ui.edu/motion-theory
09:41
📶 🔋
🎬 四条缓动曲线同步对比 · Easing Curve Race
Linear
linear
300ms
Ease-in-out
cubic-bezier
300ms
Spring Bounce
back-out
400ms
Custom Bezier
(0.68,-0.55,
0.27,1.55) 500ms
0ms150ms (quick)300ms (standard)500ms (slow)
Playful 活泼 Premium 高级 Corporate 商务 Energetic 活力
📱 Spring 物理参数对比 · Physics Simulation
Stiff 刚性
m:1 k:300
d:20
Bouncy 弹性
m:1 k:180
d:8
Gentle 柔和
m:1 k:120
d:14
iOS UIKit Spring Material Motion
📋 大模型统一 Prompt (LLM Prompt)