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

引入了 linear(),它是 CSS 中的加/减速函数,可在其点之间线性插值,让您能够重新创建弹跳和弹簧效果。

CSS 中的加/减速选项

在 CSS 中为元素添加动画效果或转换效果时,您可以使用 animation-timing-functiontransition-timing-function 属性,通过加/减速函数控制值的变化速率。

CSS 中有多个作为预设的关键字,分别为 lineareaseease-inease-outease-in-out。如需创建自己的加/减速曲线,请使用 cubic-bezier() 函数,或使用 steps() 加/减速函数采用基于步骤的方法。

如果使用得当,缓动可以给动画元素赋予一种重量感,因为看起来会积累动量。

您无法在 CSS 中创建弹跳或弹簧效果等复杂的曲线,但借助 linear(),您现在可以完美地逼近它们。

linear()简介

浏览器支持

  • Chrome:113。 <ph type="x-smartling-placeholder">
  • Edge:113。 <ph type="x-smartling-placeholder">
  • Firefox:112。 <ph type="x-smartling-placeholder">
  • Safari:17.2. <ph type="x-smartling-placeholder">

在 CSS 中定义加/减速选项的新方法是使用 linear()。此函数接受多个经停点(用逗号分隔)。每个经停点都是一个介于 0 到 1 之间的数字。在每个停靠站之间,插值以线性方式完成,并解释函数的名称。

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

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

直观呈现,linear(0, 0.25, 1) 的图表如下所示:

线性(0, 0.25, 1) 的图表可视化效果。

如果您不希望各个经停点均匀分布,可以选择传入经停点长度。传入一个值作为停止长度时,您可以定义其起点:

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

此处,0.25 的输出值不在 50% 标记处,而是在 75% 标记处。

线性(0, 0.25 75%, 1) 的图表可视化效果。

将两个值指定为停止长度时,您可以同时定义其起点和终点:

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

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

线性图表可视化(0, 0.25 25% 75%, 1)。

使用 Linear() 创建复杂曲线

虽然上面的示例是非常简单的加/减速函数,但您可以使用 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
);

一款实用的工具

手动创建此经停点列表非常麻烦。幸运的是,JakeAdam 创建了一个一个工具,可帮助您将加/减速曲线转换为对应的 linear() 版本

<ph type="x-smartling-placeholder">
</ph> 线性加/减速生成器工具的屏幕截图。
https://linear-easing-generator.netlify.app/ 的实际效果
屏幕截图。

该工具将 JavaScript 加/减速函数或 SVG 曲线作为其输入,并使用 linear() 输出简化的曲线。使用滑块控制所需的经停点数量及其精度。

你还可以在右上角选择预设之一:“弹簧”、“弹跳”、“简单弹性”或“Material Design 强调缓和”。

开发者工具支持

开发者工具中提供了相应支持来直观呈现和修改 linear() 的结果。点击该图标即可显示互动式提示,供您在停靠点四处拖动。

<ph type="x-smartling-placeholder">
</ph> Chrome 开发者工具的 `Linear()` 编辑器的屏幕截图。
Chrome 开发者工具的 `Linear()` 编辑器的屏幕截图。

这项开发者工具功能在随 Chrome 114 一起提供的开发者工具中提供。

照片提供者:Howie Mapson,来源:Unspin