之前在做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>

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

<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()方法让动画反向执行

 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

posted @ 2016-06-03 01:02 小旭的blog 阅读(13955) 评论(2) 编辑收藏举报

刷新页面返回顶部

小旭的博客

记录技术成长的点点滴滴~~

TweenMax动画库学习(一)

动画的停止与播放

反向执行动画

公告