TweenMax动画库学习

Posted 抖音的博客

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了TweenMax动画库学习相关的知识,希望对你有一定的参考价值。

目录           

           TweenMax动画库学习(一)

           TweenMax动画库学习(二)

           TweenMax动画库学习(三)

           TweenMax动画库学习(四)

           TweenMax动画库学习(五)  

           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> 

动画演示:

 

代码打包下载:

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

 

以上是关于TweenMax动画库学习的主要内容,如果未能解决你的问题,请参考以下文章

TweenMax动画库学习

TweenMax动画库学习

TweenMax动画库学习

TweenMax动画库学习

TweenMax的GSAP(GreenSock动画平台)GSAP,专业的Web动画库

41 Vue使用第三方动画库