使用cc.tween的progress自定义实现抛物线

贝塞尔资料链接

参数说明

p0是起始点
p1是中点
p2是终点
p1通过p2和p0的Xaxis相减获得
height是p0加上的高度
t 的取值范围是0-1(整个过程的归一化)


let bezier = (p0, p2, height, t): cc.Vec2 => {
    let t1 = (1 - t) * (1 - t);
    let t2 = 2 * t * (1 - t);
    let t3 = t * t
    let p1 = cc.v2(p0.x + (p2.x - p0.x) / 2, p0.x + height);
    return p0.mul(t1).add(p1.mul(t2)).add(p2.mul(t3));
}
cc.tween(node)
    .to(1, {
        position: {
            value: destPos,
            progress: (start, end, current, t) => {
                let dest = bezier(start, end, 200, t);
                // console.log("dest", dest)
                return dest
            }
        }
    })
Logo

这里是一个专注于游戏开发的社区,我们致力于为广大游戏爱好者提供一个良好的学习和交流平台。我们的专区包含了各大流行引擎的技术博文,涵盖了从入门到进阶的各个阶段,无论你是初学者还是资深开发者,都能在这里找到适合自己的内容。除此之外,我们还会不定期举办游戏开发相关的活动,让大家更好地交流互动。加入我们,一起探索游戏开发的奥秘吧!

更多推荐