使用 linear() 加/减速函数在 CSS 中制作复杂的动画曲线

隆重推出 linear()，这是 CSS 中的一种缓动函数，可在其点之间进行线性插值，让您能够重现弹跳和弹簧效果。

Bramus

CSS 中的缓动

在 CSS 中为元素添加动画或过渡效果时，您可以使用 animation-timing-function 和 transition-timing-function 属性，通过缓动函数控制值的变化速率。

CSS 中有几个关键字可用作预设，即 linear、ease、ease-in、ease-out 和 ease-in-out。如需创建自己的缓动曲线，请使用 cubic-bezier() 函数，或使用 steps() 缓动函数采用基于步数的方法。

如果使用得当，缓动效果会使动画元素在出现时具有一种重量感，仿佛在积蓄动能。

在 CSS 中无法创建复杂的曲线（例如弹跳或弹簧效果），但借助 linear()，您现在可以非常出色地近似实现这些效果。

linear() 简介

您可以使用 linear() 在 CSS 中定义缓动效果。此函数接受以英文逗号分隔的多个停靠点。每个停靠点都是一个介于 0 到 1 之间的数字。每个停靠点之间的插值以线性方式完成，这解释了函数名称的由来。

animation-timing-function: linear(0, 0.25, 1);

默认情况下，这些停靠点均匀分布。在前面的代码段中，这意味着输出值 0.25 将在 50% 标记处使用。

可视化后，linear(0, 0.25, 1) 的图表如下所示：

如果您不希望停靠点均匀分布，可以选择传入停靠点长度。 当传入一个值作为停靠点长度时，您可以定义其出发地：

animation-timing-function: linear(0, 0.25 75%, 1);

在这里，输出值 0.25 不会在 50% 标记处使用，而会在 75% 标记处使用。

当指定两个值作为停靠点长度时，您可以同时定义其起始点和结束点：

animation-timing-function: linear(0, 0.25 25% 75%, 1);

输出值 0.25 将在 25% 到 75% 的时间范围内使用。

创建复杂的曲线

虽然前面的示例是较为简单的缓动效果，但如果您愿意牺牲一些精度，可以使用 linear() 重现复杂的缓动函数。

以这种弹跳缓动曲线为例，这是一种无法在 CSS 中直接表达的缓动类型，使用 JavaScript 定义：

function easing(pos) {
  const t = 7.5625;
  const e = 2.75;
  return pos < 1 / e
    ? t * pos * pos
    : pos < 2 / e
    ? t * (pos -= 1.5 / e) * pos + 0.75
    : pos < 2.5 / e
    ? t * (pos -= 2.25 / e) * pos + 0.9375
    : t * (pos -= 2.625 / e) * pos + 0.984375;
}

虽然代码可能无法告诉您太多信息，但可视化效果可能会有所帮助。以下是输出，以蓝色曲线的形式可视化：

您可以通过在曲线上添加多个停靠点来简化曲线。在这里，每个绿点表示一个停靠点：

传入 linear() 后，生成的曲线看起来有点像原始曲线，但在边缘处略显粗糙。

将绿色动画框与蓝色动画框进行比较，您会发现绿色动画框不够平滑。

但是，如果您添加足够的停靠点，就可以很好地近似原始曲线。以下是更新后的版本：

只需将停靠点的数量翻倍，您就可以获得平滑的结果。

用于添加动画效果的代码如下所示：

animation-timing-function: linear(
  /* Start to 1st bounce */
  0, 0.004, 0.016, 0.035, 0.063 9.1%, 0.141, 0.25, 0.391, 0.563, 0.765, 1,
  /* 1st to 2nd bounce */
  0.891, 0.813 45.5%, 0.785, 0.766, 0.754, 0.75, 0.754, 0.766, 0.785, 0.813 63.6%, 0.891, 1 72.7%,
  /* 2nd to 3rd bounce */
  0.973, 0.953, 0.941, 0.938, 0.941, 0.953, 0.973, 1,
  /* 3rd bounce to end */
  0.988, 0.984, 0.988, 1
);

实用工具

手动创建此停靠点列表非常麻烦。幸运的是，Jake 和 Adam 创建了一个工具，可帮助您将缓动曲线转换为相应的 linear()。

该工具将 JavaScript 缓动函数或 SVG 曲线作为输入，并使用 linear() 输出简化后的曲线。使用滑块控制所需的停靠点数量及其精度。

在右上角，您还可以选择其中一个预设：包括 Spring、Bounce、Simple elastic 或 Material Design emphasized easing。

开发者工具支持

开发者工具支持可视化和修改 linear() 的结果。点击该图标可显示一个互动式工具提示，让您拖动停靠点。

此开发者工具功能在 Chrome 114 及更高版本的开发者工具中提供。