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>
动画演示：
代码打包下载：
链接: http://pan.baidu.com/s/1nvaoe5V 密码: gm7y
