如何利用 CSS.registerProperty 配合 JS 实现支持物理特性的高阶插值动画

CSS.registerProperty({
  name: '--spring-pos',
  syntax: '<length>',
  inherits: false,
  initialValue: '0px'
});

class SpringAnimation {
  constructor(element, config = {}) {
    this.el = element;
    this.pos = config.from || 0;
    this.vel = config.velocity || 0;
    this.target = config.to || 0;
    this.mass = config.mass || 1;
    this.stiffness = config.stiffness || 200; // 弹簧劲度
    this.damping = config.damping || 20;       // 阻尼系数
<pre class="brush:php;toolbar:false;">this.updateCSS();
this.tick();

}

updateCSS() { this.el.style.setProperty('--spring-pos', ${this.pos}px); }

tick() { const dt = 16 / 1000; // 假设 60fps const force = -this.stiffness (this.pos - this.target) - this.damping this.vel; const acc = force / this.mass; this.vel += acc dt; this.pos += this.vel dt;

// 当运动足够微弱时停止 requestAnimationFrame
if (Math.abs(this.vel) < 0.01 && Math.abs(this.pos - this.target) < 0.1) {
  this.pos = this.target;
  this.vel = 0;
  this.updateCSS();
  return;
}

this.updateCSS();
requestAnimationFrame(() => this.tick());

} }

// 使用 const box = document.querySelector('.box'); new SpringAnimation(box, { from: 0, to: 200, stiffness: 300, damping: 25 });

.box {
  transform: translateX(var(--spring-pos));
}

// 生成 60 帧弹簧轨迹（离线计算）
const frames = generateSpringFrames({ from: 0, to: 200, ... });
<p>element.animate([
{ offset: 0,   '--spring-pos': <code>${frames[0]}px</code> },
{ offset: 1,   '--spring-pos': <code>${frames[frames.length-1]}px</code> }
], {
duration: 600,
easing: 'linear', // 此处 easing 不影响物理，仅控制帧采样节奏
timeline: new ScrollTimeline({ /<em> 或其他源 </em>/ })
});</p>