本文是看了志佳老师的公开课学习的，**模仿淘宝的加入购物车动画**，实现贝塞尔曲线运动的动画路径效果,如下所示。
#前沿：
1.贝塞尔曲线原理：https://blog.csdn.net/cdnight/article/details/48468653
贝塞尔曲线在 web 开发领域同样占有一席之地。CSS3 新增了 transition-timing-function 属性，它的取值就可以设置为一个三次贝塞尔曲线方程。在此之前，也有不少 JavaScript 动画库使用贝塞尔曲线来实现美观逼真的缓动效果。
下面我们就通过例子来了解一下如何用 de Casteljau 算法绘制一条贝塞尔曲线。
在平面内任选 3 个不共线的点，依次用线段连接。
在第一条线段上任选一个点 D。计算该点到线段起点的距离 AD，与该线段总长 AB 的比例。
根据上一步得到的比例，从第二条线段上找出对应的点 E，使得 AD:AB = BE:BC 。
连接这两点 DE。
从新的线段 DE 上再次找出相同比例的点 F，使得 DF:DE = AD:AB = BE:BC 。
到这里，我们就确定了贝塞尔曲线上的一个点 F。接下来，请稍微回想一下中学所学的极限知识，让选取的点 D 在第一条线段上从起点 A 移动到终点 B，找出所有的贝塞尔曲线上的点 F。所有的点找出来之后，我们也得到了这条贝塞尔曲线。
如果你实在想象不出这个过程，没关系，看动画！
回过头来看这条贝塞尔曲线，为了确定曲线上的一个点，需要进行两轮取点的操作，因此我们称得到的贝塞尔曲线为二次曲线（这样记忆很直观，但曲线的次数其实是由前面提到的伯恩斯坦多项式决定的）。
当控制点个数为 4 时，情况是怎样的？
步骤都是相同的，只不过我们每确定一个贝塞尔曲线上的点，要进行三轮取点操作。如图， AE:AB = BF:BC = CG:CD = EH:EF = FI:FG= HJ:HI ，其中点 J 就是最终得到的贝塞尔曲线上的一个点。
这样我们得到的是一条三次贝塞尔曲线。
看过了二次和三次曲线，更高次的贝塞尔曲线大家应该也知道要怎么画了吧。那么比二次曲线更简单的一次（线性）贝塞尔曲线存在吗？长什么样？根据前面的介绍，只要稍作思考，想必你也能猜出来了。哈！就是一条直线~
能画曲线也能画直线，是不是很厉害？要绘制更复杂的曲线，控制点的增加也仅仅是线性的。这一特点使其不光在工业设计领域大展拳脚，就连数学基础不好的人也可以比较容易地掌握，比如大多数平面美术设计师们。
上面介绍的内容并不足以展示贝塞尔曲线的真正威力。推广到三维空间的贝塞尔曲面，以及更进一步的 非均匀有理 B 样条（NURBS） ，早已成为当今计算机辅助设计（CAD）的行业标准，不论是我们平常用到的各种产品，还是在电影院看到的精彩大片，都少不了它们的功劳。
2.贝塞尔曲线演示网站： http://cubic-bezier.com
我们可以在这个网站自己拖动查看不同参数下，三阶贝塞尔曲线的运动速率效果
#思路
将目标对象（本文为一个足球图片）包在两个div中，足球img标签放在最内层里；
内外两层分别从横向和纵向两个方向设置好div的动画，运动时间设置相同则可以出现二维的运动动画效果，理论上可以实现很多复杂的曲线效果。
#源代码：
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>前端使用贝塞尔曲线实现移动曲线动画</title>
<style>
:root{
--main: 200px;
}
.item{
width: var(--mian);
height: var(--mian);
position: absolute;
top: 50px;
left: 20px;
background-color: #00aa00;
border-radius: 50%;
}
.wraper{
animation: ver-animation 2s 0.5s 2;
animation-timing-function: cubic-bezier(0.06, .46, 0, 1.04)
}
.wraper .item{
animation: hor-animation 2s linear .5s 2;
}
@keyframes hor-animation{
0%{
transform: translateX(0px)
}
100%{
transform: translateX(400px)
}
}
@keyframes ver-animation{
0%{
transform: translateY(0px)
}
100%{
transform: translateY(400px)
}
}
</style>
</head>
<body>
<!-- 垂直运动 -->
<div class="wraper">
<!-- 水平运动 -->
<div class="item">
<img src="./images/ball.jpg" style="width:50px;"/>
</div>
</div>
</body>
<script>
</script>
</html>
```
#实现效果如下：
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
