TweenMaxjs是一个性能很高的js动画框架,它与css3动画具有时间轴的概念。你可以很方便的把动画添加到一个时间轴队列里面去按照你需要的顺序去执行。

官网地址: http://greensock.com

怎么使用:

首先我们要做的是引入该文件,

第二步就是使用new关键字创建一个时间轴实例

var T1;
T1 = new TimelineMax({
                //delay: 0.3,
                //paused: true
            })

1.如果有一组动画同时开始动画,我们可以使用链式操作的方式实现

T1 = new TimelineMax({
            // delay: 0.3,
            //paused: true
            onStart: function () {
                options.onStart();
            },
            onComplete: function () {
                options.onComplete();
            }
        })
        .fromTo(el.sm1, 1, {
            y: -100,
            opacity: 0
        }, {
            y: 0,
            opacity: 1,
            ease: Power3.easeOut
        })
        .fromTo(el.sm2, 1, {
            x: 100,
            opacity: 0
        }, {
            x: 0,
            opacity: 1,
            ease: Power3.easeOut
        })
View Code

相关文章: