GSAP 回调 onComplete

简介

GSAP（GreenSock Animation Platform）是一款强大的 JavaScript 动画库，它提供了丰富的功能和灵活的 API，帮助开发者创建出流畅、交互性强的动画效果。其中回调函数 onComplete 是 GSAP 中一个重要的特性，它允许在动画完成后执行自定义的代码。

使用方法

GSAP 提供了多个方法来创建动画效果，例如 gsap.to()，gsap.from()，gsap.fromTo() 等。这些方法接受一个对象参数，包含要动画化的元素以及一些可选的配置选项。

回调函数 onComplete 可以通过配置选项来指定。当动画完成时，GSAP 将会调用这个函数，并传递一些参数给它。

例如，我们可以使用 gsap.to() 方法来创建一个简单的动画，并在动画完成后执行自定义的回调函数：

gsap.to('.element', {
  x: 100,
  duration: 1,
  onComplete: function() {
    console.log('动画完成！'); // 自定义的回调函数
  }
});

在上述代码中，'.element' 是动画化的元素选择器，x: 100 表示沿 X 轴移动 100px，duration: 1 表示动画持续时间为 1 秒。然后通过 onComplete 配置选项指定一个回调函数，该函数在动画完成时被调用，并输出一条消息到控制台。

除了传递一个函数作为 onComplete 的值，我们还可以使用字符串来指定一个函数名。这在某些情况下可能非常有用，特别是当我们要调用对象的方法时。

示例

下面是一个更复杂的使用示例，展示了如何在动画完成后执行多个回调函数，以及如何在动画链中使用 onComplete：

gsap.to('.element', {
  x: 100,
  duration: 1,
  onComplete: [callback1, callback2],
  onCompleteParams: ['hello', 123],
  onCompleteScope: myObject
}).to('.element', {
  y: 200,
  duration: 1,
  onComplete: 'myObject.myMethod'
});

function callback1(arg1, arg2) {
  console.log('回调函数 1', arg1, arg2);
}

function callback2(arg1, arg2) {
  console.log('回调函数 2', arg1, arg2);
}

var myObject = {
  myMethod: function() {
    console.log('自定义方法');
  }
};

在上述代码中，我们使用了 onComplete 数组，数组中包含了两个自定义的回调函数。onCompleteParams 是一个数组，用于传递参数给回调函数。onCompleteScope 是一个对象，确定了回调函数的作用域。

第二个动画 to('.element', { y: 200, duration: 1, onComplete: 'myObject.myMethod' }) 中使用了字符串来指定了回调函数。

总结

GSAP 的回调函数 onComplete 提供了一种便捷的方式来在动画完成后执行自定义的代码。它允许我们指定一个函数或方法，并传递参数，以便在需要时进行后续的操作。通过使用 onComplete，我们可以实现更加灵活和交互性的动画效果。