TweenMax動畫庫學習(六)

本文轉載自查看原文 2016-06-05 17:24 2541

上一節我們主要聊了TweenMax動畫庫中的currentLabel()：獲取當前狀態、getLabelAfter()：獲取下一個狀態、getLabelBefore()：獲取上一個狀態等方法的使用，接下來我們繼續學習TweenMax動畫庫中的其它方法的使用。

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

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

1、頁面布局

 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             top:50px;
12             left:0;
13         }
14 </style>

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

2、ease：動畫運動形式

參數說明：如下圖

 1 <script>
 2         $(function(){
 3             var t =new TimelineMax();
 4             t.add("state1");
 5             t.to(".div1",1,{left:300,ease:Bounce.easeIn},1);
 6             t.add("state2");
 7             t.to(".div1",1,{width:300},"+=1");
 8             t.add("state3");
 9             t.to(".div1",1,{height:300});
10         });
11 </script>

動畫演示：

代碼打包下載：

鏈接: http://pan.baidu.com/s/1c1JBBDu 密碼: at3r

免責聲明！

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

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