TweenMax動畫庫學習(一)

時間  2019-11-29
標籤 tweenmax 動畫 學習 简体版
原文   原文鏈接

目錄           css

           TweenMax動畫庫學習(一)html

           TweenMax動畫庫學習(二)jquery

           TweenMax動畫庫學習(三)web

           TweenMax動畫庫學習(四)函數

           TweenMax動畫庫學習(五)  佈局

           TweenMax動畫庫學習(六)  學習

 

 

 

      以前在作HTML5移動端開發的時候，用的都是Animate.css,這個插件封裝的的確很好，可是在作一些緩動方面的動畫，它也有必定的不足之處，好比手要寫一個連續的動畫，須要不停的去重複寫函數，使得代碼嚴重的冗餘，再好比要獲取動畫執行的時間，就比較的麻煩等等。而TweenMax偏偏能夠解決這方面的不足。因而我花了3天的時間，認真的學習了TweenMax動畫庫的用法，如今將我的的學習總結以下，如有不正確的地方，歡迎讀者給與批評指正！ 動畫

     TweenMax動畫庫的官方網址:  http://greensock.com/timelinemaxspa

     下面咱們直奔主題，開始介紹TweenMax動畫庫：插件

     一、如何引用TweenMax動畫庫

   TweenMax動畫庫依賴jQuery  

1  <script src="./../js/jquery-2.1.4.min.js"></script>
2  <script src="./../js/TweenMax.js"></script>  

     二、獲得動畫的示例  

1 <script>
2         $(function () {
3             var t = new TimelineMax();
4         });
5 </script>

  三、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>
 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 //        reverse()：反向開始動畫
26 //        onComplete()：運動結束後觸發對應的函數
27 //        onReverseComplete()：反向運動結束後觸發對應的函數
28         $(function(){
29             var t =new TimelineMax();
30             // t.to("元素選擇器或對象",持續時間,對象,【可選】動畫延遲發生時間可寫數字,"-=0.5","+=0.5")
31             t.to("#div1",1,{left:300,onComplete:function(){ 32  alert("left:300"); 33  },onReverseComplete(){ 34  alert("left:0"); 35  }},1);
36             t.to("#div1",2,{width:300,onComplete:function(){ 37  alert("width:300") 38  },onReverseComplete(){ 39  alert("width:100"); 40  }},"+=1");
41             t.to("#div1",2,{height:300},"+=1");
42             t.to("#div1",2,{top:600});
43             t.to("#div1",2,{rotationZ:180});
44             t.to("#div1",2,{opacity:0});
45             t.stop(); //中止動畫
46             $("#play").click(function(){
47                 t.play();//播放動畫
48             });
49             $("#stop").click(function(){
50                 t.stop();//中止動畫
51             });
52             $("#reverse").click(function(){
53                 t.reverse();//反向執行動畫
54             });
55         });
56     </script>
57 </head>
58 <body>
59 <input type="button" id="play" value="播放"/>
60 <input type="button" id="stop" value="中止"/>
61 <input type="button" id="reverse" value="反向動畫"/>
62 <div id="div1"></div>
63 </body>
64 </html>

 動畫演示：

 

 

    代碼打包下載：

連接: http://pan.baidu.com/s/1nvaoe5V 密碼: gm7y
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程