GSAP动画onComplete函数提前执行问题求助

你开发游戏时遇到的问题：在可视区域外创建对象，通过GSAP将其移动到屏幕另一侧可视区域外，期望动画结束后删除该对象并重建新对象，但绑定的deletesprite函数在动画开始前就执行了。

原代码如下：

gsap.to(".ball",{top: topend,left: leftend,delay:3,onComplete: deletesprite(sprite),duration: 2});
}
function deletesprite(sprite){
    sprite.remove();
    console.log("sprite deleted");
}

你已经找对了问题根源——直接执行了函数而非传递函数引用。当你写deletesprite(sprite)时，JavaScript会立刻调用这个函数，把返回值（这里是undefined）赋值给onComplete，所以函数会在动画还没开始时就跑起来，完全不符合预期。

这里给你两种修正方案：

方案一：用匿名函数包裹调用 #

通过箭头函数创建一个新的函数引用，这样只有当动画结束时，才会触发内部的deletesprite(sprite)调用：

gsap.to(".ball", {
  top: topend,
  left: leftend,
  delay: 3,
  onComplete: () => deletesprite(sprite),
  duration: 2
});

方案二：使用GSAP的参数传递机制 #

GSAP提供了onCompleteParams专门用来给回调函数传参，这种方式更符合GSAP的API设计，直接传递函数名（不要加括号）即可：

gsap.to(".ball", {
  top: topend,
  left: leftend,
  delay: 3,
  onComplete: deletesprite,
  onCompleteParams: [sprite], // 参数会按顺序传给deletesprite
  duration: 2
});

两种方案都能保证deletesprite只在动画结束后执行，完成sprite的删除操作。

内容的提问来源于stack exchange，提问作者drewpie