目錄: TweenMax動畫庫學習(一) TweenMax動畫庫學習(二) 之前在做HTML5移動端開發的時候，用的都是Animate.css,這個插件封裝的的確很好，但是在做一些緩動方面的動畫，它也有一定的不足之處，比如手要寫一個連續的動畫，需要不停的去重覆寫函數，使得代碼嚴重的冗餘，再比如要獲取 ...
目錄:
之前在做HTML5移動端開發的時候，用的都是Animate.css,這個插件封裝的的確很好，但是在做一些緩動方面的動畫，它也有一定的不足之處，比如手要寫一個連續的動畫，需要不停的去重覆寫函數，使得代碼嚴重的冗餘，再比如要獲取動畫執行的時間，就比較的麻煩等等。而TweenMax恰恰可以解決這方面的不足。於是我花了3天的時間，認真的學習了TweenMax動畫庫的用法，現在將個人的學習總結如下，若有不正確的地方，歡迎讀者給與批評指正！
TweenMax動畫庫的官方網址: http://greensock.com/timelinemax
下麵我們直奔主題，開始介紹TweenMax動畫庫：
1、如何引用TweenMax動畫庫
TweenMax動畫庫依賴jQuery
1 <script src="./../js/jquery-2.1.4.min.js"></script> 2 <script src="./../js/TweenMax.js"></script>
2、得到動畫的示例
1 <script> 2 $(function () { 3 var t = new TimelineMax(); 4 }); 5 </script>
3、to()：添加動畫
參數說明：
t.to("元素選擇器或對象",持續時間,對象,【可選】動畫延遲發生時間可寫數字,"-=0.5","+=0.5")
1. 元素選擇器或對象
2. 持續時間
3. 對象
變化的屬性->值
4. 【可選】動畫延遲發生時間
可寫數字，“-=0.5”，“+=0.5“
頁面簡單佈局
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 left:0; 12 top:100px; 13 } 14 </style>
1 <body> 2 <div id="div1"></div> 3 </body>
執行單個動畫
1 <script> 2 $(function(){ 3 var t =new TimelineMax(); 4 t.to("#div1",1,{left:300},1); 5 }); 6 </script>
執行組合動畫
1 <script> 2 $(function(){ 3 var t =new TimelineMax(); 4 t.to("#div1",1,{left:300,width:300},1); 5 }); 6 </script>
執行隊列動畫,列表中的動畫會依次執行
1 <script> 2 t.to("#div1", 1, { left: 300 }); 3 t.to("#div1", 1, { width: 300 }); 4 t.to("#div1", 1, { height: 300 }); 5 t.to("#div1", 1, { top: 300 }); 6 t.to("#div1", 1, { rotationZ: 180 }); 7 t.to("#div1", 1, { opacity: 0 }); 8 </script>
添加第四個參數 設置動畫的延遲時間
1 <script> 2 //動畫延遲一秒執行 3 t.to("#div1", 1, { left: 300, width: 300 }, 1); 4 //第二條動畫沒有延遲時間,所以等第一條動畫執行完成後立刻執行第二條動畫 5 t.to("#div1", 1, { width: 300 }); 6 </script>
1 <script> 2 //動畫延遲一秒執行 3 t.to("#div1", 1, { left: 300, width: 300 }, 1); 4 //第二條動畫也是延遲一秒執行,會和第一條動畫同時延遲一秒執行 5 t.to("#div1", 1, { width: 300 }, 1); 6 </script>
延遲執行第二條動畫
1 <script> 2 //動畫延遲一秒執行 3 t.to("#div1", 1, { left: 300, width: 300 }, 1); 4 //實現第一條動畫完成後,延遲一秒,執行第二條動畫 5 t.to("#div1", 1, { width: 300 }, 3); 6 </script>
延遲執行第二條動畫(便捷寫法)
1 <script> 2 //動畫延遲一秒執行 3 t.to("#div1", 1, { left: 300, width: 300 }, 1); 4 t.to("#div1", 1, { width: 300 }, "+=1"); 5 </script>
讓第二條動畫指令立刻執行
1 <script> 2 //動畫延遲一秒執行 3 t.to("#div1", 1, { left: 300, width: 300 }, 1); 4 //第四個參數設0後,動畫會立刻執行 5 t.to("#div1", 1, { width: 300 }, 0); 6 </script>
動畫的停止與播放
通過play()方法與stop()方法來控制
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 // stop()：停止動畫
24 // play()：開始動畫
25 $(function(){
26 var t =new TimelineMax();
27 // t.to("元素選擇器或對象",持續時間,對象,【可選】動畫延遲發生時間可寫數字,"-=0.5","+=0.5")
28 t.to("#div1",1,{left:300},1);
29 t.to("#div1",2,{width:300},"+=1");
30 t.to("#div1",2,{height:300},"+=1");
31 t.to("#div1",2,{top:600});
32 t.to("#div1",2,{rotationZ:180});
33 t.to("#div1",2,{opacity:0});
34 t.stop(); //停止動畫
35 $("#play").click(function(){
36 t.play();//播放動畫
37 });
38 $("#stop").click(function(){
39 t.stop();//停止動畫
40 });
41 });
42 </script>
43 </head>
44 <body>
45 <input type="button" id="play" value="播放"/>
46 <input type="button" id="stop" value="停止"/>
47 <div id="div1"></div>
48 </body>
49 </html>
反向執行動畫
通過reverse()方法讓動畫反向執行
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 // reverse()：反向開始動畫 24 $(function(){ 25 var t =new TimelineMax(); 26 // t.to("元素選擇器或對象",持續時間,對象,【可選】動畫延遲發生時間可寫數字,"-=0.5","+=0.5") 27 t.to("#div1",1,{left:300},1); 28 t.to("#div1",2,{width:300},"+=1"); 29 t.to("#div1",2,{height:300},"+=1"); 30 t.to("#div1",2,{top:600}); 31 t.to("#div1",2,{rotationZ:180}); 32 t.to("#div1",2,{opacity:0}); 33 t.stop(); //停止動畫 34 $("#play").click(function(){ 35 t.play();//播放動畫 36 }); 37 $("#stop").click(function(){ 38 t.stop();//停止動畫 39 }); 40 $("#reverse").click(function(){ 41 t.reverse();//反向執行動畫 42 }); 43 }); 44 </script> 45 </head> 46 <body> 47 <input type="button" id="play" value="播放"/> 48 <input type="button" id="stop" value="停止"/> 49 <input type="button" id="reverse" value="反向動畫"/> 50 <div id="div1"></div> 51 </body> 52 </html>onComplete()：運動結束後觸發對應的函數 onReverseComplete()：反向運動結束後觸發對應的函數
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>TweenMax動畫庫學習(一)</title><
