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

html-css022

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)