(转)TweenMax动画库学习(一)

之前在做HTML5移动端开发的时候,用的都是Animate.css,这个插件封装的的确很好,但是在做一些缓动方面的动画,它也有一定的不足之处,比如手要写一个连续的动画,需要不停的去重复写函数,使得代码严重的冗余,再比如要获取动画执行的时间,就比较的麻烦等等。而TweenMax恰恰可以解决这方面的不足。于是我花了3天的时间,认真的学习了TweenMax动画库的用法,现在将个人的学习总结如下,若有不正确的地方,欢迎读者给与批评指正! 

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

     下面我们直奔主题,开始介绍TweenMax动画库:

     1、如何引用TweenMax动画库

   TweenMax动画库依赖jQuery  

1  <script src="./../js/jquery-2.1.4.min.js"></script>
2  <script src="./../js/TweenMax.js"></script>  

     2、得到动画的示例  

1 <script>
2         $(function () {
3             var t = new TimelineMax();
4         });
5 </script>

  3、to():添加动画

    参数说明: 

复制代码
t.to("元素选择器或对象",持续时间,对象,【可选】动画延迟发生时间可写数字,"-=0.5","+=0.5")

        1. 元素选择器或对象

        2. 持续时间

        3. 对象

              变化的属性->值

       4. 【可选】动画延迟发生时间

            可写数字,“-=0.5”,“+=0.5“
复制代码

        页面简单布局 

复制代码
 1   <style>
 2         html,body{
 3             margin: 0;
 4             padding: 0;
 5         }
 6         #div1{
 7             width:100px;
 8             height:100px;
 9             background: #8D121A;
10             position: absolute;
11             left:0;
12             top:100px;
13         }
14     </style>
复制代码
1 <body>
2 <div id="div1"></div>
3 </body>  

       执行单个动画   

复制代码
1 <script>
2         $(function(){
3             var t =new TimelineMax();
4             t.to("#div1",1,{left:300},1);
5         });
6  </script>
复制代码

       执行组合动画

复制代码
1  <script>
2         $(function(){
3             var t =new TimelineMax();
4             t.to("#div1",1,{left:300,width:300},1);
5         });
6  </script> 
复制代码

        执行队列动画,列表中的动画会依次执行

复制代码
1 <script>
2     t.to("#div1", 1, { left: 300 });
3     t.to("#div1", 1, { width: 300 });
4     t.to("#div1", 1, { height: 300 });
5     t.to("#div1", 1, { top: 300 });
6     t.to("#div1", 1, { rotationZ: 180 });
7     t.to("#div1", 1, { opacity: 0 });
8 </script>
复制代码

 添加第四个参数 设置动画的延迟时间

复制代码
1 <script>
2     //动画延迟一秒执行
3     t.to("#div1", 1, { left: 300, width: 300 }, 1);
4     //第二条动画没有延迟时间,所以等第一条动画执行完成后立刻执行第二条动画
5     t.to("#div1", 1, { width: 300 });
6 </script>
复制代码
复制代码
1 <script>
2     //动画延迟一秒执行
3     t.to("#div1", 1, { left: 300, width: 300 }, 1);
4     //第二条动画也是延迟一秒执行,会和第一条动画同时延迟一秒执行
5     t.to("#div1", 1, { width: 300 }, 1);
6 </script>
复制代码

  延迟执行第二条动画

复制代码
1 <script>
2     //动画延迟一秒执行
3     t.to("#div1", 1, { left: 300, width: 300 }, 1);
4     //实现第一条动画完成后,延迟一秒,执行第二条动画
5     t.to("#div1", 1, { width: 300 }, 3);
6 </script>
复制代码

  延迟执行第二条动画(便捷写法)

1 <script>
2     //动画延迟一秒执行
3     t.to("#div1", 1, { left: 300, width: 300 }, 1);
4     t.to("#div1", 1, { width: 300 }, "+=1");
5 </script>

  让第二条动画指令立刻执行

复制代码
1 <script>
2     //动画延迟一秒执行
3     t.to("#div1", 1, { left: 300, width: 300 }, 1);
4     //第四个参数设0后,动画会立刻执行
5     t.to("#div1", 1, { width: 300 }, 0);
6 </script>
复制代码

   动画的停止与播放

 通过play()方法与stop()方法来控制

复制代码
 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         //        stop():停止动画
24         //        play():开始动画
25         $(function(){
26             var t =new TimelineMax();
27             // t.to("元素选择器或对象",持续时间,对象,【可选】动画延迟发生时间可写数字,"-=0.5","+=0.5")
28             t.to("#div1",1,{left:300},1);
29             t.to("#div1",2,{width:300},"+=1");
30             t.to("#div1",2,{height:300},"+=1");
31             t.to("#div1",2,{top:600});
32             t.to("#div1",2,{rotationZ:180});
33             t.to("#div1",2,{opacity:0});
34             t.stop(); //停止动画
35             $("#play").click(function(){
36                 t.play();//播放动画
37             });
38             $("#stop").click(function(){
39                 t.stop();//停止动画
40             });
41         });
42     </script>
43 </head>
44 <body>
45 <input type="button" id="play" value="播放"/>
46 <input type="button" id="stop" value="停止"/>
47 <div id="div1"></div>
48 </body>
49 </html> 
复制代码

    反向执行动画

    通过reverse()方法让动画反向执行

复制代码
 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         //        reverse():反向开始动画
24         $(function(){
25             var t =new TimelineMax();
26             // t.to("元素选择器或对象",持续时间,对象,【可选】动画延迟发生时间可写数字,"-=0.5","+=0.5")
27             t.to("#div1",1,{left:300},1);
28             t.to("#div1",2,{width:300},"+=1");
29             t.to("#div1",2,{height:300},"+=1");
30             t.to("#div1",2,{top:600});
31             t.to("#div1",2,{rotationZ:180});
32             t.to("#div1",2,{opacity:0});
33             t.stop(); //停止动画
34             $("#play").click(function(){
35                 t.play();//播放动画
36             });
37             $("#stop").click(function(){
38                 t.stop();//停止动画
39             });
40             $("#reverse").click(function(){
41                 t.reverse();//反向执行动画
42             });
43         });
44     </script>
45 </head>
46 <body>
47 <input type="button" id="play" value="播放"/>
48 <input type="button" id="stop" value="停止"/>
49 <input type="button" id="reverse" value="反向动画"/>
50 <div id="div1"></div>
51 </body>
52 </html>
复制代码
     onComplete():运动结束后触发对应的函数
 
     onReverseComplete():反向运动结束后触发对应的函数
 
复制代码
 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 //        stop():停止动画
24 //        play():开始动画
25 //        reverse():反向开始动画
26 //        onComplete():运动结束后触发对应的函数
27 //        onReverseComplete():反向运动结束后触发对应的函数
28         $(function(){
29             var t =new TimelineMax();
30             // t.to("元素选择器或对象",持续时间,对象,【可选】动画延迟发生时间可写数字,"-=0.5","+=0.5")
31             t.to("#div1",1,{left:300,onComplete:function(){
32                 alert("left:300");
33             },onReverseComplete(){
34                 alert("left:0");
35             }},1);
36             t.to("#div1",2,{width:300,onComplete:function(){
37                 alert("width:300")
38             },onReverseComplete(){
39                 alert("width:100");
40             }},"+=1");
41             t.to("#div1",2,{height:300},"+=1");
42             t.to("#div1",2,{top:600});
43             t.to("#div1",2,{rotationZ:180});
44             t.to("#div1",2,{opacity:0});
45             t.stop(); //停止动画
46             $("#play").click(function(){
47                 t.play();//播放动画
48             });
49             $("#stop").click(function(){
50                 t.stop();//停止动画
51             });
52             $("#reverse").click(function(){
53                 t.reverse();//反向执行动画
54             });
55         });
56     </script>
57 </head>
58 <body>
59 <input type="button" id="play" value="播放"/>
60 <input type="button" id="stop" value="停止"/>
61 <input type="button" id="reverse" value="反向动画"/>
62 <div id="div1"></div>
63 </body>
64 </html>
复制代码

 动画演示:

posted @ 2018-10-16 16:34  江南渔雾  阅读(318)  评论(0编辑  收藏  举报