深入理解 CSS 动画的时间函数 cubic-bezier 实现原理

大家好，今天我们来深入探讨 CSS 动画中一个非常重要的概念——cubic-bezier，也就是三次贝塞尔曲线。它在 CSS 动画中扮演着关键角色，用于控制动画的速度变化，产生各种各样的动画效果。理解它的原理，能让我们更精准地控制动画，创造更流畅、更自然的动画体验。

动画的本质与时间函数的作用

在深入 cubic-bezier 之前，我们先回顾一下动画的本质。动画的本质是在一段时间内，改变元素的某个或某些属性值。例如，让一个元素从屏幕左边移动到右边，就是改变它的 left 属性值。

而时间函数，或者说缓动函数，决定了属性值在整个动画过程中如何变化。简单来说，它定义了动画的速度曲线。如果没有时间函数，或者使用默认的时间函数 linear，那么属性值会以匀速变化，动画会显得非常生硬。时间函数的作用就是让动画的速度变化更加自然、流畅。

`cubic-bezier` 的定义与基本概念

cubic-bezier 是一个三次贝塞尔曲线函数，它接受四个参数 (x1, y1, x2, y2)，这四个参数定义了两个控制点的坐标 (x1, y1) 和 (x2, y2)。这两个控制点与起点 (0, 0) 和终点 (1, 1) 共同决定了曲线的形状。

起点 (0, 0): 代表动画的起始状态，时间为 0，属性值为初始值。
终点 (1, 1): 代表动画的结束状态，时间为 1，属性值为最终值。
控制点 (x1, y1) 和 (x2, y2): 这两个点决定了曲线的弯曲程度，从而影响动画的速度变化。x 值代表时间轴上的位置，y 值代表属性值轴上的位置。

这四个点定义了一个参数方程，可以用如下公式表示：

P(t) = (1-t)^3 * P0 + 3(1-t)^2 * t * P1 + 3(1-t) * t^2 * P2 + t^3 * P3

其中：

P(t) 是在时间 t (0 <= t <= 1) 时的曲线上的点。
P0 是起点 (0, 0)。
P1 是控制点 1 (x1, y1)。
P2 是控制点 2 (x2, y2)。
P3 是终点 (1, 1)。
t 是时间，取值范围是 0 到 1。

这个公式实际上计算的是在时间 t 时，曲线上的一个点的坐标 (x, y)。 x 值代表当前时间点，y 值代表当前属性值进度。

`cubic-bezier` 的计算过程

理解 cubic-bezier 的关键在于理解如何通过参数方程计算出在每个时间点 t 对应的属性值进度 y。

确定控制点： 首先，我们需要确定 cubic-bezier 函数的四个参数 (x1, y1, x2, y2)，也就是两个控制点的坐标。
代入公式： 将起点 (0, 0)，终点 (1, 1)，以及控制点 (x1, y1) 和 (x2, y2) 代入上面的参数方程。
遍历时间： 对于动画过程中的每一个时间点 t (从 0 到 1)，计算出曲线上的点 P(t) = (x, y)。
使用进度： y 值就是当前时间点 t 对应的属性值进度，也就是属性值变化的百分比。

由于我们需要根据时间 t 找到对应的 y 值，但参数方程给出的却是 x 和 y 都依赖于 t。因此，我们需要解决一个反向查找的问题：给定 x（时间 t），如何找到对应的 y（属性值进度）。

这通常需要数值方法来解决，比如二分法或牛顿迭代法。因为直接从 x 解出 t 的方程通常非常复杂，没有解析解。

二分法查找 t：

function cubicBezier(x1, y1, x2, y2, x) {
  let start = 0;
  let end = 1;
  let t;

  while (start <= end) {
    t = (start + end) / 2;
    let currentX = calculateBezierPoint(t, 0, x1, x2, 1).x;

    if (Math.abs(currentX - x) < 0.00001) { // 精度控制
      return calculateBezierPoint(t, 0, y1, y2, 1).y;
    }

    if (currentX < x) {
      start = t;
    } else {
      end = t;
    }
  }

  // 如果找不到精确的 t 值，可以返回一个近似值
  return calculateBezierPoint(t, 0, y1, y2, 1).y;
}

function calculateBezierPoint(t, p0, p1, p2, p3) {
  let u = 1 - t;
  let tt = t * t;
  let uu = u * u;
  let uuu = uu * u;
  let ttt = tt * t;

  let p = {
    x: uuu * p0 + 3 * uu * t * p1 + 3 * u * tt * p2 + ttt * p3,
    y: uuu * p0 + 3 * uu * t * p1 + 3 * u * tt * p2 + ttt * p3 // 这里计算x和y的公式是一样的,但是传入的参数不同.
  };

  return p;
}

// 使用示例
let x1 = 0.25;
let y1 = 0.1;
let x2 = 0.25;
let y2 = 1.0;

let x = 0.5; // 假设时间进度为 0.5
let y = cubicBezier(x1, y1, x2, y2, x);
console.log("当时间进度为 " + x + " 时，属性值进度为 " + y);

这段代码首先定义了一个 calculateBezierPoint 函数，用于计算给定时间 t 下贝塞尔曲线上的点的坐标。然后，cubicBezier 函数使用二分法来寻找与给定的 x 值最接近的 t 值，并计算出对应的 y 值。注意其中的精度控制，因为浮点数运算可能存在误差。

`cubic-bezier` 的参数限制

虽然 cubic-bezier 函数接受四个参数，但实际上有一些限制：

x 值的范围： x1 和 x2 的值通常需要在 0 到 1 之间。如果超出这个范围，曲线可能会超出终点，导致动画先超过最终值再返回。虽然 CSS 规范允许 x 值超出 0 到 1 的范围，但可能会产生不期望的结果。
y 值的范围： y1 和 y2 的值没有严格的限制，可以超出 0 到 1 的范围。如果 y 值超出 0 到 1 的范围，会导致动画在初始阶段或结束阶段出现反向运动（超出再返回）。

常见的 `cubic-bezier` 函数

CSS 提供了一些预定义的 cubic-bezier 函数，方便我们使用：

函数名称	`cubic-bezier` 值	描述
`linear`	`cubic-bezier(0.0, 0.0, 1.0, 1.0)`	匀速动画，属性值随时间线性变化。
`ease`	`cubic-bezier(0.25, 0.1, 0.25, 1.0)`	默认值。动画开始时较慢，中间加速，结束时再次减速。
`ease-in`	`cubic-bezier(0.42, 0.0, 1.0, 1.0)`	动画开始时较慢，然后加速。
`ease-out`	`cubic-bezier(0.0, 0.0, 0.58, 1.0)`	动画开始时较快，然后减速。
`ease-in-out`	`cubic-bezier(0.42, 0.0, 0.58, 1.0)`	动画开始时较慢，中间加速，结束时减速。与 `ease` 类似，但开始和结束的减速效果更明显。

除了这些预定义的函数，我们还可以自定义 cubic-bezier 函数，创造出各种各样的动画效果。

`cubic-bezier` 的实际应用

理解 cubic-bezier 的原理后，我们可以将其应用到各种 CSS 动画中，例如：

过渡动画 (transition): 使用 transition-timing-function 属性来指定过渡动画的时间函数。
关键帧动画 (animation): 使用 animation-timing-function 属性来指定关键帧动画的时间函数。

<!DOCTYPE html>
<html>
<head>
<style>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  transition: left 1s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* 自定义 cubic-bezier */
}

.box:hover {
  left: 500px;
}
</style>
</head>
<body>

<div class="box"></div>

</body>
</html>

在这个例子中，我们使用 transition 属性来创建一个过渡动画。当鼠标悬停在 .box 元素上时，它的 left 属性会从初始值变为 500px。cubic-bezier(0.68, -0.55, 0.27, 1.55) 定义了一个自定义的时间函数，这个函数会产生一个先超出再返回的效果，让动画更有趣。

使用工具可视化 `cubic-bezier`

虽然理解了 cubic-bezier 的原理，但要凭空想象出特定参数对应的动画效果仍然比较困难。幸运的是，有很多在线工具可以帮助我们可视化 cubic-bezier 曲线，并实时预览动画效果。例如：

cubic-bezier.com: 一个简单易用的在线工具，可以调整控制点，并预览动画效果。
Chrome DevTools: Chrome 浏览器的开发者工具也提供了 cubic-bezier 编辑器，可以直接在 CSS 代码中调整控制点，并实时查看动画效果。

这些工具可以帮助我们更直观地理解 cubic-bezier，并快速找到适合我们需求的参数。

高级应用与注意事项

模拟物理效果： cubic-bezier 可以用来模拟一些简单的物理效果，例如弹簧效果、重力效果等。通过调整控制点，我们可以创造出更逼真的动画。
与其他动画技术结合： cubic-bezier 可以与其他动画技术结合使用，例如 CSS 变形 (transform)、滤镜 (filter) 等，创造出更复杂的动画效果。
性能优化： 复杂的 cubic-bezier 函数可能会影响动画的性能。在实际应用中，我们需要权衡动画效果和性能，选择合适的 cubic-bezier 函数。尽量避免过于复杂的曲线，并使用硬件加速来提高动画性能。
平滑过渡： 当从一个cubic-bezier 函数过渡到另一个时，可能会出现不平滑的跳跃。这可以通过使用相似的曲线来减轻，或者使用 JavaScript 来更精细地控制过渡。

总结

cubic-bezier 是 CSS 动画中一个强大而灵活的工具，理解它的原理可以让我们更精准地控制动画，创造更流畅、更自然的动画体验。通过掌握参数方程、计算方法、以及一些实际应用技巧，我们就可以充分利用 cubic-bezier，创造出令人惊艳的动画效果。掌握原理，灵活运用，创造更棒的动画。