跳起来:你不知道的CSS Animation新的Steps()值

 阅读约 7 分钟

CSS动画中有一个animation-timing-function属性,它的取值除了ease,linear,cubic-bezier之外,还有一个steps()阶跃函数,这篇文章我们来讨论steps()函数新增的四种取值。到目前为止,这新增的几个取值仅在Firefox 65+中可用,也就是说在其他浏览器实现之前,演示只能在Firefox中实现。

steps()函数中新增的四个值是:

  • jump-start
  • jump-end
  • jump-both
  • jump-none

图片描述
这些新增的值与已有的值有什么区别?它们适合在什么时候使用?下面的内容将详细介绍。

Easings和steps()函数

首先,我们后退一步,看一看animation-timing-function属性中easings取值和steps()函数的传统取值。

Easings可以改变一个transition或者animation或者Web Animations API中动画的节奏,这个节奏是连续性的。

.mover {
  animation: move 2000ms;
  animation-timing-function: linear; /* easing */
  transform: translateX(0px);
}

@keyframes move {
  100% {
    transform: translateX(200px);
  }
}

通过一个linear easing,元素会以均匀的速度移动。如果我们改变为ease-in,元素的移动节奏就会变为刚开始慢,到动画快结束时加速变快。

Steps则不同,我们可以将动画划分为特定数量的动画帧,所以,如果改变easing为steps(2),那么动画将只有两个动画帧,开始帧和结束帧。

steps()函数的第二个(可选)参数指定在每个间隔的起点或是终点发生阶跃变化。之前支持start和end两个值,现在又增加了四个新值。

Start和End

在新增的四个值中,其中有两个其实是原来start和end的代替值:

  • jump-start === start
  • jump-end === end

jump前缀帮助我们更有效地解释单词start和end。当我们使用start或jump-start时,我们告诉动画跳过起始位置。同样的,使用end或jump-end时,我们希望跳过结束位置。

你可以将steps(n)理解为一个linear均速移动的动画元素按照指定的时间间隔进行快照截取,动画的过程就是一个快照接着一个快照显示的过程。当我们指定一个动画为steps(4, jump-start)时,意味着将一个平滑的动画过程平均划分为四部分,然后取每个部分的开始状态进行快照截取,并将这些快照显示出来。同样的,steps(5, jump-end)意味将一个平滑动画平均划分为五个部分,取每个部分的结束状态进行快照截取,最后将这些快照显示出来。
图片描述

旋转

当我们想到时钟上的秒针时,就可以更清楚的认识到start和end两个值的作用 - 秒针需要运行60秒旋转一圈(从0度到360度),也就是steps(60)。无论使用jump-start/start还是jump-end/end都可以实现一圈又一圈的连续旋转,但是,如果jump-start/start和jump-end/end都显示每个动画帧的起始状态和结束状态,那么秒针就会在最顶部0度的位置停留两次,这明显是不符合常规的。
图片描述

雪碧图

steps()另一个重要的应用是雪碧图动画。通过从translateX(0)到translate(-100%) 位移的改变,将一组动画帧组成一个连续的动画。
图片描述

jump-none

与jump-start,jump-end只是命名方式的改变不同,这是一个新增的steps取值。

有时候我们并不需要跳过动画的任何一个状态。新的取值jump-none就支持同时保留动画的起始状态和结束状态。对于一个包含至少2帧的动画来说,起始状态和结束状态都将会显示出来。其余的动画帧将均匀的分部在两个状态的中间。例如steps(3, jump-none)会将整个动画平均分配为三个动画帧,即0%,50%和100%。

移动一个元素

一个简单的例子就是在屏幕上移动一个元素,让它以steps阶跃的方式从A点移动到B点。以前我们只能跳过开始状态或者结束状态,并没有一种简单的方法让动画同时显示两种状态。而现在我们有了jump-none:
图片描述

使用steps()方法之前的取值,仍然能够实现这一点,但是需要做一些额外的数学计算。现在则变得简单了,因为你知道动画的起始状态和结束状态都会被显示。

Opacity

不透明度Opacity属性的动画同样可以从新的取值jump-none中受益,假如我们需要实现一个不透明度Opacity从0到1阶跃重复变化的动画(即闪烁效果),使用start或end值,将永远看不到完全不透明或完全透明的状态。但是jump-none则不会出现这种问题,一个被设置为steps(2, jump-none)的动画会实现类似on/offk的效果:
图片描述

jump-both

我们可以跳过阶跃动画的起始状态,可以跳过结束状态,可以两个状态都不跳,那么就剩下jump-both了,它表示起始和结束的两个状态都跳过。
图片描述

我还没有想到适合这个取值的用途,如果你想到了可以在下面评论告诉我。

浏览器支持

Webkit和EdgeHTML内核的浏览器到目前为止还不支持新增的steps函数值,所以我们仅仅是用于学习实验,不要将它们使用在实际项目中。
图片描述

阅读 739发布于 6月3日
推荐阅读
CSS技术学习
用户专栏

CSS技术学习

438 人关注
54 篇文章
专栏主页
目录