TweenMax
一個專業的動畫js庫
TweeMax使用
得到動畫的實例
var t = new TimelineMax();
to()
作用: 添加動畫
參數說明:
- 元素選擇器(字符串)或對象
- 持續時間(數字), 單位秒
- 變化的屬性(對象)
- [可選] 動畫延遲發生時間
- 數字
- "-=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沒有過渡效果,是瞬間完成
參數說明:
- 指定時間或狀態
- [可選]
- 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()方法的效果基本一致,除了第四個參數的效果
參數說明:
- 元素選擇器或對象
- 持續時間
- 對象(變化的屬性)
- 【可選】動畫延遲發生時間
- 可寫數字,“-=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()
返回從開始到傳入的狀態的時間
參數說明:
- 狀態的字符串
返回值是一個數字
alert( t.getLabelTime('state2') )
currentLabel()
獲取當前狀態
返回值是狀態的字符串
getLabelAfter()
獲取下一個狀態
參數說明:
- 時間數字
返回值是狀態的字符串,如果沒有下一個狀態返回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 } );