目錄 TweenMax動畫庫學習(一) TweenMax動畫庫學習(二) TweenMax動畫庫學習(三) TweenMax動畫庫學習(四) TweenMax動畫庫學習(五) TweenMax動畫庫學習(六) 上一節我們主要聊了TweenMax動畫庫中的currentLabel():獲取當前狀態、g ...
目錄
上一節我們主要聊了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