基于cocos creator2.4.11 实现的匀速三阶贝塞尔曲线运动

基于cocos creator2.4.11 实现匀速三阶贝塞尔曲线运动

在游戏里实现一些曲线运动是很有意思的，但是cocos 的贝塞尔曲线运动不支持匀速，所以这里自己动手实现了一个

先看效果

正常运动 是使用cocos自带的贝塞尔曲线运动方法

匀速运动 是自己实现的贝塞尔曲线运动方法

绿色的点为物体实时运动记录

实现思路和步骤

实现的思路其实比较简单,就是根据贝塞尔曲线的生成公式自己算每个点,然后将生成的点两两连接起来,组成一段近似的直线,在直线上做匀速运动就比较简单了,每一个段的匀速运动组合起来就实现了匀速曲线运动

网上关于贝塞尔曲线的公式和原理推导有很多,这里不做探究,找到一个三阶的公式如下:

B(t)=(1−t)3P0+3t(1−t)2P1+3t2(1−t)P2+t3P3，t∈[0,1]

写一下解决问题的大体思路和步骤

1、根据贝塞尔曲线公式，生成曲线组成的近似点集posArr，因为我们生成的点与点之间是很密集的，所以曲线每两个点之间可以近似看做直线。怎么记录这些点呢，这里我是根据一个时间步长递进,完成时间从0-1的位置记录，一段贝塞尔曲线大概用了300个点来记录，这里可以根据曲线长度自己适配。

2 、计算贝塞尔曲线的长度，上一步我们已经记录了所有的曲线点，每两个曲线点又可以看做是一条直线，所以只需要将记录的点，两两看做线段按照直线的方式算出来累加即可。

3、根据曲线长度和物体按照曲线运动的时间（这个时间是我们自己定的），就可以算出物体运动的平均速度v = s/t，然后在将曲线组posArr中 每一段的距离/平均速度，算出这一段需要耗费的时间，到这里可以直接按照直线运动的方式移动物体，用引擎自带的cc.tween().to(t, { position: pos })去完成这一段的运动或者自己在update里面算，接下来我们只需要循环遍历将曲线中的每一段都按照直线运动的方式即可。

至此我们就完成了贝塞尔曲线的匀速运动，具体细节可以直接看代码

核心代码如下：

export class BezierData {
   
   
    startPos: cc.Vec2;
    c1: cc.Vec2;  // 起点的控制点
    c2: cc.Vec2;  //终点的控制点
    endPos: cc.Vec2;
}

const {
   
    ccclass, property } = cc._decorator;

@ccclass
export default class Test extends BaseUI {
   
   

    // 引擎自带的贝塞尔曲线运动
    runBezierAct(actNode: cc.Node, duration: number, bezierDatas: BezierData[]) {
   
   
        if (bezierDatas.length <= 0) return
        let tw = cc.tween()
        for (let i = 0; i < bezierDatas.length; ++i) {
   
   
            tw.bezierTo(duration, bezierDatas[i].c1, bezierDatas[i