先来看一下动画效果：
此动画在一些直播平台中比较常见，今天就用js来实现一下这个效果。
分析一下动画的要点：
1. 首先需要一条运动轨迹，也就是运动线路
2. 不断更新dom节点在这条路线的位置
先说第一点运动线路相信大家都知道贝塞尔曲线，没错就是它，借用网上几张图片来看一下贝塞尔曲线。
- 一阶贝塞尔曲线
- 二阶贝塞尔曲线
- 三阶贝塞额曲线
上图可知贝塞额曲线就是给出几个点带入贝塞尔曲线公式，然后生成一条曲线，我们就可以利用这个曲线来做动画效果来。关于贝塞额曲线的详细知识大家可自行查阅资料。
我们主要运用三阶贝塞额曲线来实现动画效果，三阶贝塞尔曲线公式如下：
// t 表示一条曲线是由多少个点组成
// p0, p1, p2, p3 分别是四个点坐标
function bezier(t, p0, p1, p2, p3) {
const [x0, y0] = p0;
const [x1, y1] = p1;
const [x2, y2] = p2;
const [x3, y3] = p3;
const x =
x0 * (1 - t) * (1 - t) * (1 - t) +
3 * x1 * t * (1 - t) * (1 - t) +
3 * x2 * t * t * (1 - t) +
x3 * t * t * t;
const y =
y0 * (1 - t) * (1 - t) * (1 - t) +
3 * y1 * t * (1 - t) * (1 - t) +
3 * y2 * t * t * (1 - t) +
y3 * t * t * t;
return [x, y];
}
例如： bezier(30, [45, 300], [120, 90], [10, 210], [0, 0])
生成的曲线是这样的，第一个参数表示曲线要由30个点组成，这里注意左上角坐标为[0, 0]
然后我们就可以创建一个dom节点，让dom节点定时刷新改变其坐标位置动画就ok了。 实现的完成代码请参考: git完整代码
