TweenMax动画库学习(一)

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

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

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

1、如何引用TweenMax动画库

TweenMax动画库依赖jQuery

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

  <script src="./../js/TweenMax.js"></script>

2、得到动画的示例

 <script>

         $(function () {

             var t = new TimelineMax();

         });

 </script>

3、to()：添加动画

参数说明：

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

1. 元素选择器或对象

2. 持续时间

3. 对象

变化的属性->值

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

            可写数字，“-=0.5”，“+=0.5“

页面简单布局

   <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>

执行单个动画

 <script>

         $(function(){

             var t =new TimelineMax();

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

         });

  </script>

执行组合动画

  <script>

         $(function(){

             var t =new TimelineMax();

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

         });

  </script>

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

 <script>

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

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

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

     t.to("#div1", 1, { top: 300 });

     t.to("#div1", 1, { rotationZ: 180 });

     t.to("#div1", 1, { opacity: 0 });

 </script>

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

 <script>

     //动画延迟一秒执行

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

     //第二条动画没有延迟时间,所以等第一条动画执行完成后立刻执行第二条动画

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

 </script>

 <script>

     //动画延迟一秒执行

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

     //第二条动画也是延迟一秒执行,会和第一条动画同时延迟一秒执行

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

 </script>

延迟执行第二条动画

 <script>

     //动画延迟一秒执行

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

     //实现第一条动画完成后,延迟一秒,执行第二条动画

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

 </script>

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

 <script>

     //动画延迟一秒执行

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

     t.to("#div1", 1, { width: 300 }, "+=1");

 </script>

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

 <script>

     //动画延迟一秒执行

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

     //第四个参数设0后,动画会立刻执行

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

 </script>

动画的停止与播放

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

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>TweenMax动画库学习(一)</title>

     <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>

     <script>

         //        stop()：停止动画

         //        play()：开始动画

         $(function(){

             var t =new TimelineMax();

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

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

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

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

             t.to("#div1",2,{top:600});

             t.to("#div1",2,{rotationZ:180});

             t.to("#div1",2,{opacity:0});

             t.stop(); //停止动画

             $("#play").click(function(){

                 t.play();//播放动画

             });

             $("#stop").click(function(){

                 t.stop();//停止动画

             });

         });

     </script>

 </head>

 <body>

 <input type="button" id="play" value="播放"/>

 <input type="button" id="stop" value="停止"/>

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

 </body>

 </html>

反向执行动画

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

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>TweenMax动画库学习(一)</title>

     <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>

     <script>

         //        reverse()：反向开始动画

         $(function(){

             var t =new TimelineMax();

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

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

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

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

             t.to("#div1",2,{top:600});

             t.to("#div1",2,{rotationZ:180});

             t.to("#div1",2,{opacity:0});

             t.stop(); //停止动画

             $("#play").click(function(){

                 t.play();//播放动画

             });

             $("#stop").click(function(){

                 t.stop();//停止动画

             });

             $("#reverse").click(function(){

                 t.reverse();//反向执行动画

             });

         });

     </script>

 </head>

 <body>

 <input type="button" id="play" value="播放"/>

 <input type="button" id="stop" value="停止"/>

 <input type="button" id="reverse" value="反向动画"/>

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

 </body>

 </html>

onComplete()：运动结束后触发对应的函数

onReverseComplete()：反向运动结束后触发对应的函数

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>TweenMax动画库学习(一)</title>

     <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>

     <script>

 //        stop()：停止动画

 //        play()：开始动画

 //        reverse()：反向开始动画

 //        onComplete()：运动结束后触发对应的函数

 //        onReverseComplete()：反向运动结束后触发对应的函数

         $(function(){

             var t =new TimelineMax();

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

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

                 alert("left:300");

             },onReverseComplete(){

                 alert("left:0");

             }},1);

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

                 alert("width:300")

             },onReverseComplete(){

                 alert("width:100");

             }},"+=1");

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

             t.to("#div1",2,{top:600});

             t.to("#div1",2,{rotationZ:180});

             t.to("#div1",2,{opacity:0});

             t.stop(); //停止动画

             $("#play").click(function(){

                 t.play();//播放动画

             });

             $("#stop").click(function(){

                 t.stop();//停止动画

             });

             $("#reverse").click(function(){

                 t.reverse();//反向执行动画

             });

         });

     </script>

 </head>

 <body>

 <input type="button" id="play" value="播放"/>

 <input type="button" id="stop" value="停止"/>

 <input type="button" id="reverse" value="反向动画"/>

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

 </body>

 </html>

动画演示：

代码打包下载：

链接: http://pan.baidu.com/s/1nvaoe5V 密码: gm7y