TweenMax動畫庫學習(五)

本文轉載自查看原文 2016-06-03 19:09 2913

TweenMax動畫庫學習(一)

TweenMax動畫庫學習(二)

TweenMax動畫庫學習(三)

TweenMax動畫庫學習(四)

TweenMax動畫庫學習(五)

TweenMax動畫庫學習(六)

上一節我們主要聊了TweenMax動畫庫中的add()添加狀態、tweenTo()完成指定的動畫（過渡）等方法的使用，接下來我們繼續學習TweenMax動畫庫中的其它方法的使用。

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

下面我們直奔主題，開始介紹TweenMax動畫庫中的其它方法的使用：

1、頁面布局

 1 <script src="./../js/jquery-2.1.4.min.js"></script>
 2 <script src="./../js/TweenMax.js"></script>
 3 <style>
 4         html,body{
 5             margin: 0;
 6             padding: 0;
 7         }
 8         .div1{
 9             width:100px;
10             height:100px;
11             background: #8D121A;
12             position: absolute;
13             top:150px;
14             left:0;
15         }
16 </style>

1 <body>
2 <div id="label"></div>
3 <div class="div1"></div>
4 </body>

2、currentLabel()：獲取當前狀態

參數說明：

1 返回值是狀態的字符串

currentLabel()

 1 <script>
 2         $(function(){
 3             var t =new TimelineMax();
 4             t.add("state1");
 5             t.to(".div1",1,{left:300,onComplete:function(){
 6                 getCurrentLabel();
 7             }},1);
 8             t.add("state2");
 9             t.to(".div1",1,{width:300,onComplete:function(){
10                 getCurrentLabel();
11             }},"+=1");
12             t.add("state3");
13             t.to(".div1",1,{height:300,onComplete:function(){
14                 getCurrentLabel();
15             }});
16             getCurrentLabel();
17             //獲取當前狀態
18             function getCurrentLabel(){
19                 console.log(t.currentLabel()); //控制台打印輸出當前動畫運動到的狀態
20             }
21         });
22 </script>

3、getLabelAfter()：獲取下一個狀態

參數說明：

  1. 時間數字
            返回值是狀態的字符串，如果沒有下一個狀態返回null

getLabelBefore()：獲取上一個狀態

參數說明：

  1. 時間數字
            返回值是狀態的字符串，如果沒有上一個狀態返回null

 1 <script>
 2 $(function(){
 3             var t =new TimelineMax();
 4             t.add("state1");
 5             t.to(".div1",1,{left:300,onComplete:function(){
 6                 getCurrentLabel();
 7             }},1);
 8             t.add("state2");
 9             t.to(".div1",1,{width:300,onComplete:function(){
10                 getCurrentLabel();
11             }},"+=1");
12             t.add("state3");
13             t.to(".div1",1,{height:300,onComplete:function(){
14                 getCurrentLabel();
15             }});
16             getCurrentLabel();
17             //獲取當前狀態
18             function getCurrentLabel(){
19                 //獲取當前的時間
20                 var currentTime = t.getLabelTime( t.currentLabel() );
21                 //獲取到上一個狀態
22                 var beforeLabel = t.getLabelBefore( currentTime );
23                 //獲取到下一個狀態
24                 var afterLabel  = t.getLabelAfter( currentTime );
25                 var str = "<p>上一個狀態:"+ beforeLabel +"</p><p>當前狀態:"+ t.currentLabel() +"</p><p>下一個狀態:"+ afterLabel +"</p>";
26                 $("#label").html( str );
27             }
28         });
29 </script>

動畫演示：

代碼打包下載：

鏈接: http://pan.baidu.com/s/1eSz4Xz0 密碼: wgw3

免責聲明！

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

猜您在找 TweenMax動畫庫學習(六) TweenMax動畫庫學習動畫庫 Tweenmax 使用示例1 - 執行動畫 tweenMax學習筆記 tweenmax.js 文檔前端常用動畫庫 10大JavaScript動畫庫 css3常用動畫+動畫庫 css3常用動畫+動畫庫 ReactNative學習實踐--動畫初探之加載動畫