CSS 动效的数学根基：缓动函数、弹簧模型与帧率补偿的工程实践

一、当动效成为体验的裂缝——从"能用"到"舒服"的鸿沟

一个常见的生产场景：产品经理要求"加个弹窗动画"，开发者随手写下 transition: all 0.3s ease，弹窗确实动了，但总觉得哪里不对——弹出时像被弹弓甩出去，收回时像断了线的风筝。问题不在"有没有动"，而在"怎么动"。动效的舒适度取决于运动曲线的数学形态，而 ease、ease-in-out 这些预设关键词，不过是几条固定贝塞尔曲线的别名，无法适配所有交互场景。

更深层的痛点出现在低帧率环境。当设备性能不足导致帧率从 60fps 跌至 30fps 时，基于固定时长的 transition 会自动压缩运动距离，导致动画"走不完"——用户看到的是元素从 A 点跳到 B 点，中间的运动过程消失了。这不是 CSS 的 bug，而是时长驱动模型的固有缺陷。要解决这个问题，需要理解动效背后的数学模型，并从"时长驱动"转向"物理驱动"。

二、动效的数学模型——从贝塞尔曲线到弹簧阻尼系统

flowchart TD
    A[动效数学模型] --> B[时长驱动模型]
    A --> C[物理驱动模型]

    B --> B1[三次贝塞尔曲线]
    B1 --> B1a[cubic-bezier x1 y1 x2 y2]
    B1 --> B1b[预设关键词: ease / linear 等]

    C --> C1[弹簧阻尼系统]
    C1 --> C1a[刚度 stiffness]
    C1 --> C1b[阻尼 damping]
    C1 --> C1c[质量 mass]

    B -->|帧率下降| D[运动距离压缩]
    C -->|帧率下降| E[物理模拟继续，运动完整]

    style A fill:#fce4ec,stroke:#c62828
    style D fill:#ffebee,stroke:#e53935
    style E fill:#e8f5e9,stroke:#2e7d32

2.1 三次贝塞尔曲线——CSS transition 的数学内核

CSS 的 cubic-bezier(x1, y1, x2, y2) 定义了一条三次贝塞尔曲线，其中 P0=(0,0) 和 P3=(1,1) 是固定端点，P1=(x1,y1) 和 P2=(x2,y2) 是控制点。x 轴代表时间进度（0→1），y 轴代表动画进度（0→1）。

贝塞尔曲线的参数方程为：

B(t) = (1-t)³·P0 + 3(1-t)²·t·P1 + 3(1-t)·t²·P2 + t³·P3

关键认知：x1 和 x2 必须在 [0,1] 范围内（确保时间单调递增），但 y1 和 y2 可以超出 [0,1]——这就是回弹效果的数学来源。cubic-bezier(0.68, -0.55, 0.27, 1.55) 会在动画开始时先反向运动，再正向到达目标，形成弹性感。

2.2 弹簧阻尼系统——物理驱动的动效模型

弹簧模型的核心方程是阻尼谐振子：

m·x'' + c·x' + k·x = 0

其中 m 是质量，c 是阻尼系数，k 是刚度。解这个方程可以得到三种运动形态：

• 欠阻尼（c < 2√(mk)）：弹簧会振荡，产生回弹效果
• 临界阻尼（c = 2√(mk)）：最快到达目标且无振荡
• 过阻尼（c > 2√(mk)）：缓慢趋近目标，无振荡

CSS 原生不支持弹簧模型，但 Web Animations API 和 CSS spring() 提案正在填补这个空白。在当前阶段，需要通过 JavaScript 实现弹簧模拟。

三、生产级动效实现——弹簧动画引擎与帧率补偿

3.1 弹簧动画引擎

/**
 * 弹簧动画引擎
 * 基于阻尼谐振子模型，支持帧率自适应
 */
class SpringAnimator {
  private velocity: number = 0;
  private currentValue: number;
  private targetValue: number;
  private rafId: number | null = null;

  // 弹簧参数
  private stiffness: number;  // 刚度 k
  private damping: number;    // 阻尼 c
  private mass: number;       // 质量 m

  // 精度控制
  private readonly REST_THRESHOLD = 0.001;  // 静止阈值
  private readonly VELOCITY_THRESHOLD = 0.01; // 速度阈值
  private readonly MAX_ITERATIONS = 300;     // 最大迭代次数，防止无限循环

  constructor(config: SpringConfig) {
    this.stiffness = config.stiffness ?? 180;
    this.damping = config.damping ?? 12;
    this.mass = config.mass ?? 1;
    this.currentValue = config.from ?? 0;
    this.targetValue = config.to ?? 0;
  }

  /**
   * 启动弹簧动画
   * @param onUpdate 每帧回调，接收当前值
   * @param onComplete 动画完成回调
   */
  start(
    onUpdate: (value: number) => void,
    onComplete?: () => void
  ): void {
    // 取消正在进行的动画
    this.cancel();

    let lastTime: number | null = null;
    let iterations = 0;

    const step = (timestamp: number) => {
      // 首帧只记录时间，不计算位移
      if (lastTime === null) {
        lastTime = timestamp;
        this.rafId = requestAnimationFrame(step);
        return;
      }

      // 计算时间步长，限制最大值防止跳帧
      const rawDelta = (timestamp - lastTime) / 1000;
      const delta = Math.min(rawDelta, 0.064); // 最大 64ms（约 15fps）
      lastTime = timestamp;

      // 使用半隐式欧拉法求解弹簧方程
      // 比显式欧拉法更稳定，不会因大时间步长而发散
      const displacement = this.currentValue - this.targetValue;
      const springForce = -this.stiffness * displacement;
      const dampingForce = -this.damping * this.velocity;
      const acceleration = (springForce + dampingForce) / this.mass;

      // 先更新速度，再用新速度更新位置（半隐式）
      this.velocity += acceleration * delta;
      this.currentValue += this.velocity * delta;

      // 回调
      onUpdate(this.currentValue);

      // 检查是否静止
      iterations++;
      const isAtRest =
        Math.abs(this.velocity) < this.VELOCITY_THRESHOLD &&
        Math.abs(displacement) < this.REST_THRESHOLD;
      const isExhausted = iterations >= this.MAX_ITERATIONS;

      if (isAtRest || isExhausted) {
        // 精确对齐目标值
        this.currentValue = this.targetValue;
        onUpdate(this.currentValue);
        this.rafId = null;
        onComplete?.();
        return;
      }

      this.rafId = requestAnimationFrame(step);
    };

    this.rafId = requestAnimationFrame(step);
  }

  /**
   * 取消动画
   */
  cancel(): void {
    if (this.rafId !== null) {
      cancelAnimationFrame(this.rafId);
      this.rafId = null;
    }
  }

  /**
   * 更新目标值——支持动画中途改变方向
   * 弹簧模型天然支持目标值变化，无需重启动画
   */
  setTarget(newTarget: number): void {
    this.targetValue = newTarget;
  }
}

interface SpringConfig {
  from?: number;
  to?: number;
  stiffness?: number;
  damping?: number;
  mass?: number;
}

3.2 常用交互场景的弹簧参数预设

/**
 * 弹簧参数预设——适配不同交互场景
 * 每组参数经过实际设备测试，确保在 30fps-120fps 范围内表现一致
 */
const SPRING_PRESETS = {
  // 轻柔弹窗——温和的回弹，适合模态框
  gentleModal: {
    stiffness: 120,
    damping: 14,
    mass: 1,
  },

  // 按钮反馈——快速响应，微量回弹
  buttonPress: {
    stiffness: 400,
    damping: 20,
    mass: 0.8,
  },

  // 拖拽释放——自然减速，有惯性感
  dragRelease: {
    stiffness: 180,
    damping: 18,
    mass: 1.2,
  },

  // 页面切换——流畅滑动，无回弹
  pageTransition: {
    stiffness: 200,
    damping: 26,
    mass: 1,
  },

  // 通知弹出——从顶部滑入，弹性着陆
  notification: {
    stiffness: 160,
    damping: 12,
    mass: 0.6,
  },
} as const;

// 使用示例：弹窗动画
function animateModal(element: HTMLElement, show: boolean): void {
  const spring = new SpringAnimator({
    from: show ? 0 : 1,
    to: show ? 1 : 0,
    ...SPRING_PRESETS.gentleModal,
  });

  spring.start(
    (value) => {
      // 使用 transform 而非 top/left，确保 GPU 加速
      element.style.transform = `translateY(${(1 - value) * 20}px) scale(${0.95 + value * 0.05})`;
      element.style.opacity = String(value);
    },
    () => {
      if (!show) {
        element.style.display = 'none';
      }
    }
  );
}

3.3 CSS 原生动效的帧率补偿策略

对于仍需使用 CSS transition 的场景（如 hover 效果），可以通过 prefers-reduced-motion 和动态时长调整实现基础帧率补偿：

/* 基础过渡——使用自定义属性控制时长 */
.interactive-element {
  --transition-duration: 0.3s;
  --transition-easing: cubic-bezier(0.34, 1.56, 0.64, 1);

  transition:
    transform var(--transition-duration) var(--transition-easing),
    opacity var(--transition-duration) var(--transition-easing),
    box-shadow var(--transition-duration) ease-out;
}

/* 帧率补偿：检测低帧率设备，缩短动画时长 */
@media (prefers-reduced-motion: reduce) {
  .interactive-element {
    --transition-duration: 0.01s;
    --transition-easing: linear;
  }
}

/* 交互状态——仅变换 transform 和 opacity，确保合成层优化 */
.interactive-element:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.interactive-element:active {
  transform: translateY(0) scale(0.98);
  --transition-duration: 0.1s;
}

/* 焦点状态——兼顾键盘用户 */
.interactive-element:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  transition: outline-offset 0.15s ease;
}

/**
 * 运行时帧率检测与动态补偿
 * 检测设备实际渲染帧率，调整动画参数
 */
class FrameRateCompensator {
  private frameCount = 0;
  private lastTimestamp = 0;
  private currentFPS = 60;
  private monitoring = false;

  /**
   * 启动帧率监测
   * 采样 1 秒内的帧数，计算实际 FPS
   */
  startMonitoring(): void {
    if (this.monitoring) return;
    this.monitoring = true;
    this.frameCount = 0;
    this.lastTimestamp = performance.now();

    const measure = (now: number) => {
      this.frameCount++;
      const elapsed = now - this.lastTimestamp;

      // 每 1 秒采样一次
      if (elapsed >= 1000) {
        this.currentFPS = Math.round((this.frameCount * 1000) / elapsed);
        this.frameCount = 0;
        this.lastTimestamp = now;
        this.applyCompensation();
      }

      if (this.monitoring) {
        requestAnimationFrame(measure);
      }
    };

    requestAnimationFrame(measure);
  }

  /**
   * 根据帧率应用补偿策略
   */
  private applyCompensation(): void {
    const root = document.documentElement;

    if (this.currentFPS < 30) {
      // 低帧率：大幅缩短动画，减少运动量
      root.style.setProperty('--transition-duration', '0.1s');
      root.style.setProperty('--transition-easing', 'linear');
    } else if (this.currentFPS < 50) {
      // 中等帧率：适度缩短
      root.style.setProperty('--transition-duration', '0.2s');
      root.style.setProperty('--transition-easing', 'ease-out');
    } else {
      // 正常帧率：使用设计规格
      root.style.setProperty('--transition-duration', '0.3s');
      root.style.setProperty('--transition-easing', 'cubic-bezier(0.34, 1.56, 0.64, 1)');
    }
  }

  stopMonitoring(): void {
    this.monitoring = false;
  }
}

四、动效数学模型的架构权衡——精度、性能与兼容性

4.1 弹簧模型 vs 贝塞尔曲线

弹簧模型在物理真实感上远胜贝塞尔曲线，但它引入了 JavaScript 计算开销。每帧的弹簧方程求解需要约 10 次浮点运算，在 120fps 下每秒 1200 次。对于同时运行 10+ 弹簧动画的复杂页面，这可能导致主线程压力。贝塞尔曲线由浏览器原生实现，运行在合成线程上，零主线程开销。

4.2 半隐式欧拉法的精度边界

半隐式欧拉法在大多数场景下足够稳定，但当时间步长超过弹簧周期的 1/4 时，仍可能出现数值发散。在帧率极低（< 15fps）的设备上，需要切换到更稳定的 Verlet 积分或解析解。当前实现通过 MAX_ITERATIONS 限制防止无限循环，但这可能导致动画提前终止。

4.3 帧率补偿的感知问题

动态调整动画时长会改变运动节奏——用户在不同帧率下感受到的动效"性格"不同。30fps 下的 0.1s 过渡和 60fps 下的 0.3s 过渡，虽然都能"走完"，但前者缺乏优雅感。这是功能正确性与体验一致性之间的根本矛盾。

4.4 禁用场景

以下场景不建议使用弹簧动画：纯 CSS 可实现的简单过渡（hover、focus 状态）；需要精确时间控制的序列动画（如 Lottie 动画同步）；对帧率敏感的实时交互（如拖拽排序，弹簧的回弹会干扰用户操作意图）。

五、总结

CSS 动效的数学基础分为时长驱动模型（贝塞尔曲线）和物理驱动模型（弹簧阻尼系统）。贝塞尔曲线由浏览器原生实现，性能开销为零，但无法适配低帧率环境和复杂交互场景。弹簧模型通过半隐式欧拉法求解，天然支持目标值中途变更和帧率自适应，但引入了 JavaScript 计算开销。帧率补偿策略通过运行时检测和动态参数调整，在低帧率设备上保证动画完整性。生产中应根据交互复杂度选择模型——简单状态切换用 CSS transition，复杂物理交互用弹簧引擎，并始终尊重 prefers-reduced-motion 用户偏好。