在CocosCreator的3.x版本中实现贝塞尔曲线

使用环境参考

CocosCreator v3.7.3

前情提要

在之前的 2.x 版本中，CocosCreator 关于贝塞尔曲线是内置了 API，可以让节点动画直接使用。但在升级到 tween 实现后，灵活了但没有了现成的贝塞尔曲线的实现方法。需要自己实现一下：

二次贝塞尔曲线（一个控制点的），为了方便观察，我用绘图组件示意了一下路径

import { _decorator, Component, Graphics, Node, tween, v3, Vec3 } from 'cc'
const { ccclass, property } = _decorator

@ccclass('BTest1')
export class BTest1 extends Component {
  @property(Graphics) graphics: Graphics = null
  @property(Node) box: Node = null

  start() {
    // 绘制路径做对比
    this.graphics.moveTo(0, 0)
    this.graphics.quadraticCurveTo(200, 300, 200, 200)
    this.graphics.stroke()

    // 三维空间的缓动
    const quadraticCurve = (t: number, p1: Vec3, cp: Vec3, p2: Vec3, out: Vec3) => {
      out.x = (1 - t) * (1 - t) * p1.x + 2 * t * (1 - t) * cp.x + t * t * p2.x
      out.y = (1 - t) * (1 - t) * p1.y + 2 * t * (1 - t) * cp.y + t * t * p2.y
      out.z = (1 - t) * (1 - t) * p1.z + 2 * t * (1 - t) * cp.z + t * t * p2.z
    }

    const startPos = v3(0, 0, 0)
    const controlPos = v3(2, 3, 0)
    const endPos = v3(2, 2, 0)

    const tempVec3 = v3()

    tween(this.box)
      .to(
        3,
        { position: endPos },
        {
          onUpdate: (target, ratio) => {
            quadraticCurve(ratio, startPos, controlPos, endPos, tempVec3)
            this.box.setPosition(tempVec3)
          },
        }
      )
      .start()
  }
}

接下来是两个控制点的，这个三次贝塞尔的计算公式 CocosCreator 进行了内置，不过是一维的，搞成三维：

import { _decorator, bezier, Component, Graphics, Node, tween, v3, Vec3 } from 'cc'
const { ccclass, property } = _decorator

@ccclass('BTest1')
export class BTest1 extends Component {
  @property(Graphics) graphics: Graphics = null

  @property(Node) box: Node = null

  start() {
    // 绘制路径做对比
    this.graphics.moveTo(0, 0)
    this.graphics.bezierCurveTo(80, 400, 200, 50, 200, 200)
    this.graphics.stroke()

    // 三维空间的缓动
    const bezierCurve = (t: number, p1: Vec3, cp1: Vec3, cp2: Vec3, p2: Vec3, out: Vec3) => {
      out.x = bezier(p1.x, cp1.x, cp2.x, p2.x, t)
      out.y = bezier(p1.y, cp1.y, cp2.y, p2.y, t)
      out.z = bezier(p1.z, cp1.z, cp2.z, p2.z, t)
    }

    const startPos = v3(0, 0, 0)
    const controlPos1 = v3(0.8, 4, 0)
    const controlPos2 = v3(2, 0.5, 0)
    const endPos = v3(2, 2, 0)

    const tempVec3 = v3()

    tween(this.box)
      .to(
        3,
        { position: endPos },
        {
          onUpdate: (target, ratio) => {
            bezierCurve(ratio, startPos, controlPos1, controlPos2, endPos, tempVec3)
            this.box.setPosition(tempVec3)
          },
        }
      )
      .start()
  }
}

总结

将以上方法封装到自己的 Util 中就可以愉快滴使用啦！

我是阔阔，一位喜欢研究的程序员！

个人网站：www.kuokuo666.com

2023！Day Day Up！