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>

 <body>

 <div id="div1"></div>

 </body>

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

参数说明：

1. 指定时间或状态

2. 【可选】布尔值

            true：不执行函数  默认

            false: 执行函数

seek(时间)

 <script>

         $(function(){

             var t =new TimelineMax();

             t.to("#div1",2,{left:300});

             t.to("#div1",2,{width:300});

             t.to("#div1",2,{height:300});
t.seek(2);//直接运动到设置的时间点，后面的运动会接着运动

         });

 <script>

seek("状态")

 <script>

         $(function(){

             var t =new TimelineMax();

             t.to("#div1",2,{left:300});

             t.add("state1");

             t.to("#div1",2,{width:300});

             t.add("state2");

             t.to("#div1",2,{height:300});

             t.add("state3");
 t.seek("state2");//直接运动到设置的状态，后面的运动会接着运动

         });

 </script>

seek("状态",false)

 <script>

         $(function(){

             var t =new TimelineMax();

             t.to("#div1",2,{left:300,onComplete:function(){

                 alert("left:300");

             }});//标记一

             t.add("state1");

             t.to("#div1",2,{width:300,onComplete:function(){

                 alert("width:300");

             }});

             t.add("state2");

             t.to("#div1",2,{height:300});

             t.add("state3");
  t.seek("state1",false);//直接运动到设置的状态，但会执行【标记一】中的函数，后面的运动会接着运动

 </script>

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

参数说明：

 动画已执行的时间

 <script>

         $(function(){

             var t =new TimelineMax();

             t.to("#div1",2,{left:300,onComplete:function(){

                 alert("left:300");

             }});

             t.add("state1");

             t.to("#div1",2,{width:300,onComplete:function(){

                 alert("width:300");

             }});

             t.add("state2");

             t.to("#div1",2,{height:300});

             t.add("state3");

             t.seek("state3",false);
  console.log(t.time());  //6 //动画已执行的时间

         });

 </script>

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

参数说明：

 清除所有动画

 <script>

         $(function(){

             var t =new TimelineMax();

             t.to("#div1",2,{left:300,onComplete:function(){

                 alert("left:300");

             }});

             t.add("state1");

             t.to("#div1",2,{width:300,onComplete:function(){

                 alert("width:300");

             }});

             t.add("state2");
t.clear();  //清除state2之前的所有动画，后面的动画依然继续执行

             t.to("#div1",2,{height:300});

             t.add("state3");

         });

 </script>

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

 <script>

 //        seek()：完成指定的动画（无过渡）

 //        参数说明：

 //                 1. 指定时间或状态

 //                 2. 【可选】布尔值

 //                                  true：不执行函数  默认

 //                                  false: 执行函数

 //        time()：动画已执行的时间

 //        clear()：清除所有动画

         $(function(){

             var t =new TimelineMax();

             t.to("#div1",2,{left:300,onComplete:function(){

                 alert("left:300");

             }});

             t.add("state1");

             t.to("#div1",2,{width:300,onComplete:function(){

                 alert("width:300");

             }});

             t.add("state2");

 //          t.clear();  //清除所有动画

             t.to("#div1",2,{height:300});

             t.add("state3");

 //          t.stop();

           t.seek("state3",false);

             console.log(t.time());  //6 //动画已执行的时间

         });

 </script>

动画演示：

TweenMax动画库学习(三)

代码打包下载：

链接: http://pan.baidu.com/s/1nvMrrjN密码: qp44

秒客网

TweenMax动画库学习(三)

相关文章