CSS3 animation属性

╰+哭是因爲堅強的太久メ 2021-09-18 23:40 291阅读 0赞

> timing-function 是用来描述 CSS3 animation 动画曲线的函数，通常称之为缓动函数.

div {
      animation: mv 3s ease;
    }

这里的 `ease` 就是一个 timing-function。那么 ease 真的就是函数吗？还可以定义其它的缓动过程吗？通常我们用到的动画都是连续的，那么有不连续的动画吗？这些问题都和 timing-function 有关，接下来我们就来详细了解一下。

timing-function 实际只包含两个函数（类似 ease 这样的其实是表示某个取值的关键字），二者的本质区别在于动画是否是连续的

*  `cubic-bezier()` 连续动画
 *  `steps()` 逐帧动画

### cubic-bezier() ###

一条连续的贝塞尔曲线，由 4 个坐标点组成，P0 、P1 、P2 和 P3，横轴为时间比例，纵轴为完成状态。

完成度
     |      P3
     |
     |
     |P0————————时间

`P0` 是起点，坐标为（0, 0）表示初始时间和初始状态。

cubic-bezier(x1, y1, x2, y2)

实际开发中我们通常不会直接去使用这个函数，而是用一些该函数内置的关键字：

`linear`

cubic-bezier(0.0, 0.0, 1.0, 1.0)

`ease`

cubic-bezier(0.25, 0.1, 0.25, 1.0)

`ease-in`

cubic-bezier(0.42, 0.0, 1.0, 1.0)

`ease-in-out`

cubic-bezier(0.42, 0.0, 0.58, 1.0)

`ease-out`

cubic-bezier(0.0, 0.0, 0.58, 1.0)

### steps() ###

和上面的连续动画不一样，由 steps() 定义出来的动画不是连续的，而是逐帧的。

语法为：

steps(number_of_steps, position)

用`steps()`语法表示就是：

steps(number, position)

其中：

*  `start`：表示直接开始。
 *  `end`：表示戛然而止。是默认值。

**number**

数值。这个很好理解，表示把我们的动画分成了多少段。

假设有如下CSS3动画`keyframes`，定义了一段从`0~100px`的位移：

@keyframes move {
        0% { left: 0; }
        100% { left: 100px; }
    }

假设我们的`number`值是5，则相当于把这段移动距离分成了5段，如下示意图：

![steps分段示意图][steps]

**position**

关键字。表示动画是从时间段的开头连续还是末尾连续。支持`start`和`end`两个关键字，含义分别如下：

为什么position非常难理解？

我认为两个原因：

1.  `steps()`属于timing function，也就是时间函数，时间这个东西是虚的，看不见，摸不着，联想乏力，所以认知成本高。这也是为什么那么多人都不珍惜时间的原因——无法感知。
2.  CSS规范中对于`start`和`end`的定义是基于数学函数来的，函数这东西，多少人的噩梦，因为过于抽象，与现实难以关联，所以，如果我们盯着定义去理解`start`和`end`，那就是死胡同，不归路，就算现在弄懂了，过段时间再遇到，得了，全忘光光了，函数图哪个是哪个，鬼才记得。下面这张图就出自[规范文档][Link 1]：
    
    ![steps()规范函数示意][steps 1]
    
    按照规范图再细化解释就是：
    
     *  `start`：表示直接开始。也就是时间才开始，就已经执行了一个距离段。于是，动画执行的5个分段点是下面这5个，起始点被忽略，因为时间一开始直接就到了第二个点：
        
        ![start执行的关键点][start]
     *  `end`：表示戛然而止。也就是时间一结束，当前距离位移就停止。于是，动画执行的5个分段点是下面这5个，结束点被忽略，因为等要执行结束点的时候已经没时间了：
        
        ![end执行的关键点][end]

基于现实感知重新理解position！

万物具有相对性。例如，苍蝇眼中的人类动作都是慢动作，但是人类眼中的苍蝇却非常敏捷。

同样的，`start`和`end`这里的开始和结束是相对于时间而言的，但是，如果站在人类可感知的具体事物而言，`start`和`end`却是相反的含义。

所以，我们可以这么理解：

*  `start`：表示结束。分段结束的时候，时间才开始走。于是，动画执行的5个分段点是后5个点：
    
    ![start执行的关键点][start]
 *  `end`：表示开始。分段开始的时候，时间跟着一起走。于是，动画执行的5个分段点是前5个点：
    
    ![end执行的关键点][end]

记住position参数的含义

牢记这么一句话：**一切都是反的！start不是开始，而是结束；end不是结束，而是开始。**

steps() 也有两个关键字：

`step-start`和`step-end`是`steps()`功能符简化关键字，注意，是`step-*`，`step`，后面没有`s`。

其中，`step-start`等同于`steps(1, start)`，`step-end`等同于`steps(1, end)`或者`steps(1)`。

`step-start`和`step-end`用中文短句解读就是：一步到位和延迟到位，在实际项目中有什么作用呢？

对于只有`0%,100%`或`from, to`两个关键时间帧的动画，`step-start`和`step-end`是没有任何需要使用的理由的。

参考文档 : [https://www.zhangxinxu.com/wordpress/2018/06/css3-animation-steps-step-start-end/][https_www.zhangxinxu.com_wordpress_2018_06_css3-animation-steps-step-start-end]

[steps]: /images/20210726/ac280ac2cbbc4a018ccc77a96d4f2953.png
[Link 1]: https://www.w3.org/TR/css-timing-1/#step-timing-functions
[steps 1]: /images/20210726/208000d838f04a41a22bd8efe3352717.png
[start]: /images/20210726/966b6110775f466eb0bd36231b22d9a6.png
[end]: /images/20210726/90b49c41e8e74b4eb86317d140187c43.png
[https_www.zhangxinxu.com_wordpress_2018_06_css3-animation-steps-step-start-end]: https://www.zhangxinxu.com/wordpress/2018/06/css3-animation-steps-step-start-end/