TweenMax動畫庫學習(二)

本文轉載自查看原文 2016-06-03 01:52 8268 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刪除。

猜您在找 TweenMax動畫庫學習(三) TweenMax動畫庫學習(四) TweenMax動畫庫學習(一) TweenMax動畫庫學習(五) TweenMax動畫庫學習(六) TweenMax動畫庫學習動畫庫 Tweenmax 使用示例1 - 執行動畫 tweenMax學習筆記 TweenMax 參考 Super Scrollorama 和 TweenMax 插件