（转）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>
复制代码

 动画演示：

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