目錄
上一節我們主要聊了TweenMax動畫庫中的to():添加動畫、play()播放動畫、stop()停止動畫、reverse()反向執行動畫、onComplete():運動結束后觸發對應的函數、 onReverseComplete():反向運動結束后觸發對應的函數等方法的使用,接下來我們繼續學習TweenMax動畫庫中的其它方法的使用。
TweenMax動畫庫的官方網址: 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、add()---添加狀態
參數說明:
1 字符串或一個函數
add("字符串")
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 }); 11 </script>
add(函數)
1 <script> 2 $(function(){ 3 var t =new TimelineMax(); 4 t.to("#div1",2,{left:300}); 5 t.add(function(){ 6 $("#div1").css("background","blue"); 7 }); 8 t.to("#div1",2,{width:300}); 9 t.to("#div1",2,{height:300}); 10 }); 11 </script>
2、TweenTo---完成指定的動畫(過渡)
參數說明:
1 指定時間或狀態的字符串
TweenTo(時間)
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.stop(); 8 t.tweenTo(1.5);//完成指定的動畫(過渡) 9 }); 10 </script>
TweenTo("字符串")
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.stop(); 11 t.tweenTo("state2"); //完成指定的動畫(過渡) 12 }); 13 </script>
add()與tweenTo()綜合使用
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>TweenMax動畫庫學習(二)</title> 6 <script src="./../js/jquery-2.1.4.min.js"></script> 7 <script src="./../js/TweenMax.js"></script> 8 <style> 9 html,body{ 10 margin: 0; 11 padding: 0; 12 } 13 #div1{ 14 width:100px; 15 height:100px; 16 background: #8D121A; 17 position: absolute; 18 left:0; 19 top:100px; 20 } 21 </style> 22 <script> 23 // add---添加狀態 24 // 參數說明: 25 // 1. 字符串或一個函數 26 // TweenTo---完成指定的動畫(過渡) 27 // 參數說明: 28 // 1. 指定時間或狀態的字符串 29 $(function(){ 30 var t =new TimelineMax(); 31 t.to("#div1",2,{left:300}); 32 t.add("state1");//添加狀態 33 t.add(function(){ 34 $("#div1").css("background","blue"); 35 }); 36 t.to("#div1",2,{width:300}); 37 t.add("state2"); 38 t.to("#div1",2,{height:300}); 39 t.add("state3"); 40 t.stop(); 41 t.tweenTo("state2"); //完成指定的動畫(過渡) 42 // t.tweenTo(1.5); 43 }); 44 </script> 45 </head> 46 <body> 47 <div id="div1"></div> 48 </body> 49 </html>
動畫演示:
代碼打包下載:
鏈接: http://pan.baidu.com/s/1dFrzxy5 密碼: g9ww