TweenMax

TweenMax

一個(gè)專業(yè)的動(dòng)畫js庫

TweeMax使用

得到動(dòng)畫的實(shí)例

var t = new TimelineMax();

to()

作用： 添加動(dòng)畫

參數(shù)說明：

  1. 元素選擇器(字符串)或?qū)ο?/li>
  2. 持續(xù)時(shí)間(數(shù)字)， 單位秒
  3. 變化的屬性(對(duì)象)
  4. [可選] 動(dòng)畫延遲發(fā)生時(shí)間
    • 數(shù)字
    • "-=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>

這里添加了動(dòng)畫就開始運(yùn)行

添加多個(gè)動(dòng)畫

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

動(dòng)畫依次執(zhí)行

加上第四個(gè)參數(shù)：

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

當(dāng)?shù)谒膫€(gè)參數(shù)為數(shù)字時(shí)，表示延遲時(shí)間， 但是不會(huì)等待之前的運(yùn)動(dòng)了， marginLeft會(huì)和width延遲一秒后一起改變

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

marginLeft也會(huì)和width一起運(yùn)動(dòng), 0表示沒有延遲，并且第四個(gè)參數(shù)為數(shù)字不會(huì)等待先前的運(yùn)動(dòng)

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

如果是這'+=0.5'這種字符串形式， 表示在前一個(gè)運(yùn)動(dòng)的基礎(chǔ)上再延遲0.5秒

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

如果是這'－=0.5'這種字符串形式， 表示在前一個(gè)運(yùn)動(dòng)的基礎(chǔ)上再提前0.5秒

當(dāng)width運(yùn)動(dòng)到200時(shí)， marginLeft就開始運(yùn)動(dòng)

stop():停止動(dòng)畫 play():開始動(dòng)畫 reverse():反向開始動(dòng)畫

<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();//開始的時(shí)候，先停止動(dòng)畫
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()：運(yùn)動(dòng)結(jié)束后觸發(fā)對(duì)應(yīng)的函數(shù) onReverseComplete()：反向運(yùn)動(dòng)結(jié)束后觸發(fā)對(duì)應(yīng)的函數(shù)

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

add() tweenTo()

add() 添加狀態(tài)

參數(shù)： 狀態(tài)名(字符串)
或一個(gè)函數(shù)

tweenTo() 完成指定的動(dòng)畫

參數(shù):
狀態(tài)的字符串
或數(shù)字

add() tweenTo()配合使用

var t = new TimelineMax();

t.add('state1');//添加狀態(tài)

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

t.add('state2');

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

t.add('state3');

t.tweenTo('state2');//運(yùn)動(dòng)到指定狀態(tài)，這里是運(yùn)動(dòng)到200就停止了

add()傳入函數(shù)

var t = new TimelineMax();

t.add('state1');

t.to( '#div1', 1, { width: 200 } );
//添加函數(shù), width到200就執(zhí)行該函數(shù)
t.add(function(){
    $('#div').css('background','blue');
});
t.add('state2');

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

t.add('state3');

t.tweenTo('state2');

tweenTo()也可以傳入數(shù)字，表示運(yùn)動(dòng)到指定時(shí)間

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

seek()

完成指定的動(dòng)畫（無過渡）

seek跟tweenTo作用類似，區(qū)別在于seek沒有過渡效果，是瞬間完成

參數(shù)說明:

  1. 指定時(shí)間或狀態(tài)
  2. ［可選］
    • true 不執(zhí)行onComplete函數(shù) 默認(rèn)
    • false 執(zhí)行onComplete函數(shù)
t.to( '#div1', 1, { width: 200, onComplete: function(){ alert(1) }} );
t.stop();
t.seek(1, false);

time()

返回動(dòng)畫已執(zhí)行的時(shí)間

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

清除所有動(dòng)畫

staggerTo()

添加動(dòng)畫

跟to()方法的效果基本一致，除了第四個(gè)參數(shù)的效果

參數(shù)說明：

  1. 元素選擇器或?qū)ο?/li>
  2. 持續(xù)時(shí)間
  3. 對(duì)象(變化的屬性)
  4. 【可選】動(dòng)畫延遲發(fā)生時(shí)間
    • 可寫數(shù)字，“-=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 );//同時(shí)執(zhí)行
t.staggerTo( '.div1', 1, { width: 300}, 1 );//依次執(zhí)行
</script>

totalDuration()

獲取動(dòng)畫的總時(shí)長

alert( t.totalDuration() );

getLabelTime()

返回從開始到傳入的狀態(tài)的時(shí)間

參數(shù)說明：

  1. 狀態(tài)的字符串

返回值是一個(gè)數(shù)字


alert( t.getLabelTime('state2') )

currentLabel()

獲取當(dāng)前狀態(tài)

返回值是狀態(tài)的字符串

getLabelAfter()

獲取下一個(gè)狀態(tài)

參數(shù)說明：

  1. 時(shí)間數(shù)字

返回值是狀態(tài)的字符串，如果沒有下一個(gè)狀態(tài)返回null

getLabelBefore()

獲取上一個(gè)狀態(tài)

function getCurrentLabel(){
    //獲取當(dāng)前的時(shí)間
    var currentTime = t.getLabelTime( t.currentLabel() );
    //獲取到上一個(gè)狀態(tài)
    var beforeLabel = t.getLabelBefore( currentTime );
    //獲取到下一個(gè)狀態(tài)
    var afterLabel = t.getLabelAfter( currentTime );

    var str = "<p>上一個(gè)狀態(tài):"+ beforeLabel +"</p><p>當(dāng)前狀態(tài):"+ t.currentLabel() +"</p><p>下一個(gè)狀態(tài):"+ afterLabel +"</p>";

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

}

狀態(tài)可以應(yīng)該是一段時(shí)間，而不是一個(gè)時(shí)間點(diǎn)

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

|___state1_____|___state2_____|

ease

t.to( '#div1', 1, { width: 300, ease:Bounce.easeIn } );
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • TweenMax 可能是很多人都用的，包括我 但 是最近發(fā)現(xiàn)大量的運(yùn)用就總會(huì)產(chǎn)生這樣或那樣的"怪事"，有時(shí)用代碼來...
    kuxingseng686閱讀 1,275評(píng)論 0贊 1
  • TweenMax的介紹 一般情況下我們使用jquery必須使用animate,然后后面接回調(diào)函數(shù)才能操作動(dòng)畫。 它...
    我擁抱著我的未來閱讀 1,534評(píng)論 0贊 1
  • TweenMax 建立在 TweenLite 核心類以及它的大哥 TweenFilterLite 基礎(chǔ)之上，它為 ...
    鄭偉的菜園子閱讀 1,779評(píng)論 0贊 1
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,090評(píng)論 4贊 61
  • tweenMax：①緩沖動(dòng)畫；②連續(xù)動(dòng)畫；③動(dòng)畫時(shí)間和狀態(tài)；④依賴于jQuery；TweenMaxAPI:1.動(dòng)畫...
    qwerer閱讀 1,138評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容