cocos creator 3.x使用tween缓动接口和贝塞尔曲线实现简易抛物线

最新推荐文章于 2025-04-30 16:58:24 发布

灰机大大

最新推荐文章于 2025-04-30 16:58:24 发布

阅读量4.4k

点赞数 2

分类专栏： cocos creator typescript 文章标签： typescript 游戏引擎

本文链接：https://blog.youkuaiyun.com/hangsky1990/article/details/129890209

版权

cocos creator 同时被 2 个专栏收录

10 篇文章

订阅专栏

typescript

1 篇文章

订阅专栏

本文介绍了在2dx和3.x接口不兼容的情况下，如何利用3.x中的缓动函数和onUpdate钩子，结合贝塞尔曲线的坐标计算，来创建一个简单的抛物线运动效果，例如模拟人物跳跃和投掷物轨迹。示例代码展示了从起点到最高点再到终点的节点运动过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

抛物线还是比较常用的，人物跳跃，投掷物等等，2dx和3.x接口很多都不兼容了，本文使用3.x中的缓动函数配合onUpdate钩子，计算并设置贝塞尔曲线中的坐标实现简易的抛物线运动。

代码：

nodeMoving(node) { //node为做抛物线运动的节点
    let startPos = node.position //起点，抛物线开始的坐标
    let middlePos = new Vec3(node.position.x + 400, node.position.y + 600, 0) //中间坐标，即抛物线最高点坐标
    let destPos = new Vec3(node.position.x + 800, node.position.y, 0) //终点，抛物线落地点
    //计算贝塞尔曲线坐标函数
    let twoBezier = (t: number, p1: Vec3, cp: Vec3, p2: Vec3) => {
      let x = (1 - t) * (1 - t) * p1.x + 2 * t * (1 - t) * cp.x + t * t * p2.x;
      let y = (1 - t) * (1 - t) * p1.y + 2 * t * (1 - t) * cp.y + t * t * p2.y;
      return new Vec3(x, y, 0);
    };
    let tweenDuration: number = 1.0;
    tween(node.position)
      .to(tweenDuration, destPos, { 
        onUpdate: (target: Vec3, ratio: number) => {
          node.position = twoBezier(ratio, startPos, middlePos, destPos); 
        }
      }).start();
  }