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