TweenMax学习一

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
        })

2.如果有一组动画，按时间先后顺序一个一个的出现场景

 我们可以使用FromTo()方法，positio参数时间设置不一样就行了

T1 = new TimelineMax({
                //delay: 0.3,
            //paused: true
        })
          .fromTo([$(".Jan_sm_1")], 0.5, {//
                y: 50,
                opacity: 0
            }, {
                y: 0,
                opacity: 1,
                ease: Power3.easeNone
            },0.3)
            .fromTo([$(".Jan_txt_1")], 0.5, {
                y: 50,
                opacity: 0
            }, {
                y: 0,
                opacity: 1,
                ease: Power3.easeNone
            },0.6)
            .fromTo([$(".m-logo")], 0.5, {
                y: 50,
                opacity: 0
            }, {
                y: 0,
                opacity: 1,
                ease: Power3.easeNone
            },0.9)
            .fromTo([$(".sm-2")], 0.5, {
                y: -20,
                opacity: 0
            }, {
                y: 0,
                opacity: 1,
                ease: Power3.easeNone
            }, 1.5)

也可以通过添加一个标签（label）,再相对于这个label去设置时间差

T1 = new TimelineMax({
                //delay: 0.3,
            //paused: true
        })
            .add("labal")
            .fromTo([$(".Jan_sm_1")], 0.5, {//
                y: 50,
                opacity: 0
            }, {
                y: 0,
                opacity: 1,
                ease: Power3.easeNone
            },"labal")
            .fromTo([$(".Jan_txt_1")], 0.5, {
                y: 50,
                opacity: 0
            }, {
                y: 0,
                opacity: 1,
                ease: Power3.easeNone
            },'labal+=0.6')
            .fromTo([$(".m-logo")], 0.5, {
                y: 50,
                opacity: 0
            }, {
                y: 0,
                opacity: 1,
                ease: Power3.easeNone
            },'labal+=1')
            .fromTo([$(".sm-2")], 0.5, {
                y: -20,
                opacity: 0
            }, {
                y: 0,
                opacity: 1,
                ease: Power3.easeNone
            }, 'labal+=2')

也可以定义多条时间轴，把后面的时间轴添加到当前时间轴，就可以按顺序执行了

 

T1 = new TimelineMax({
            //delay: 0.3,
            //paused: true
        })
            
            .fromTo([$(".Jan_sm_1")], 0.5, {//
                y: 50,
                opacity: 0
            }, {
                y: 0,
                opacity: 1,
                ease: Power3.easeNone
            }, 1);


        T2 = new TimelineMax({
            //delay: 0.3,
            //paused: true
        }).fromTo([$(".Jan_txt_1")], 0.5, {
                y: 50,
                opacity: 0
            }, {
                y: 0,
                opacity: 1,
                //rotation:90,
                ease: Power3.easeNone
            }, 1)
           
        T3 = new TimelineMax({
            //delay: 0.3,
            //paused: true
        }).fromTo([$(".m-logo")], 0.5, {
                y: 50,
                opacity: 0
            }, {
                y: 0,
                opacity: 1,
                ease: Power3.easeNone
            },1)
             
        T4= new TimelineMax({
            //delay: 0.3,
            //paused: true
        }).fromTo([$(".sm-2")], 0.5, {
                y: -20,
                opacity: 0
            }, {
                y: 0,
                opacity: 1,
                ease: Power3.easeNone
            }, 1)
        T1.add(T2).add(T3).add(T4);

注：如果不使用add把他们添加进去的话，4个会同事执行

 

3.如果有一组动画，效果相同。只是时间按选后顺序出现的场景

 我们可以使用staggerFromTo()方法

参数如下

.staggerFromTo( targets:Array, duration:Number, fromVars:Object, toVars:Object, stagger:Number, position:*, onCompleteAll:Function, onCompleteAllParams:Array, onCompleteScope:* )
第一个参数是目标元素---对谁做动画，可以睡是一组数组对象，可以是一个类似jQuery的对象($(“. myClass”))，也可以直接是一个css选择器(. myClass h2. myClass)

 

T1 = new TimelineMax({
                delay: 0.3,
                //paused: true
            })
            .staggerFromTo([$(".Jan_sm_1"), $(".Jan_txt_1")], 0.5, {//错层队列动画，适合一组动画效果相同时间按选后顺序出现的场景
                y: 50,
                opacity: 0
            }, {
                y: 0,
                opacity: 1,
                ease: Power3.easeNone
            }, 0.3)