参考：https://phaser.io/examples/v3/view/paths/path-line-and-bezier
首先绘制一条path
1 2 3 4 | this.path = new Phaser.Curves.Path(0, 0); let pointEnd = getPointFromData(data); let controls = getBezierControlPointFrom([0, 0], pointEnd, data.length >= 4); this.path.cubicBezierTo(pointEnd[0], pointEnd[1], controls[0], controls[1], controls[2], controls[3]); |
创建一个follower
1 | this.follower = {t: 0, vec: new Phaser.Math.Vector2()}; |
tween这个follower，t从0到1
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | this.scene.tweens.add({ targets: this.follower, t: 1, ease: 'Circular.Out', duration: 1200, yoyo: false, repeat: 0, onUpdate: () => { let {graphics, points, path, follower} = this; this.throttle(() => { graphics.clear(); path.getPoint(follower.t, follower.vec); // 把path在t进度的point放到follower.vec里面去 if (follower.vec.x && follower.vec.y) { points.push({x: follower.vec.x + beatBallX, y: follower.vec.y + beatBallY}); // 把point存起来到数组中 } graphics.lineStyle(5, 0xffffff, 1); graphics.moveTo(points[0].x, points[0].y); graphics.strokePoints(points); // 把已经存起来的点，连起来，就是从0到当前进度的曲线啦，最后时刻会出现完整曲线 }) }, ) |