• Y AnimationPlayground
研究工作台
  • 实验总览
    • CSS + SVG
    • GSAP
    • Motion
    • 动画曲线 Studio
示例库
  • 示例总览
  • Three.js 示例
  • Shader 示例
  • 代码视频示例
项目
  • 版本记录
GitHubX (Twitter)

Motion

v0.3 参考实现

探索以 React 为中心的交互、手势、布局过渡与弹簧动画。

对比运行时
MotionReact 序列路由约 52 kB gzip

同一个 7.2 秒产品叙事 · 完全一致的场景契约

准备中
0%
0.0s /7.2s
Live signal / 08:42

From scattered activity to a confident next move.

The same product narrative is choreographed by three runtimes. Only the motion engine changes.

Activation

+18%

Intent rising

Retention

92%

Pattern stable

Next move

Scale

Signal confirmed

Signal confidenceLast 24h

Decision ready

Scale the guided path.

  1. 01Collect
  2. 02Resolve
  3. 03Decide

React 原生状态协作

挂载状态、布局和手势可以直接与组件状态组合。

可中断动画

弹簧和值动画可以重新指向目标,无需重建时间轴。

作用域序列

useAnimate 可以添加局部编排,同时避免选择器泄漏到全局。

React 交互探针
切换状态以验证共享反馈 token、可中断布局,以及遵从系统偏好的进入/退出动画。

信号已解析

92% 置信度

实验结论

当动画是 React 状态变化的结果时,优先把 Motion 作为默认升级方案。它对手势、挂载状态、布局和中断的表达比时间轴中心代码更直接,同时仍能处理短序列编排。

适合使用

  • 交互由 React 状态、布局、手势或组件挂载状态负责。
  • 用户仍在交互时,动画需要平滑地重新指向新目标。

不适合使用

  • 一个简单的 CSS transition 已经能清楚表达状态变化。
  • 作品是包含大量精确跨图层提示点的编辑型序列。