深入浅出 GreenSock 动画：GreenSock Stagger 方法详解

在GreenSock中， staggerFrom()/From()/To() ) 这个方法是一个非常高效的编写动画的方法。

需要注意的一点的是，这个方法专门是用来操作多个元素用的，所以它返回的是一个 数组 。当你仅仅是针对一个元素来编写动画的时候，就不需要用到它。

当你想使用GreenSock来操作动画序列的时候，只需要把动画的序列直接赋予一个定义好的变量，就可以对它进行各种控制，比如，暂停、加速播放等等。

let tween = TweenMax.to('#box', 1, {x:100})

// you can pause it at a particular point in time
tween.pause(0.5)

// Or check if it is playing
tween.isActive() // returns false

Or chain a few methods together
tween.progress(0.75).reverse()

如果，你使用的是 stagger 方法，也像上面一样对它进行控制的话，它会返回一个 Uncaught TypeError: 错误，因为它返回的并不是一个方法而是一个数组。

let tween = TweenMax.staggerTo('.boxes', 1, {x:100})

tween.pause() // throws an error saying tween.pause is not a function

如果我们在控制台中使用 console.log(tween.length) 来输出，会发现它输出的是一个数组。

在使用 stagger 方法的时候，一定要记得它返回的是一个数组。所以，当你要控制整个动画序列的时候，最简单的方法就是在初始化的时候，把整个动画序列定义为一个时间轴即 timeline 就可以了。当然，你也可以单独对返回数据中的每一个序列进行单独的控制，不过还是直接对 timeline 进行控制最方便简单。

let tween = new TimelineLite()

tween.staggerTo('.boxes', 1, {x:100})

tween.pause() // no errors! :D

光说不练假把式，下面来看看一个使用 stagger 方法的实例。

这个动画效果如果使用CSS也可以实现，但是如果要跟用户进行交互，那就不是很方便了。这个效果的主要一个交互是用户点击，两个手臂进行5次摇摆。这个效果使用 stagger 方法配合 cycle 属性再适合不过了。

var tween = new TimelineLite({paused:true})
tween.add(TweenMax.staggerTo('.arm', 0.1, {
    cycle:{
        rotation:['-30deg', '30deg']
    },
    yoyo:true,
    repeat:5,
    repeatDelay:0.05,
    ease:Linear.easeNone
}))


function onClick() {
    if(!tween.isActive()) {
        tween.play(0)           
    }
}

非常方便高效。详细的代码可以去 这里 看看。

本文主要是从 GSAP's Big Fat Stagger Gotcha 这篇文章整理而来，有删减，有疏漏或者理解不到位的地方，还请多多指教！