/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */
#content_views .toc,
/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */
#content_views.markdown_views > p:empty:has(+ .toc),
#content_views.markdown_views > .toc + p:empty,
/* 富文本旧版目录标记 */
#content_views.htmledit_views #main-toc,
#content_views.htmledit_views #hr-toc,
#content_views.htmledit_views p[id*=\”-toc\”] {
display: none !important;
}
/* 目录去掉后，紧跟的首个标题不再多出一块上边距 */
#content_views.markdown_views > .toc + h1,
#content_views.markdown_views > .toc + h2,
#content_views.markdown_views > .toc + h3,
#content_views.markdown_views > .toc + h4,
#content_views.markdown_views > .toc + p:empty + h1,
#content_views.markdown_views > .toc + p:empty + h2,
#content_views.markdown_views > .toc + p:empty + h3,
#content_views.markdown_views > .toc + p:empty + h4 {
margin-top: 0 !important;
}
在现代高端 UI 动效设计中，越来越少的产品还在使用死板机械的 ease-in-out 或三阶贝塞尔曲线（Cubic Bezier）。无论你如何微调贝塞尔控制点，贝塞尔曲线在数学本质上只能产生单调加速或单次冲过头的伪回弹，它无法模拟现实物理世界中物体受到弹簧拉伸时，反复震荡、振幅衰减、最终平滑归于平衡点的生命力。
很多前端团队为了实现苹果 iOS 级别富有“韧性与弹性”的手感，往往毫不犹豫地引入庞大的第三方 JavaScript 动画库（如 Framer Motion、Popmotion 或 React Spring）。然而，这些物理库通常需要在主线程的 requestAnimationFrame 里逐帧解算运动方程并直接操作 DOM 样式，一旦主线程遭遇复杂业务逻辑计算，动画就会瞬间掉帧卡顿，且打包体积往往增加数十 KB。
美院的动态雕塑（Kinetic Sculpture）大师亚历山大·考尔德（Alexander Calder）曾说过：“运动的纯粹性来源于物理惯性与阻尼的平衡，而不是人造刻意的摆布。”
我们能否用严格的二阶微分弹簧物理公式，在运行时或构建期离散采样生成纯原生的 CSS Keyframes，并通过现代 Web Animations API（WAAPI）将其直接托管给浏览器的 Compositor 合成线程？ 答案是肯定的。本文将彻底拆解弹簧力学算法与现代 WAAPI 的硬核结合。
弹簧振荡的数学本质：二阶齐次微分方程
物理学中，一个挂在弹簧上的质点运动遵循胡克定律（Hooke's Law）与牛顿第二定律，并叠加黏滞阻尼阻力：
$$m \\frac{d^2x}{dt^2} + c \\frac{dx}{dt} + k x = 0$$
其中：
- $m$（Mass）：质量，代表物体的运动惯性，质量越大振荡周期越长；
- $k$（Stiffness）：劲度系数/刚度，代表弹簧的硬度，刚度越大拉力越大、振荡越快；
- $c$（Damping）：阻尼系数，代表摩擦力与介质耗能，阻尼越大能量衰减越快。
我们定义：
- 无阻尼固有角频率：$\\omega_0 = \\sqrt{k / m}$
- 阻尼比：$\\zeta = \\frac{c}{2\\sqrt{m k}}$
根据阻尼比 $\\zeta$ 的大小，弹簧运动分为三种截然不同的物理形态：
在最迷人的**欠阻尼形态（$\\zeta < 1$）**下，阻尼角频率为 $\\omega_d = \\omega_0 \\sqrt{1 – \\zeta^2}$，物体的位移随时间 $t$ 的闭式解析解公式为：
$$x(t) = 1 – e^{-\\zeta \\omega_0 t} \\left( \\cos(\\omega_d t) + \\frac{\\zeta \\omega_0}{\\omega_d} \\sin(\\omega_d t) \\right)$$
离散采样拟合：物理弹簧转原生 Keyframes 算法
有了这一严格的解析解公式，我们就不再需要任何逐帧 JS 物理求解器（如 Euler 或 Verlet 数值积分），而是可以直接进行时间离散采样，计算出关键帧关键点，并在位移极其微小（低于视觉感知阈值 $\\epsilon = 0.001$）时截断动画。
下面是生产级 TypeScript 实现：
// springGenerator.ts
export interface SpringConfig {
mass?: number; // 质量，默认 1
stiffness?: number; // 劲度系数，默认 100
damping?: number; // 阻尼，默认 10
velocity?: number; // 初速度，默认 0
}
export interface KeyframePoint {
offset: number; // 0 到 1 之间的时间百分比
transform: string; // 转换字符串
value: number; // 归一化位移 (0 -> 1)
}
export interface SpringAnimationResult {
duration: number; // 计算出的总时长（秒）
keyframes: KeyframePoint[];
cssKeyframeString: string;
}
/**
* 根据弹簧物理参数生成离散关键帧数组与 CSS @keyframes 字符串
*/
export function generateSpringKeyframes(
config: SpringConfig = {},
propertyFormatter: (v: number) => string = (v) => `scale(${v})`
): SpringAnimationResult {
const m = Math.max(0.1, config.mass || 1.0);
const k = Math.max(1.0, config.stiffness || 100.0);
const c = Math.max(0.1, config.damping || 10.0);
const w0 = Math.sqrt(k / m);
const zeta = c / (2 * Math.sqrt(m * k));
// 计算动画实际收敛稳定所需的时间（截断阈值 epsilon = 0.001）
const epsilon = 0.001;
let duration = 0;
if (zeta < 1) {
// 欠阻尼：根据指数包络线 e^(-zeta * w0 * t) <= epsilon 反解最大收敛时间
duration = -Math.log(epsilon) / (zeta * w0);
} else {
// 临界或过阻尼
duration = -Math.log(epsilon) / (w0 * (zeta – Math.sqrt(Math.max(0, zeta * zeta – 1))));
}
// 限制合理时长范围（0.2s 到 3.0s 之间）
duration = Math.max(0.2, Math.min(3.0, duration));
// 采样频率：每秒采样 60 个点即可达到电影级平滑度
const sampleCount = Math.ceil(duration * 60);
const keyframes: KeyframePoint[] = [];
const wd = zeta < 1 ? w0 * Math.sqrt(1 – zeta * zeta) : 0;
for (let i = 0; i <= sampleCount; i++) {
const t = (i / sampleCount) * duration;
const progress = i / sampleCount;
let displacement = 1.0;
if (zeta < 1) {
// 欠阻尼解析解公式
const envelope = Math.exp(-zeta * w0 * t);
const oscillation = Math.cos(wd * t) + ((zeta * w0) / wd) * Math.sin(wd * t);
displacement = 1.0 – envelope * oscillation;
} else if (Math.abs(zeta – 1) < 0.001) {
// 临界阻尼解析解
displacement = 1.0 – Math.exp(-w0 * t) * (1.0 + w0 * t);
} else {
// 过阻尼
const r1 = -w0 * (zeta – Math.sqrt(zeta * zeta – 1));
const r2 = -w0 * (zeta + Math.sqrt(zeta * zeta – 1));
displacement = 1.0 – (r2 * Math.exp(r1 * t) – r1 * Math.exp(r2 * t)) / (r2 – r1);
}
keyframes.push({
offset: Number(progress.toFixed(4)),
value: Number(displacement.toFixed(4)),
transform: propertyFormatter(Number(displacement.toFixed(4)))
});
}
// 构建用于直接注入样式的 CSS 字符串
const animationName = `spring_${Math.floor(m)}_${Math.floor(k)}_${Math.floor(c)}`;
const keyframeRules = keyframes
.map((kf) => ` ${(kf.offset * 100).toFixed(2)}% { transform: ${kf.transform}; }`)
.join('\\n');
const cssKeyframeString = `@keyframes ${animationName} {\\n${keyframeRules}\\n}`;
return {
duration: Number(duration.toFixed(3)),
keyframes,
cssKeyframeString
};
}
运行时代替第三方库：结合 WAAPI 实现 60fps 硬件加速
有了这套算法，在交互触发时，我们直接调用浏览器的原生 Web Animations API，动画将由 GPU 合成器线程完全独立调度，哪怕主线程正在疯狂进行 JSON 序列化，弹簧依然丝滑无比：
/**
* 用物理弹簧触发元素弹跳弹出
*/
export function playSpringPop(element: HTMLElement): Animation {
// 定义物理手感：轻量质感（小质量、大刚度、适度欠阻尼震荡）
const spring = generateSpringKeyframes(
{ mass: 0.8, stiffness: 180, damping: 12 },
(v) => `scale(${v})`
);
// 映射为 Web Animations API 的帧格式
const waapiFrames = spring.keyframes.map((kf) => ({
offset: kf.offset,
transform: kf.transform
}));
// 直接在底层合成线程执行动画
return element.animate(waapiFrames, {
duration: spring.duration * 1000,
easing: 'linear', // 关键：时间步长已内置非线性物理插值，外层直接使用 linear
fill: 'forwards'
});
}
架构价值与性能对比
这套“数学离散采样 + 原生动画引擎”方案相比传统做法具有压倒性优势：
代码的最高境界往往是自然物理法则在计算机世界里的投影。用几行优美的微积分公式解构弹簧，用浏览器底层的合成器释放硬件潜能，我们便能在 Web 的每一次轻触与回弹之间，注入源于现实物理世界的永恒张力。
