cubic-bezier曲线运动的简单探索
2019-12-01 本文已影响0人
kofzx
模板代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.ball {
height: 30px;
width: 30px;
border-radius: 50%;
position: absolute;
bottom: 40px;
z-index: 10;
left: 40px;
background: #2bd8ff;
}
.run_top_right {
display: block;
animation: run-right-right .7s 0.4s 1 linear, run-right-top .7s 0.4s 1 linear;
animation-fill-mode: forwards;
}
@keyframes run-right-top {
0% {
bottom: 40px;
opacity: 1;
}
50% {
opacity: 1;
}
100% {
bottom: 400px;
opacity: 0;
}
}
@keyframes run-right-right {
0% {
left: 40px;
}
100% {
left: 300px;
}
}
</style>
</head>
<body>
<div class="ball run_top_right"></div>
</body>
</html>
其中，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这样的函数应该简单理解水平会做镜像曲线运动是没什么问题的，对于复杂的还是要多实践。
