Motion 演示 · 现代 UI 交互动画

Spring 物理、Gesture 手势、Layout Animation、滚动驱动动画、Stagger 交错、Timeline 编排、AnimatePresence 式进入退出 —— Motion 官网主打的核心能力，逐个还原为可运行 demo。MIT 开源。

MIT / 开源原生 JS UMDSpring 物理引擎motion@11.11.13

01 / SPRING DRAG

弹簧物理拖拽 + 边界回弹

DRAG ME

拖动方块，松手后由 spring 弹簧动力学决定回弹速度与阻尼；也可点击下方按钮触发独立的 spring 旋转+缩放动画。

02 / GESTURE

HOVER ME

卡片 hover 时轻微放大上浮；FAB 按钮 tap 时按压回弹，均由 whileHover / whileTap 等价的原生事件手动触发 animate 实现。

03 / LAYOUT

选项 A

选项 B

选项 C

点击选项，背景色随 layout animation 平滑迁移；点击网格中的方块，其余方块沿网格自动补位（用 FLIP 手动测量位移，交给 spring 动画补间）。

04 / SCROLL

在框内向下滚动，徽章的缩放 / 旋转 / 圆角随滚动进度实时映射，由 Motion 的 scroll() 绑定完成，无需手写 scroll 事件节流。

05 / STAGGER

01 · 行情快照订阅

02 · 因子计算队列

03 · 风控前置校验

04 · 订单路由决策

05 · 成交回报归档

用 stagger() 为列表逐项生成递增延迟，制造依次浮现的节奏感，常用于表格/清单类内容的首次渲染。

06 / TIMELINE

START

用 timeline() 把「圆点位移 → 标签淡入 → 进度条展开」三段动画按绝对/相对时间轴精确编排，一次调用统一驱动多个元素。

07 / PRESENCE

卡片切换时旧卡片先播放退出动画、DOM 移除后再挂载新卡片播放进入动画，模拟 React 版 AnimatePresence 的退出等待效果（原生 JS 手动实现 exit-before-enter）。