弹簧解析解生成关键帧，最容易漏掉的是初值与中断

原创于 2026-10-29 22:22:51 发布 · 138 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

界面动效与视觉编程

本文聚焦于使用弹簧解析解生成动画关键帧时的关键技术难点：初值设定（位置与速度在目标变更时的坐标系转换）、中断续接的正确性（保留速度但需重算相对位移）、以及多条件停止策略（同时判断位置、速度与最大时限）。强调数值稳定性、临界阻尼分支处理及Web Animations API集成中的常见陷阱，不依赖视觉直觉，而以数学一致性和可验证性为基准。

封面：弹簧动效的独立折纸封面

弹簧解析解常被用来生成关键帧。公式看上去很完整，实际接入却可能在 t=0 就改了用户传入的速度，或在动画第一次经过目标点时提前停下。先验证初值，比先给曲线起一个情绪名称更重要。

这里研究相对目标的位移 x，方程为 m·x''+c·x'+k·x=0，时间单位秒，速度单位为位移单位每秒。目标改变时，先求出当前的位置和速度，再把相对新目标的位移作为下一段初值。解析解解决的是这个模型，不自动保证界面手感。

三种阻尼共享一份初值约定

令 a=c/(2m)，判别量 d=a²−k/m。负值对应欠阻尼，零附近采用临界式，正值采用两个实根。临界附近的数值稳定需要明确处理，不能用浮点数严格相等决定分支。

下面代码返回位置与速度；没有使用“位置足够近就结束”的捷径。参数范围有意限定为有限正质量、正刚度与非负阻尼，不承诺任意极端数值都稳定。

import assert from 'node:assert/strict';
function spring(m,k,c,x0,v0,t){
  if(![m,k,c,x0,v0,t].every(Number.isFinite) ||
      m<=0||k<=0||c<0||t<0)throw Error('parameters');
  const a=c/(2*m),d=a*a-k/m;
  if(Math.abs(d)<1e-8){
    const B=v0+a*x0,E=Math.exp(-a*t);
    return {x:E*(x0+B*t),v:E*(v0-a*B*t)};
  }
  if(d<0){
    const b=Math.sqrt(-d),C=Math.cos(b*t),S=Math.sin(b*t)/b;
    const B=v0+a*x0,E=Math.exp(-a*t);
    return {x:E*(x0*C+B*S),v:E*(v0*C+(d*x0-a*B)*S)};
  }
  const b=Math.sqrt(d),r1=-a+b,r2=-a-b;
  const A=(v0-r2*x0)/(r1-r2),B=x0-A;
  const p=A*Math.exp(r1*t),q=B*Math.exp(r2*t);
  return {x:p+q,v:r1*p+r2*q};
}
const near=(a,b,eps=1e-7)=>assert.ok(Math.abs(a-b)<eps);
for(const c of [0,1,4,4-1e-8,4+1e-8,8]){
  const at0=spring(1,4,c,7,-3,0);
  near(at0.x,7);near(at0.v,-3);
  const t=0.7,h=1e-6,s=spring(1,4,c,7,-3,t);
  const derivative=(spring(1,4,c,7,-3,t+h).x-
    spring(1,4,c,7,-3,t-h).x)/(2*h);
  near(derivative,s.v,2e-5);
  const continued=spring(1,4,c,s.x,s.v,0.4);
  const direct=spring(1,4,c,7,-3,1.1);
  near(continued.x,direct.x);near(continued.v,direct.v);
}
const crossing=spring(1,1,0,1,0,Math.PI/2);
assert.ok(Math.abs(crossing.x)<1e-6 && Math.abs(crossing.v)>0.9);
console.log('initial values, derivative, near-critical cases and interruption continuity passed');