（转）TweenMax动画库学习（三）

上一节我们主要聊了TweenMax动画库中的add()添加状态、tweenTo()完成指定的动画（过渡）等方法的使用，接下来我们继续学习TweenMax动画库中的其它方法的使用。    

      TweenMax动画库的官方网址:  http://greensock.com/timelinemax

      下面我们直奔主题，开始介绍TweenMax动画库中的其它方法的使用：

      1、页面布局

复制代码
<script src="./../js/jquery-2.1.4.min.js"></script>
<script src="./../js/TweenMax.js"></script>
<style>
        html,body{
            margin: 0;
            padding: 0;
        }
        #div1{
            width:100px;
            height:100px;
            background: #8D121A;
            position: absolute;
            left:0;
            top:100px;
        }
</style>
复制代码
1 <body>
2 <div id="div1"></div>
3 </body>

   

2、seek()---完成指定的动画（无过渡）

         参数说明：

1. 指定时间或状态
2. 【可选】布尔值
            true：不执行函数  默认
            false: 执行函数

         seek(时间)

复制代码
1 <script>
2         $(function(){
3             var t =new TimelineMax();
4             t.to("#div1",2,{left:300});
5             t.to("#div1",2,{width:300});
6             t.to("#div1",2,{height:300});
7             t.seek(2);//直接运动到设置的时间点，后面的运动会接着运动
8         });
9 <script>
复制代码

       seek("状态")

复制代码
 1 <script>
 2         $(function(){
 3             var t =new TimelineMax();
 4             t.to("#div1",2,{left:300});
 5             t.add("state1");
 6             t.to("#div1",2,{width:300});
 7             t.add("state2");
 8             t.to("#div1",2,{height:300});
 9             t.add("state3");
10             t.seek("state2");//直接运动到设置的状态，后面的运动会接着运动
11         });
12 </script>
复制代码

      seek("状态",false)

复制代码
 1 <script>
 2         $(function(){
 3             var t =new TimelineMax();
 4             t.to("#div1",2,{left:300,onComplete:function(){
 5                 alert("left:300");
 6             }});//标记一
 7             t.add("state1");
 8             t.to("#div1",2,{width:300,onComplete:function(){
 9                 alert("width:300");
10             }});
11             t.add("state2");
12             t.to("#div1",2,{height:300});
13             t.add("state3");
14             t.seek("state1",false);//直接运动到设置的状态，但会执行【标记一】中的函数，后面的运动会接着运动
15 </script>
复制代码

3、time() 动画已执行的时间

         参数说明：

1 动画已执行的时间
复制代码
 1 <script>
 2         $(function(){
 3             var t =new TimelineMax();
 4             t.to("#div1",2,{left:300,onComplete:function(){
 5                 alert("left:300");
 6             }});
 7             t.add("state1");
 8             t.to("#div1",2,{width:300,onComplete:function(){
 9                 alert("width:300");
10             }});
11             t.add("state2");
12             t.to("#div1",2,{height:300});
13             t.add("state3");
14             t.seek("state3",false);
15             console.log(t.time());  //6 //动画已执行的时间
16         });
17 </script>
复制代码

4、clear()：清除所有动画

            参数说明：

1 清除所有动画
复制代码
 1 <script>
 2         $(function(){
 3             var t =new TimelineMax();
 4             t.to("#div1",2,{left:300,onComplete:function(){
 5                 alert("left:300");
 6             }});
 7             t.add("state1");
 8             t.to("#div1",2,{width:300,onComplete:function(){
 9                 alert("width:300");
10             }});
11             t.add("state2");
12             t.clear();  //清除state2之前的所有动画，后面的动画依然继续执行
13             t.to("#div1",2,{height:300});
14             t.add("state3");
15         });
16 </script>
复制代码

     seek()、time()、clear()综合使用

复制代码
 1 <script>
 2 //        seek()：完成指定的动画（无过渡）
 3 //        参数说明：
 4 //                 1. 指定时间或状态
 5 //                 2. 【可选】布尔值
 6 //                                  true：不执行函数  默认
 7 //                                  false: 执行函数
 8 //        time()：动画已执行的时间
 9 //        clear()：清除所有动画
10         $(function(){
11             var t =new TimelineMax();
12             t.to("#div1",2,{left:300,onComplete:function(){
13                 alert("left:300");
14             }});
15             t.add("state1");
16             t.to("#div1",2,{width:300,onComplete:function(){
17                 alert("width:300");
18             }});
19             t.add("state2");
20 //          t.clear();  //清除所有动画
21             t.to("#div1",2,{height:300});
22             t.add("state3");
23 //          t.stop();
24           t.seek("state3",false);
25             console.log(t.time());  //6 //动画已执行的时间
26         });
27 </script> 
复制代码

动画演示：

posted @ 2018-10-16 16:37  江南渔雾  阅读(277)  评论(0)    收藏  举报