GreenSock 动画库 #1 TimelineMax

GreenSock Animation platform (GSAP)

2.1版本

// 只引用这一个js就可以，如果分开引用，需要引用很多文件，比如TimelineMax, CssPlugin等等
<script src="./greensock-js/src/uncompressed/TweenMax.js"></script>
// 一个红色的正方形50*50px
<div class="box"></div>
<script>
    let t1 = new TimelineMax({paused: true})
    t1.to('.box', 1, {x:200, delay:5})
    t1.to('.box', 1, {y:100})
        let tween = TweenMax.to('.box', 1, {rotation: 360})
    t1.add(tween)
    // 执行play()方法后，等待5秒，才执行第一个动画，耗费1秒移动left:200px;
    // 然后立刻执行第二个动画，耗费1秒，top移动100px
    // 因为paused=true，所以默认是暂停状态，如果不执行play()动画是不会执行的
    // 如果paused设置为false，则不需要执行play()方法，动画也会启动
    // t1.play()
    // 如果不执行play()，而是执行seek(2),那么方块的位置也不会变，因为2秒的时候，动画还处于delay:5的状态
    // t1.seek(2)
    // 5.5 > 5;所以这时候已经不是delay状态了，所以方块的状态是处于left:100的时候
    // t1.seek(5.5)
</script>

这样简单的代码，就可以对.box方块做一个动画设定。
如果有一个需求，随着滚动条的滚动，从scrollTop:0 到 scrollTop:100,这100px的滚动操作，.box方块需要从left: 0;opcatiy:0;过渡到left:200,opcaty: 1; 而且滚动条回滚，方块又需要原路返回，变成透明的，这样一个动画，用上面的seek方法很简单就可以完成。
首先，监听滚动条事件，把每次滚动条滚动的距离，当作时间轴的时间，不断的触发seek(scrollTop)方法，就可以了。
当然，动画也需要设置一下。

// css设置好方块的初始状态
// 100指的就是动画耗时100个单位时间
t1.to('.box', 100, {x:200, opcaty: 1, delay:0})

给第一段的代码做一个模拟：

        // 模拟滚动条滚动，滚动条每次滚动20px
    let t = 0;
        // 整个动画耗时8秒
    let max = 8 * 1000
    let timer = setInterval(() => {
        t += 20;
        if (t > max) {
            clearInterval(timer)
        }
        t1.seek(t / 1000)
    }, 20)

如果再加一个.box2，颜色变成绿色，做一模一样的动画，那么就需要再建一个时间轴对象：let t2 = new TimelineMax({paused: true})；这样，红色的方块和绿色的方块就会一起执行动画。

3.x版本

待定.