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 } );
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • TweenMax 可能是很多人都用的,包括我 但 是最近發現大量的運用就總會產生這樣或那樣的"怪事",有時用代碼來...
    kuxingseng686閱讀 1,177評論 0 1
  • TweenMax的介紹 一般情況下我們使用jquery必須使用animate,然后后面接回調函數才能操作動畫。 它...
    我擁抱著我的未來閱讀 1,431評論 0 1
  • TweenMax 建立在 TweenLite 核心類以及它的大哥 TweenFilterLite 基礎之上,它為 ...
    鄭偉的菜園子閱讀 1,685評論 0 1
  • 發現 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,180評論 4 61
  • tweenMax:①緩沖動畫;②連續動畫;③動畫時間和狀態;④依賴于jQuery;TweenMaxAPI:1.動畫...
    qwerer閱讀 1,043評論 0 0