之前在做HTML5移動端開發的時候，用的都是Animate.css,這個插件封裝的的確很好，但是在做一些緩動方面的動畫，它也有一定的不足之處，比如手要寫一個連續的動畫，需要不停的去重復寫函數，使得代碼嚴重的冗余，再比如要獲取動畫執行的時間，就比較的麻煩等等。而TweenMax恰恰可以解決這方面的不足。於是我認真的學習了TweenMax動畫庫的用法，現在將個人的學習總結如下，若有不正確的地方，歡迎讀者給與批評指正！
TweenMax動畫庫的官方網址: http://greensock.com/timelinemax
下面我們直奔主題，開始介紹TweenMax動畫庫：
1、如何引用TweenMax動畫庫
TweenMax動畫庫依賴jQuery
1 <script src="./../js/jquery-2.1.4.min.js"></script> 2 <script src="./../js/TweenMax.js"></script>
2、得到動畫的示例
1 <script>
2 $(function () {
3 var t = new TimelineMax();
4 });
5 </script>
3、to()：添加動畫
參數說明：
t.to("元素選擇器或對象",持續時間,對象,【可選】動畫延遲發生時間可寫數字,"-=0.5","+=0.5")
1. 元素選擇器或對象
2. 持續時間
3. 對象
變化的屬性->值
4. 【可選】動畫延遲發生時間
可寫數字，“-=0.5”，“+=0.5“
頁面簡單布局
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 left:0;
12 top:100px;
13 }
14 </style>
1 <body> 2 <div id="div1"></div> 3 </body>
執行單個動畫
1 <script>
2 $(function(){
3 var t =new TimelineMax();
4 t.to("#div1",1,{left:300},1);
5 });
6 </script>
執行組合動畫
1 <script>
2 $(function(){
3 var t =new TimelineMax();
4 t.to("#div1",1,{left:300,width:300},1);
5 });
6 </script>
執行隊列動畫,列表中的動畫會依次執行
1 <script>
2 t.to("#div1", 1, { left: 300 });
3 t.to("#div1", 1, { width: 300 });
4 t.to("#div1", 1, { height: 300 });
5 t.to("#div1", 1, { top: 300 });
6 t.to("#div1", 1, { rotationZ: 180 });
7 t.to("#div1", 1, { opacity: 0 });
8 </script>
添加第四個參數 設置動畫的延遲時間
1 <script>
2 //動畫延遲一秒執行
3 t.to("#div1", 1, { left: 300, width: 300 }, 1);
4 //第二條動畫沒有延遲時間,所以等第一條動畫執行完成后立刻執行第二條動畫
5 t.to("#div1", 1, { width: 300 });
6 </script>
1 <script>
2 //動畫延遲一秒執行
3 t.to("#div1", 1, { left: 300, width: 300 }, 1);
4 //第二條動畫也是延遲一秒執行,會和第一條動畫同時延遲一秒執行
5 t.to("#div1", 1, { width: 300 }, 1);
6 </script>
延遲執行第二條動畫
1 <script>
2 //動畫延遲一秒執行
3 t.to("#div1", 1, { left: 300, width: 300 }, 1);
4 //實現第一條動畫完成后,延遲一秒,執行第二條動畫
5 t.to("#div1", 1, { width: 300 }, 3);
6 </script>
延遲執行第二條動畫(便捷寫法)
1 <script>
2 //動畫延遲一秒執行
3 t.to("#div1", 1, { left: 300, width: 300 }, 1);
4 t.to("#div1", 1, { width: 300 }, "+=1");
5 </script>
讓第二條動畫指令立刻執行
1 <script>
2 //動畫延遲一秒執行
3 t.to("#div1", 1, { left: 300, width: 300 }, 1);
4 //第四個參數設0后,動畫會立刻執行
5 t.to("#div1", 1, { width: 300 }, 0);
6 </script>