正题前的逼逼赖赖： 上一篇实现了绘制出理想的贝塞尔曲线获取三次贝塞尔曲线的点坐标（canvas），然后就要实现曲线运动了。
效果图
注意点
找到贝塞尔曲线上的点的坐标，用到了计算公式 B(t) = (1-t) [(1-t)2P0+ 2 (1-t) tP1 + t2P2] + t [(1-t)2P1+ 2 (1-t) tP2 + t2P3]，0 <= t <= 1 其中可以控制t的值来实现一个运动的效果，关于这个计算有很多大佬的博客有些。找找就有了要绘制的如果是规则的形状就就不提了，如果绘制的是图片，记得让ui不要透明边也切进去。控制贝塞尔曲线的形状，尽量不要让两个物体”相撞了“
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document
</title>
<style type="text/css">
body {
background: black;
}
#canvas {
position: absolute;
top: 0;
left: 0;
}
#line {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<canvas id="canvas" width="1080" height="1000"></canvas>
<canvas id="line" width="1080" height="1000"></canvas>
<script>
function Curve(lineList, rate, wraper, loop, url) {
this.line_list = lineList,
this.rate = rate,
this.t = 0,
this.loop = loop || false;
this.url = url;
this.ctx = wraper.getContext('2d');
}
Curve.prototype.drawline = function () {
var ctx = this.ctx;
for (var i = 0; i < pointarr.length; i++) {
var point = pointarr[i];
ctx.beginPath();
ctx.moveTo(point.begin.x, point.begin.y);
ctx.bezierCurveTo(point.control1.x, point.control1.y, point.control2.x, point.control2.y, point.end.x, point.end.y);
ctx.strokeStyle = "#2578b0";
ctx.lineWidth = 2;
ctx.stroke();
}
}
Curve.prototype.drawPoint = function drawPoint(point,t, obj) {
var ctx = this.ctx
let x = point.begin.x * Math.pow((1 - t), 3) + 3 * t * point.control1.x * Math.pow((1 - t), 2) + 3 * point.control2.x * Math.pow(t, 2) * (1 - t) + point.end.x * Math.pow(t, 3);
let y = point.begin.y * Math.pow((1 - t), 3) + 3 * t * point.control1.y * Math.pow((1 - t), 2) + 3 * point.control2.y * Math.pow(t, 2) * (1 - t) + point.end.y * Math.pow(t, 3);
ctx.clearRect(obj.x, obj.y, this.image.width / 5, this.image.height / 5);
x = x - this.image.width / 5 / 2;
y = y - this.image.height / 5 / 2
ctx.drawImage(this.image, 0, 0, this.image.width, this.image.height, x, y, this.image.width / 5, this.image.height / 5)
return { x, y }
}
Curve.prototype.loadImage = function (fn) {
var image = new Image();
image.src = this.url;
var _this = this;
image.onload = function () {
_this.image = this;
if (fn) {
fn();
}
}
}
Curve.prototype.animate = function () {
let i = 0;
var _this = this;
let p = new Promise((resolve, reject) => {
console.log('加载图片')
_this.loadImage(resolve);
})
p.then(function () {
var obj = { x: 0, y: 0 };
let t = _this.t;
console.log('加载成功')
let tid = setInterval(() => {
var point = _this.line_list[i];
obj = _this.drawPoint(point,t, obj);
t += _this.rate;
if (t > 1) {
t = 0;
i++;
if (i > (_this.line_list.length - 1)) {
if (_this.loop) {
i = 0;
} else {
console.log(i)
_this.ctx.clearRect(obj.x, obj.y, _this.image.width / 5, _this.image.height / 5);
clearInterval(tid);
}
}
}
}, 20);
})
}
Curve.prototype.animate_line = function () {
this.animate()
setInterval(() => {
this.animate()
}, 3000)
}
var pointarr = [
{
begin: {
x: 500,
y: 0
},
control1: {
x: 0,
y: 75
},
control2: {
x: 1000,
y: 225
},
end: {
x: 500,
y: 300
}
}, {
begin: {
x: 500,
y: 300
},
control1: {
x: 50,
y: 375
},
control2: {
x: 1100,
y: 525
},
end: {
x: 500,
y: 600
}
}, {
begin: {
x: 500,
y: 600
},
control1: {
x: 360,
y: 675
},
control2: {
x: 1800,
y: 825
},
end: {
x: 500,
y: 900
}
}
]
var canvas1 = document.getElementById('line');
var canvas2 = document.getElementById('canvas')
var c1 = new Curve(pointarr, 0.03, canvas1)
var c2 = new Curve(pointarr, 0.005, canvas2, false, './appcharacter/1/ (1).png')
c2.animate_line()
</script>
</body>
</html>
