cubic-bezier曲线运动的简单探索

模板代码：

其中，run-right-right控制向右运动，run-right-top控制向上运动。（当然，模板默认做直线运动）
贝塞尔曲线传送门
打开传送们，我们修改run-right-top的缓动函数，对比着看，如下图：
即改这句：

animation: run-right-right .7s 0.4s 1 linear, run-right-top .7s 0.4s 1 linear;

linear

Jietu20191201-220043.jpg

linear.gif

ease

Jietu20191201-220055.jpg

ease.gif

ease-out

Jietu20191201-215950.jpg

ease-out.gif

由于篇幅限制，就不一一上传了。

可以看到，在水平运动为匀速运动时，改变垂直运动的缓动函数可以带来直观的与之对应的路径效果。同样的，我们可以定制我们的贝塞尔曲线，让小球沿着路线运动。比如，来个炫的：（最后上传的一次了）

cubic-bezier(.37,-0.99,.16,1.04)

Jietu20191201-221656.jpg

custom.gif

另外，如果垂直缓动函数为linear，改水平的缓动函数，会发生什么事呢？（最最最后的一次上传）
让我们以ease-out为例子：（以下图1为ease-out的曲线）

Jietu20191201-222322.jpg

ease-out-reverse.gif

可以观察得知，改水平的缓动函数会使小球做镜像曲线运动（图1斜线即对称轴）。其实这个观点不是很准确，因为看一下接下来改动水平缓动函数为之前我们的定制函数cubic-bezier(.37,-0.99,.16,1.04)：

Jietu20191201-223518.jpg

custom-reverse.gif

这样又得不出结论了，有一定规律，但说不出来，对于像ease这样的函数应该简单理解水平会做镜像曲线运动是没什么问题的，对于复杂的还是要多实践。