引入了 linear()
,它是 CSS 中的一个加/减速函数,可在各点之间线性插值,让您可以重新创建弹跳和弹簧效果。
CSS 中的加/减速选项
在 CSS 中为元素添加动画或过渡效果时,您可以使用 animation-timing-function
和 transition-timing-function
属性通过加/减速函数控制值变化的速率。
CSS 中有几个作为预设的关键字,即 linear
、ease
、ease-in
、ease-out
和 ease-in-out
。如需创建自己的加/减速曲线,请使用 cubic-bezier()
函数,或使用 steps()
加/减速函数采用基于步骤的方法。
如果使用得当,缓和可以为动画元素赋予一种重量感,因为它看起来会聚集动力。
在 CSS 中无法创建复杂的曲线,例如弹跳或弹簧效果,但借助 linear()
,您现在可以非常好地进行模拟。
linear()
简介
浏览器支持
- 113
- 113
- 112
- x
在 CSS 中定义加/减速的新方式是使用 linear()
。此函数接受若干经停点,用逗号分隔。每个经停点都是一个介于 0 到 1 之间的数字。在每个停靠点之间,插值以线性方式完成,并解释了函数的名称。
animation-timing-function: linear(0, 0.25, 1);
默认情况下,这些经停点以等距分布。在前面的代码段中,这意味着将在 50% 标记处使用 0.25
的输出值。
直观显示 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);
系统会及时使用 25% 至 75% 之间的输出值 0.25。
使用 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
);
一款实用的工具
手动创建此经停点列表会非常麻烦。幸运的是,Jake 和 Adam 开发了一款工具来帮助您将加/减速曲线转换为对应的 linear()
曲线。
该工具将 JavaScript 加/减速函数或 SVG 曲线作为输入,并使用 linear()
输出简化的曲线。使用滑块控制所需的停靠站数量及其精确度。
在右上角,您还可以选择某个预设:包含“弹簧”“弹跳”“简单弹性”或“Material Design 强调缓动”。
开发者工具支持
在开发者工具中支持直观呈现和修改 linear()
的结果。点击该图标可显示一条交互式提示,让您可以在车站周围拖动鼠标。
Chrome 114 随附的开发者工具中提供了此开发者工具功能。
照片由 Howie Mapson 拍摄,选自 Unsplash 网站