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

贝塞尔曲线用于控制动画执行时间内时间段的划分。

贝塞尔曲线的基本用法

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

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

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

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

1. 匀速运动
   当 x1 = y1 且 x2=y2 时，都是进行的匀速运动，动画进度/时间曲线 如下:

匀速运动的图像

2. 慢 -> 快 -> 慢 式运动模式

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

ease 动画执行图像

3. 慢 -> 快 运动模式

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

ease-in.png

4. 快 -> 慢 运动模式

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

ease-out

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

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

另外，本文参考自

1. https://blog.csdn.net/web_xyk/article/details/80027701
2. http://www.fly63.com/article/detial/6063?type=1