css3 animation 中的贝塞尔曲线(cubic-bezier)

html-css047

css3 animation 中的贝塞尔曲线(cubic-bezier),第1张

表面上看，需要设置两个点，实际上包含了两个掩藏点 起始点 (0,0) 和 终点 (1,1) 。所以实际上应该是以下效果。

可以看出，贝塞尔曲线是由4个点构成的一条线，可能是任意形状的线。下面给出一些线型例子来说明。

这种运动模式下 x1 ∈ [0, 0.5], 且 y1 >x1 且 x2 ∈ [0.5, 1] 且 y2 <x2 。此时的运动轨迹习惯上称之为 ease ，下面给出一个夸张点的图像：

这种模式下，x1 ∈ [0, 1] 且 y1 <x1 且 x2 ∈ [0, 1] 且 y2 <x2 。 此时的运动轨迹成为 ease-in ，下面是示意图：

这种模式是与 3 的情况相反，所以 x ∈ [0, 1] 且 y >x 时，这里两个点都要符合这种情况才能实现。习惯上称这种情况为 ease-out ，下面给出示意图：

以上的四种情况中，常见的 ease-in-out 与 ease 的曲线一致，只是 ease-in-out 慢的部分更慢，快的部分更快。

可以用过 这个网站 观察贝赛尔曲线的运动轨迹。

另外，本文参考自

CSS动画中使用的是三阶曲线，如下图所示，三阶曲线共有P0,P1,P2,P3四个节点，其中P0是起点、P3是终点，P1和P2是控制点。同时CSS中使用的曲线，有些特殊，它固定了起点P0(0,0)和终点P3(1,1)，仅有控制点可以移动。移动控制点可以改变曲线的曲率(弯曲的程度)，通过曲率的变化反映出速率的变化，应用于动画之中。

之后我们来看下曲率对应速率变化的规律。X轴和Y轴，我们理解为时间轴和距离变化轴，那么单位时间内，距离变化的多少，反应出来的就是速度的快慢。

下图中，X轴的切分是均等的，同时虚线矩形内，x1对应的y1、x2对应的y2，也是相等的，那么认为起点到终点是匀速变化的。

下图中，X轴的切分是均等的，同时虚线矩形内，x1对应的y1 大于 x2对应的y2，那么认为起点到终点的运动过程中，速度是先快后慢的。

这两种曲线反应到具体的动画之中的效果如下。

CSS动画中，使用贝塞尔曲线作为值的属性有两个，transition-timing-function，animation-timing-function，格式为cubic-bezier(P1x,P1y,P2x,P2y)，实际应用中的代码实例 transition: all 3.0s cubic-bezier(0.75, 0.25, 0.25, 0.75)。

可能你大多看到的是，ease,linear,ease-in-out 这样的属性值，其实它们也是贝塞尔曲线值，只不过是官方预定义的，以简化明了的名称，替代了复杂的数值书写方式。

以下是一些预定义名称对应的曲线值：

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

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

ease-in: cubic-bezier(0.42, 0, 1.0, 1.0)

ease-out: cubic-bezier(0, 0, 0.58, 1.0)

ease-in-out: cubic-bezier(0.42, 0, 0.58, 1.0)

CSS的动画过程中可以使用贝塞尔曲线等函数指定缓动的动画动作，还可以指定过渡中的每一步骤的状态，这种应用场景通常在创建定格动画的时候，比如一个DOM元素需要展示不同的图组动画，那么前端可以将多个动画图组存放到一个文件夹中，然后通过设置定位，让元素每次显示其中的一个图像。

我们可以尝试在网上找一个动画组的图片。

如果只使用 background-position 属性来实现背景动画，如果使用线性或缓动过渡，那么背景图片只会滑动，无法构成动画，因此，我们使用 steps() 步进函数通过将动画组图片拆解为多个步骤下发出去来完成过渡。

这里的 steps(6, start) 函数指的是“把过渡过程切分为6个不同的步骤，在每一次开始时改变属性”。加上开始的状态，就这样创建了7个帧。

一般steps(6)会在每一步结束时改变属性，但也可以通过传入start或者end作为第二个参数进行说明来明确的指定。

同时需要对步进函数进行声明的是：在完成过渡后，指令结束也就是指鼠标移开的话，过渡则会反向发生，反转的动画仍有6个步骤，这几个步骤不会与原来的背景位置吻合，也就是说当鼠标移开时，会产生动画错乱。

因此后面几种过渡技术可以相对的避免这种情况发生：