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

动画曲线 Studio

Spring vs Bezier

把临界阻尼弹簧、速度继承和连续 zoom / pan 变成可操作、可测量的动画实验。

查看 Motion System
临界阻尼弹簧ζ = 1闭式解

Spring / 状态机

新目标继承当前 position + velocity

1.000×

|v| 0.00

PRODUCT CANVAS
x 0.00%y 0.00%vₛ 0.000

Bezier / 静态映射

每次重定向都从新的 0% 重新计时

1.000×

|v| 0.00

PRODUCT CANVAS
x 0.00%y 0.00%vₛ 0.000
7.5 s⁻¹

Spring 参数;Bezier 比较时长 = 9 / ω

1.85×

与 pan 共享同一个 ω

18%

x / y 通道独立求解

0.0 d/s

d/s = 每秒目标距离倍数

同一比较时长下的位置与速度
Bezier 不使用 ω;这里只把它的时长设为 9 / ω。位移曲线看“到哪里”,速度曲线看“怎样到达”。
位置响应0–1.20s · 90% @ 0.52s
0s1.20s
Spring · ω 7.5Bezier · 0.25, 1, 0.3, 1
瞬时速度0–1.20s
0s1.20s
Spring · ω 7.5Bezier · 0.25, 1, 0.3, 1
为什么 Screen Studio 式 zoom 更像弹簧
cubic-bezier 只描述时间到进度;弹簧描述的是随时间演化的位置与速度状态。
中途改目标
Bezier

从当前值重新计时

Spring

从 position + velocity 重新求解

速度连续性
Bezier

重置为新曲线的起始速度,通常与当前速度不连续

Spring

继承瞬时速度,方向变化仍连续

逐帧渲染
Bezier

按固定时间函数采样

Spring

闭式解直接求任意时刻状态

适合场景
Bezier

已知起止点的短 UI 过渡

Spring

镜头跟随、拖拽、连续 zoom / pan

逐帧渲染公式
每一帧直接求值,不依赖前一帧积分,因此适合 Playwright、Remotion 或自定义渲染管线。
x(t) = target + (x₀ + c₂t)e^(-ωt)
c₂ = v₀ + ωx₀

v(t) = [c₂ - ω(x₀ + c₂t)]e^(-ωt)
  • scale、x、y 各自求解,但必须共享同一个 ω。
  • 打断时把当前速度作为下一段 v₀,运动才不会重新起步。
  • 页面中的 blur 只是速度大小诊断;正式渲染应把速度向量映射为方向性 motion blur。
  • 必须静态近似时,可使用 cubic-bezier(0.25, 1, 0.3, 1)。