27. 🎥 动画系统 Animation & Motion System ★★★★☆

🌏 Web 网页规范

  • CSS timing曲线 · Cubic-bezier 速度缓动
  • 过渡编排与动画层级划分
  • 经典页面平滑路由与 View Transitions 切换规范

📱 App 移动端规范

  • 物理引擎弹簧 (Spring Physics) 阻尼计算
  • Compose / UIKit 动画声明式规范
  • 手势跟手位移与动能回弹过渡标准

Web 贝塞尔缓动与过渡时间规范

Web Cubic-Bezier Curves & State Transitions

Web 端以时间为维度，使用 Cubic-bezier 曲线控制速度变化。为确保顺畅度，小组件状态变化过渡常在 150ms-250ms，大面积入场动画在 300ms-400ms，注重高反馈速率。

App 弹簧物理阻尼与手势跟手效果

App Spring Physics Engine & Gesture Alignment

App 端摒弃了单纯的时间缓动，使用基于质量 (Mass)、刚度 (Stiffness) 和阻尼 (Damping) 的物理弹簧引擎。确保动画能顺畅跟手、在任意时刻被打断并根据手势加速度进行惯性回弹。

LIVE PLAYGROUND: Timing 曲线对比与 Spring 阻尼弹性物理模拟 调节曲线或物理参数，点按运行对比 Cubic-bezier 缓动与 Spring 弹簧物理模拟运动质感的差异
https://web.meta-ui.edu/animation
09:41
📶 🔋
动画曲线 / 模式:
质量 Mass (m): 1.0
刚度 Stiffness (k): 100
阻尼 Damping (c): 10
Anim
📋 大模型统一 Prompt (LLM Prompt)