回调方法

首先以.fromTo()方法来说明回调的使用用法。

比如,我们想要在动画开始的时候来触发回调函数。首先来创建一个start的函数:

function start(){
  console.log('start');
}

触发回调函数,只需要添加这句代码就可以了onStart:start就可以了,非常简单吧。

TweenLite.fromTo($box, 2, {y: '-=200px'}, {y: 100, ease: Bounce.easeOut,onStart:start});

打开开发者工具,就可以看到输出的相关信息。

你也可以添加onUpdate和onComplete来触发对应的回调函数:

function start(){
  console.log('start');
}
function update(){
  console.log('animating');
}
function complete(){
  console.log('end');
}

See the Pen wzLBPa by janily (@janily) on CodePen.

如下图所示,可以看到在每一个阶段都执行了指定的回调方法。

OK,到目前为止,我们开发的动画都是针对单个元素的运动。在实际开发中有时候需要多个元素一起运动,只是运动的属性的值不同而已,比如像下面这样的动画:

这就是下一章节要讲的。

results matching ""

    No results matching ""