TweenMax动画库学习(三)
目錄??? ? ? ? ?
? ? ? ? ???TweenMax動畫庫學(xué)習(xí)(一)
? ? ? ? ???TweenMax動畫庫學(xué)習(xí)(二)
? ? ? ? ? ?TweenMax動畫庫學(xué)習(xí)(三)
? ? ? ? ? ?TweenMax動畫庫學(xué)習(xí)(四)
? ? ? ? ? ?TweenMax動畫庫學(xué)習(xí)(五)??
? ? ? ? ???TweenMax動畫庫學(xué)習(xí)(六)??
?
? ? ? ?
? ? ? 上一節(jié)我們主要聊了TweenMax動畫庫中的add()添加狀態(tài)、tweenTo()完成指定的動畫（過渡）等方法的使用，接下來我們繼續(xù)學(xué)習(xí)TweenMax動畫庫中的其它方法的使用。? ??
? ? ? TweenMax動畫庫的官方網(wǎng)址:??http://greensock.com/timelinemax
? ? ??下面我們直奔主題，開始介紹TweenMax動畫庫中的其它方法的使用：
? ? ??1、頁面布局
<script src="./../js/jquery-2.1.4.min.js"></script> <script src="./../js/TweenMax.js"></script> <style>html,body{margin: 0;padding: 0;}#div1{width:100px;height:100px;background: #8D121A;position: absolute;left:0;top:100px;} </style> 1 <body> 2 <div id="div1"></div> 3 </body>? ?
2、seek()---完成指定的動畫（無過渡）? ? ? ???參數(shù)說明：
1. 指定時間或狀態(tài) 2. 【可選】布爾值true：不執(zhí)行函數(shù) 默認(rèn)false: 執(zhí)行函數(shù)? ? ? ? ?seek(時間)
1 <script> 2 $(function(){ 3 var t =new TimelineMax(); 4 t.to("#div1",2,{left:300}); 5 t.to("#div1",2,{width:300}); 6 t.to("#div1",2,{height:300}); 7 t.seek(2);//直接運動到設(shè)置的時間點，后面的運動會接著運動 8 }); 9 <script>? ??? ?seek("狀態(tài)")
1 <script> 2 $(function(){ 3 var t =new TimelineMax(); 4 t.to("#div1",2,{left:300}); 5 t.add("state1"); 6 t.to("#div1",2,{width:300}); 7 t.add("state2"); 8 t.to("#div1",2,{height:300}); 9 t.add("state3"); 10 t.seek("state2");//直接運動到設(shè)置的狀態(tài)，后面的運動會接著運動 11 }); 12 </script>? ????seek("狀態(tài)",false)
1 <script> 2 $(function(){ 3 var t =new TimelineMax(); 4 t.to("#div1",2,{left:300,onComplete:function(){ 5 alert("left:300"); 6 }});//標(biāo)記一 7 t.add("state1"); 8 t.to("#div1",2,{width:300,onComplete:function(){ 9 alert("width:300"); 10 }}); 11 t.add("state2"); 12 t.to("#div1",2,{height:300}); 13 t.add("state3"); 14 t.seek("state1",false);//直接運動到設(shè)置的狀態(tài)，但會執(zhí)行【標(biāo)記一】中的函數(shù)，后面的運動會接著運動 15 </script>3、time() 動畫已執(zhí)行的時間
? ? ? ? ?參數(shù)說明：
1 動畫已執(zhí)行的時間 1 <script> 2 $(function(){ 3 var t =new TimelineMax(); 4 t.to("#div1",2,{left:300,onComplete:function(){ 5 alert("left:300"); 6 }}); 7 t.add("state1"); 8 t.to("#div1",2,{width:300,onComplete:function(){ 9 alert("width:300"); 10 }}); 11 t.add("state2"); 12 t.to("#div1",2,{height:300}); 13 t.add("state3"); 14 t.seek("state3",false); 15 console.log(t.time()); //6 //動畫已執(zhí)行的時間 16 }); 17 </script>4、clear()：清除所有動畫
? ? ? ? ? ??參數(shù)說明：
1 清除所有動畫 1 <script> 2 $(function(){ 3 var t =new TimelineMax(); 4 t.to("#div1",2,{left:300,onComplete:function(){ 5 alert("left:300"); 6 }}); 7 t.add("state1"); 8 t.to("#div1",2,{width:300,onComplete:function(){ 9 alert("width:300"); 10 }}); 11 t.add("state2"); 12 t.clear(); //清除state2之前的所有動畫，后面的動畫依然繼續(xù)執(zhí)行 13 t.to("#div1",2,{height:300}); 14 t.add("state3"); 15 }); 16 </script>? ? ?seek()、time()、clear()綜合使用
1 <script> 2 // seek()：完成指定的動畫（無過渡） 3 // 參數(shù)說明： 4 // 1. 指定時間或狀態(tài) 5 // 2. 【可選】布爾值 6 // true：不執(zhí)行函數(shù) 默認(rèn) 7 // false: 執(zhí)行函數(shù) 8 // time()：動畫已執(zhí)行的時間 9 // clear()：清除所有動畫 10 $(function(){ 11 var t =new TimelineMax(); 12 t.to("#div1",2,{left:300,onComplete:function(){ 13 alert("left:300"); 14 }}); 15 t.add("state1"); 16 t.to("#div1",2,{width:300,onComplete:function(){ 17 alert("width:300"); 18 }}); 19 t.add("state2"); 20 // t.clear(); //清除所有動畫 21 t.to("#div1",2,{height:300}); 22 t.add("state3"); 23 // t.stop(); 24 t.seek("state3",false); 25 console.log(t.time()); //6 //動畫已執(zhí)行的時間 26 }); 27 </script>?動畫演示：
?
代碼打包下載：
鏈接: http://pan.baidu.com/s/1nvMrrjN 密碼: qp44?
轉(zhuǎn)載于:https://www.cnblogs.com/chenyablog/p/5557341.html
總結(jié)
以上是生活随笔為你收集整理的TweenMax动画库学习(三)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 多线程间通信之AutoResetEven
- 下一篇： 微信开发直接访问本地调试