TweenMax動畫庫學習(二)


目錄           

           TweenMax動畫庫學習(一)

           TweenMax動畫庫學習(二)

           TweenMax動畫庫學習(三)

           TweenMax動畫庫學習(四)

           TweenMax動畫庫學習(五)  

           TweenMax動畫庫學習(六)  

 

 

      上一節我們主要聊了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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM