TweenMax

TweenMax

一个专业的动画js库

TweeMax使用

得到动画的实例

var t = new TimelineMax();

to()

作用： 添加动画

参数说明：

1. 元素选择器(字符串)或对象
2. 持续时间(数字)， 单位秒
3. 变化的属性(对象)
4. [可选] 动画延迟发生时间
   • 数字
   • "-=0.5"
   • "+=0.5"

基本使用:

<style>
#div1{
    height: 100px;
    width: 100px;
    background: red;
}
</style>

<div id="div1"></div>

<script>
var t = new TimelineMax();
t.to( '#div1', 1, { width: 200 } );
</script>

这里添加了动画就开始运行

添加多个动画

t.to( '#div1', 1, { width: 300 } );
t.to( '#div1', 1, { marginLeft: 300 } );
t.to( '#div1', 1, { height: 300 } );
t.to( '#div1', 1, { marginTop: 300 } );
t.to( '#div1', 1, { rotationZ: 180 } );//TweenMax特有属性
t.to( '#div1', 1, { opacity: 0 } );

动画依次执行

加上第四个参数：

t.to( '#div1', 1, { width: 300 }, 1 );
t.to( '#div1', 1, { marginLeft: 300 }, 1 );

当第四个参数为数字时，表示延迟时间， 但是不会等待之前的运动了， marginLeft会和width延迟一秒后一起改变

t.to( '#div1', 1, { width: 300 } );
t.to( '#div1', 1, { marginLeft: 300 }, 0 );

marginLeft也会和width一起运动, 0表示没有延迟，并且第四个参数为数字不会等待先前的运动

t.to( '#div1', 1, { width: 300 } );
t.to( '#div1', 1, { marginLeft: 300 }, '+=0.5' );

如果是这'+=0.5'这种字符串形式， 表示在前一个运动的基础上再延迟0.5秒

t.to( '#div1', 1, { width: 300 } );
t.to( '#div1', 1, { marginLeft: 300 }, '－=0.5' );

如果是这'－=0.5'这种字符串形式， 表示在前一个运动的基础上再提前0.5秒

当width运动到200时， marginLeft就开始运动

stop():停止动画 play():开始动画 reverse():反向开始动画

<button id="play">play</button>
<button id="stop">stop</button>
<button id="reverse">reverse</button>

<div id="div1"></div>

<script>
var t = new TimelineMax();
t.stop();//开始的时候，先停止动画
t.to( '#div1', 1, { width: 300 } );
t.to( '#div1', 1, { marginLeft: 300 } );
t.to( '#div1', 1, { height: 300 } );
t.to( '#div1', 1, { marginTop: 300 } );
t.to( '#div1', 1, { rotationZ: 180 } );
t.to( '#div1', 1, { opacity: 0 } );


$('#stop').click(function(){
    t.stop();
})
$('#play').click(function(){
    t.play();
})
$('#reverse').click(function(){
    t.reverse();
})
</script>

onComplete()：运动结束后触发对应的函数 onReverseComplete()：反向运动结束后触发对应的函数

t.to( '#div1', 1, 
    { 
        width: 300, 
        onComplete: function(){
            alert(1);
        } , 
        onReverseComplete: function(){
            alert(2);
        }
    });

add() tweenTo()

add() 添加状态

参数： 状态名(字符串)
或一个函数

tweenTo() 完成指定的动画

参数:
状态的字符串
或数字

add() tweenTo()配合使用

var t = new TimelineMax();

t.add('state1');//添加状态

t.to( '#div1', 1, { width: 200 } );

t.add('state2');

t.to( '#div1', 1, { width: 200 } );

t.add('state3');

t.tweenTo('state2');//运动到指定状态，这里是运动到200就停止了

add()传入函数

var t = new TimelineMax();

t.add('state1');

t.to( '#div1', 1, { width: 200 } );
//添加函数, width到200就执行该函数
t.add(function(){
    $('#div').css('background','blue');
});
t.add('state2');

t.to( '#div1', 1, { width: 200 } );

t.add('state3');

t.tweenTo('state2');

tweenTo()也可以传入数字，表示运动到指定时间

t.to( '#div1', 1, { width: 200 } );
t.tweenTo(0.5);

seek()

完成指定的动画（无过渡）

seek跟tweenTo作用类似，区别在于seek没有过渡效果，是瞬间完成

参数说明:

1. 指定时间或状态
2. ［可选］
   • true 不执行onComplete函数 默认
   • false 执行onComplete函数

t.to( '#div1', 1, { width: 200, onComplete: function(){ alert(1) }} );
t.stop();
t.seek(1, false);

time()

返回动画已执行的时间

function getTime(){
    alert( t.time() );
}

var t = new TimelineMax();
t.to( '#div1', 1, { width: 300 , onComplete: getTime}, '+=1' );
t.to( '#div1', 1, { marginLeft: 300 , onComplete: getTime} );
t.to( '#div1', 1, { height: 300 , onComplete: getTime} );
t.to( '#div1', 1, { marginTop: 300 , onComplete: getTime} );
t.to( '#div1', 1, { rotationZ: 180 , onComplete: getTime} );
t.to( '#div1', 1, { opacity: 0 , onComplete: getTime} );

clear()

清除所有动画

staggerTo()

添加动画

跟to()方法的效果基本一致，除了第四个参数的效果

参数说明：

1. 元素选择器或对象
2. 持续时间
3. 对象(变化的属性)
4. 【可选】动画延迟发生时间
   • 可写数字，“-=0.5”，“+=0.5“

<style>
.div1{
    height: 100px;
    width: 100px;
    margin: 1px;
    background: red;
}
</style>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>

<script>
var t = new TimelineMax();
//t.to( '.div1', 1, { width: 300}, 1 );//同时执行
t.staggerTo( '.div1', 1, { width: 300}, 1 );//依次执行
</script>

totalDuration()

获取动画的总时长

alert( t.totalDuration() );

getLabelTime()

返回从开始到传入的状态的时间

参数说明：

1. 状态的字符串

返回值是一个数字

alert( t.getLabelTime('state2') )

currentLabel()

获取当前状态

返回值是状态的字符串

getLabelAfter()

获取下一个状态

参数说明：

1. 时间数字

返回值是状态的字符串，如果没有下一个状态返回null

getLabelBefore()

获取上一个状态

function getCurrentLabel(){
    //获取当前的时间
    var currentTime = t.getLabelTime( t.currentLabel() );
    //获取到上一个状态
    var beforeLabel = t.getLabelBefore( currentTime );
    //获取到下一个状态
    var afterLabel = t.getLabelAfter( currentTime );

    var str = "<p>上一个状态:"+ beforeLabel +"</p><p>当前状态:"+ t.currentLabel() +"</p><p>下一个状态:"+ afterLabel +"</p>";

    $("#label").html( str );

}

状态可以应该是一段时间，而不是一个时间点

t.add('state1');
t.to();
t.add('state2');

|___state1_____|___state2_____|

ease

t.to( '#div1', 1, { width: 300, ease:Bounce.easeIn } );