TweenMax動畫庫學習

時間 2019-11-19

標籤 tweenmax 動畫學習简体版

原文原文鏈接

以前在作HTML5移動端開發的時候，用的都是Animate.css,這個插件封裝的的確很好，可是在作一些緩動方面的動畫，它也有必定的不足之處，好比手要寫一個連續的動畫，須要不停的去重複寫函數，使得代碼嚴重的冗餘，再好比要獲取動畫執行的時間，就比較的麻煩等等。而TweenMax偏偏能夠解決這方面的不足。因而我認真的學習了TweenMax動畫庫的用法，如今將我的的學習總結以下，如有不正確的地方，歡迎讀者給與批評指正！ css

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

下面咱們直奔主題，開始介紹TweenMax動畫庫：jquery

一、如何引用TweenMax動畫庫web

TweenMax動畫庫依賴jQuery 函數

1  <script src="./../js/jquery-2.1.4.min.js"></script>
2  <script src="./../js/TweenMax.js"></script>

二、獲得動畫的示例 佈局

1 <script>
2         $(function () {
3             var t = new TimelineMax();
4         });
5 </script>

三、to()：添加動畫學習

參數說明： 動畫

t.to("元素選擇器或對象",持續時間,對象,【可選】動畫延遲發生時間可寫數字,"-=0.5","+=0.5")

1. 元素選擇器或對象spa

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>

延遲執行第二條動畫(便捷寫法)

 
<script>
   //動畫延遲一秒執行
   t.to("#div1", 1, { left: 300, width: 300 }, 1);
   t.to("#div1", 1, { width: 300 }, "+=1");
</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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。