TweenMax动画库学习

Posted 抖音的博客

tags:

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

目录           

           TweenMax动画库学习(一)

           TweenMax动画库学习(二)

           TweenMax动画库学习(三)

           TweenMax动画库学习(四)

           TweenMax动画库学习(五)  

           TweenMax动画库学习(六)  

 

 

      上一节我们主要聊了TweenMax动画库中的to():添加动画、play()播放动画、stop()停止动画、reverse()反向执行动画、onComplete():运动结束后触发对应的函数、  onReverseComplete():反向运动结束后触发对应的函数等方法的使用,接下来我们继续学习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、add()---添加状态

         参数说明:      

1 字符串或一个函数

      add("字符串")

 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         });
11 </script>

      add(函数)

 1 <script>
 2         $(function(){
 3             var t =new TimelineMax();
 4             t.to("#div1",2,{left:300});
 5             t.add(function(){
 6                 $("#div1").css("background","blue");
 7             });
 8             t.to("#div1",2,{width:300});
 9             t.to("#div1",2,{height:300});
10         });
11 </script>

 2、TweenTo---完成指定的动画(过渡)

         参数说明:

1 指定时间或状态的字符串

        TweenTo(时间)

 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.stop();
 8             t.tweenTo(1.5);//完成指定的动画(过渡)
 9         });
10 </script>

        TweenTo("字符串")

 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.stop();
11             t.tweenTo("state2"); //完成指定的动画(过渡)
12         });
13 </script>

         add()与tweenTo()综合使用

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>TweenMax动画库学习(二)</title>
 6     <script src="./../js/jquery-2.1.4.min.js"></script>
 7     <script src="./../js/TweenMax.js"></script>
 8     <style>
 9         html,body{
10             margin: 0;
11             padding: 0;
12         }
13         #div1{
14             width:100px;
15             height:100px;
16             background: #8D121A;
17             position: absolute;
18             left:0;
19             top:100px;
20         }
21     </style>
22     <script>
23 //        add---添加状态
24 //        参数说明:
25 //                 1. 字符串或一个函数
26 //                 TweenTo---完成指定的动画(过渡)
27 //        参数说明:
28 //                1. 指定时间或状态的字符串
29         $(function(){
30             var t =new TimelineMax();
31             t.to("#div1",2,{left:300});
32             t.add("state1");//添加状态
33             t.add(function(){
34                 $("#div1").css("background","blue");
35             });
36             t.to("#div1",2,{width:300});
37             t.add("state2");
38             t.to("#div1",2,{height:300});
39             t.add("state3");
40             t.stop();
41             t.tweenTo("state2"); //完成指定的动画(过渡)
42 //            t.tweenTo(1.5);
43         });
44     </script>
45 </head>
46 <body>
47 <div id="div1"></div>
48 </body>
49 </html>

 动画演示:

 

 

  代码打包下载:

链接: http://pan.baidu.com/s/1dFrzxy5 密码: g9ww

 

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

TweenMax动画库学习

TweenMax动画库学习

TweenMax动画库学习

TweenMax动画库学习

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

41 Vue使用第三方动画库