目錄
上一節我們主要聊了TweenMax動畫庫中的seek()完成指定的動畫（無過渡）、time() 動畫已執行的時間、clear()：清除所有動畫等方法的使用，接下來我們繼續學習TweenMax動畫庫中的其它方法的使用。
TweenMax動畫庫的官方網址: http://greensock.com/timelinemax
下面我們直奔主題，開始介紹TweenMax動畫庫中的其它方法的使用：
1、staggerTo()：添加動畫
參數說明：
1. 元素選擇器或對象
2. 持續時間
3. 對象
變化的屬性->值
4. 【可選】動畫延遲發生時間
可寫數字，“-=0.5”，“+=0.5“
頁面布局
<script src="./../js/jquery-2.1.4.min.js"></script> <script src="./../js/TweenMax.js"></script> <style> html,body{ margin: 0; padding: 0; } .box{ width:100px; height:100px; background: #8D121A; margin:1px 0; } </style>
1 <body> 2 <div class="box"></div> 3 <div class="box"></div> 4 <div class="box"></div> 5 <div class="box"></div> 6 <div class="box"></div> 7 <div class="box"></div> 8 <div class="box"></div> 9 <div class="box"></div> 10 <div class="box"></div> 11 <div class="box"></div> 12 <div class="box"></div> 13 </body>
staggerTo("元素選擇器或對象",持續時間,對象,動畫延遲發生時間);
1 <script> 2 $(function(){ 3 var t =new TimelineMax(); 4 //t.to(".box",1,{width:300},1); 5 t.staggerTo(".box",2,{width:300},1); 6 //staggerTo()與to()的區別在於在設置相同的延遲時間的情況下， 7 //to()下的所有動畫會同時進行，而staggerTo()下的動畫會一個接着一個依次執行 8 }); 9 </script>
2、 totalDuration()：獲取動畫的總時長
頁面布局
1 <style> 2 html,body{ 3 margin: 0; 4 padding: 0; 5 } 6 .div1{ 7 width:100px; 8 height:100px; 9 background: #8D121A; 10 position: absolute; 11 top:0; 12 left:0; 13 } 14 </style>
1 <body> 2 <div class="div1"></div> 3 </body>
totalDuration()
1 <script> 2 $(function(){ 3 var t =new TimelineMax(); 4 t.to(".div1",1,{left:300},1); 5 t.to(".div1",1,{width:300},"+=1"); 6 t.to(".div1",1,{height:300}); 7 console.log(t.totalDuration());//5 //獲取動畫的總時長 8 }); 9 </script>
3、getLabelTime()：返回從開始到當前狀態的時間
參數說明：
1. 狀態的字符串
返回值是一個數字
getLabelTime(字符串)
1 <script> 2 $(function(){ 3 var t =new TimelineMax(); 4 t.add("state1"); 5 t.to(".div1",1,{left:300},1); 6 t.add("state2"); 7 t.to(".div1",1,{width:300},"+=1"); 8 t.add("state3"); 9 t.to(".div1",1,{height:300}); 10 console.log(t.getLabelTime("state2")); //2 //返回從開始到當前狀態的時間 11 }); 12 </script>
部分動畫演示：
代碼打包下載：
鏈接: http://pan.baidu.com/s/1slrGZvR 密碼: kg99