你的位置:首页 > Java教程

[Java教程]TweenMax动画库学习(一)


目录:

           TweenMax动画库学习(一)

      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>