问题

使用tween动画，在其执行完成后tween.onComplete中调用回调函数，发现回调函数执行有误或重复执行。

关键代码

this.inspectCamera({x: 2.9, y: 0.6, z: 7}, {x: 2.9, y: 0.6, z: 1.6}, this.inspectCurveList())
复制代码

inspectCamera (position, target, callBack) {
  let self = this
  let tween = new TWEEN.Tween({
    px: camera.position.x, // 起始相机位置x
    py: camera.position.y, // 起始相机位置y
    pz: camera.position.z, // 起始相机位置z
    tx: controls.target.x, // 控制点的中心点x 起始目标位置x
    ty: controls.target.y, // 控制点的中心点y 起始目标位置y
    tz: controls.target.z // 控制点的中心点z 起始目标位置z
  })
  tween.to({
    px: position.x,
    py: position.y,
    pz: position.z,
    tx: target.x,
    ty: target.y,
    tz: target.z
  }, 3000)
  tween.onUpdate(function () {
    camera.position.x = this.px
    camera.position.y = this.py
    camera.position.z = this.pz
    controls.target.x = this.tx
    controls.target.y = this.ty
    controls.target.z = this.tz
  })
  tween.onComplete(function () {
    // callBack && callBack()
    // self.inspectCurveList()
  })
  tween.start()
},
inspectCurveList () {
  console.log(camera.position, 111)
  console.log(controls.object.position, 222)
  console.log(controls.target, 333)
  ……业务代码省略……
}
复制代码

正确代码

参考情形三

情形一

代码描述：

定义callBack参数为inspectCurveList()，但是tween动画完成后tween.onComplete中并未调用。

this.inspectCamera({x: 2.9, y: 0.6, z: 7}, {x: 2.9, y: 0.6, z: 1.6}, this.inspectCurveList())
tween.onComplete(function () {
  // callBack && callBack()
  // self.inspectCurveList()
})
复制代码

控制台打印：

{x: 16, y: 6, z: 10} 111
{x: 16, y: 6, z: 10} 222
{x: 0, y: 0, z: 0} 333

说明：

传递callBack参数时，inspectCurveList()函数初始化，执行了内部代码，设置了一些初始值，若其他地方监听了这些值就容易出错。

情形二

代码描述：

定义callBack参数为inspectCurveList()，且在tween动画完成后tween.onComplete中通过回调函数调用。

this.inspectCamera({x: 2.9, y: 0.6, z: 7}, {x: 2.9, y: 0.6, z: 1.6}, this.inspectCurveList())
tween.onComplete(function () {
  callBack && callBack()
  // self.inspectCurveList()
})
复制代码

控制台打印：

{x: 16, y: 6, z: 10} 111
{x: 16, y: 6, z: 10} 222
{x: 0, y: 0, z: 0} 333

说明：

此时就出现了情形一说的问题，因为在初始化时设置了一些初始值（相机位置和目标点），导致tween动画完成后调用时相机位置和目标点会突然闪一下。

情形三

代码描述：

不定义callBack参数，在tween动画完成后tween.onComplete中直接调用inspectCurveList()函数。

this.inspectCamera({x: 2.9, y: 0.6, z: 7}, {x: 2.9, y: 0.6, z: 1.6})
tween.onComplete(function () {
  // callBack && callBack()
  self.inspectCurveList()
})
复制代码

控制台打印：

{x: 2.9, y: 0.6, z: 7} 111
{x: 2.9, y: 0.6, z: 7} 222
{x: 2.9, y: 0.6, z: 1.6} 333

说明：

这才对嘛！此时tween动画最后的相机位置和目标点{x: 2.9, y: 0.6, z: 7}, {x: 2.9, y: 0.6, z: 1.6}，才正好等于inspectCurveList()函数开始时的相机位置和目标点，不会出现闪现。

情形四

代码描述：

直接看代码吧，我相信没有谁会这么写吧，然而我就一时脑抽这么写了，出现问题还各种疑惑。

this.inspectCamera({x: 2.9, y: 0.6, z: 7}, {x: 2.9, y: 0.6, z: 1.6}, this.inspectCurveList())
tween.onComplete(function () {
  // callBack && callBack()
  self.inspectCurveList()
})
复制代码

说明：

干嘛呢，定义了callBack参数又不调用，而且还在tween动画结束后直接在此调用inspectCurveList()函数。

这样会执行两次啊，初始化一次，结束后调用一次，而且会出现闪现啊，真是傻了。。。