CSS 缓动函数是一种用于控制 CSS 动画过渡效果的函数,可以让动画变得更加自然。这篇文章将介绍一种新的 CSS easing function,即 linear()
,它可以模拟出更复杂的缓动效果,文中demo请在chrome 113+中观看。
什么是 easing function?
在动画中,有一种叫做“缓动效果”的技术,它可以让动画变得更加自然。在实现缓动效果时,通常会使用 easing function。easing function 是一种函数,它可以将动画的进度(通常是一个 0 到 1 之间的数字)映射为动画的值。
在 CSS 中,可以使用 easing function 控制 CSS 动画的过渡效果。在 CSS 中,可以使用 transition-timing-function
属性来指定 easing function。例如:
.element {
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
}
在这个示例中,transition-timing-function
属性的值为 linear
,这意味着动画的过渡效果将呈现线性的变化。在动画中,同样有一个animation-timing-function
属性来控制动画的缓动效果。除了 linear 这个关键字之外,还有linear, ease, ease-in, ease-out, ease-in-out等关键字,以及cubic-bezier(p1, p2, p3, p4), steps(n, )等函数。今天我们要说的是一种新的缓动函数 linear(),注意和前面的关键字 linear 区分。
linear缓动函数的语法
.demo { }
假设我们有一个动画,要在3s内对一个div放大到原来的10倍:
linear(0, 1) //等同于关键字linear
linear(0, 0.9, 1) // 0-1.5s 放到到9倍,1.5s-3s放大到10倍
linear(0, 0.5 20%, 0.8 60%, 1) // 0-20%的时间 放到到5倍,20%-60%的时间放大到8倍,最后放大到10倍
画出图来分别是这样的:
img { width: 200px; display: inline-block; margin-right: 20px }
linear | 图 |
---|---|
linear(0, 1) | |
linear(0, 0.9, 1) | |
linear(0, 0.5 20%, 0.8 60%, 1) |
See the Pen
linear() by imgss (@imgss)
on CodePen.
linear()模拟跳动效果
虽然我们在上面最多只有4个关键点,但是linear函数可以接收更多的关键点参数来实现更复杂的动画,比如跳动效果。如果你使用过animate.css 的 bounceInDown效果,会发现直接使用之前的CSS的缓动函数是比较难以实现的。在animate.css的实现里面, 是使用一系列关键帧再加上cubic-bezier缓动函数来实现的:
@keyframes bounceInDown {
from,
60%,
75%,
90%,
to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
transform: translate3d(0, -3000px, 0) scaleY(3);
}
60% {
opacity: 1;
transform: translate3d(0, 25px, 0) scaleY(0.9);
}
75% {
transform: translate3d(0, -10px, 0) scaleY(0.95);
}
90% {
transform: translate3d(0, 5px, 0) scaleY(0.985);
}
to {
transform: translate3d(0, 0, 0);
}
}
.bounceInDown {
animation-name: bounceInDown;
}
现在有了linear()缓动函数,我们可以在一个关键帧的情况下再结合linear缓动函数来实现:
linear(
0, 0.063, 0.25 18.2%, 1 36.4%, 0.813, 0.75, 0.813, 1, 0.938, 1, 1
);
See the Pen
linear() by imgss (@imgss)
on CodePen.
上面的缓动函数对应的图像如下:
很明显,如果让我们手写这样一个linear函数还是比较复杂的,好在有大佬帮我们做了一个生成工具:https://linear-easing-generator.netlify.app/
兼容性
最后来看看兼容性,目前在chrome 113+可用,暂时还不能用于生产,但两年应该就可以愉快地使用了,本文完
参考文档
- https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function
- https://web.dev/learn/css/animations/#animation-timing-function
- https://easings.net/zh-cn#
- https://cubic-bezier.com/#.17,.67,.89,.18
- https://linear-easing-generator.netlify.app/
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
机房租用,北京机房租用,IDC机房托管, http://www.fwqtg.net
点分治适合处理大规模的树上路径信息问题。 引入 给定一棵 (n) 个点树和一个整数 (k),求树上两点间的距离小于等于 (k) 的点对有多少。 对于这个题,如果我们进行 (O_{n^3}) 搜索,那只要 (n) 一大,铁定超时。 所以,我们要用一个更优秀的解法…