（转）TweenMax动画库学习（二）
上一节我们主要聊了TweenMax动画库中的to()：添加动画、play()播放动画、stop()停止动画、reverse()反向执行动画、onComplete()：运动结束后触发对应的函数、 onReverseComplete()：反向运动结束后触发对应的函数等方法的使用，接下来我们继续学习TweenMax动画库中的其它方法的使用。
TweenMax动画库的官方网址: http://greensock.com/timelinemax
下面我们直奔主题，开始介绍TweenMax动画库中的其它方法的使用：
1、页面布局
<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>
1 <body> 2 <div id="div1"></div> 3 </body>
2、add()---添加状态
参数说明：
1 字符串或一个函数
add("字符串")
1 <script>
2 $(function(){
3 var t =new TimelineMax();
4 t.to("#div1",2,{left:300});
5 t.add("state1");
6 t.to("#div1",2,{width:300});
7 t.add("state2");
8 t.to("#div1",2,{height:300});
9 t.add("state3");
10 });
11 </script>
add(函数)
1 <script>
2 $(function(){
3 var t =new TimelineMax();
4 t.to("#div1",2,{left:300});
5 t.add(function(){
6 $("#div1").css("background","blue");
7 });
8 t.to("#div1",2,{width:300});
9 t.to("#div1",2,{height:300});
10 });
11 </script>
2、TweenTo---完成指定的动画（过渡）
参数说明：
1 指定时间或状态的字符串
TweenTo（时间）
1 <script>
2 $(function(){
3 var t =new TimelineMax();
4 t.to("#div1",2,{left:300});
5 t.to("#div1",2,{width:300});
6 t.to("#div1",2,{height:300});
7 t.stop();
8 t.tweenTo(1.5);//完成指定的动画（过渡）
9 });
10 </script>
TweenTo（"字符串"）
1 <script>
2 $(function(){
3 var t =new TimelineMax();
4 t.to("#div1",2,{left:300});
5 t.add("state1");//添加状态
6 t.to("#div1",2,{width:300});
7 t.add("state2");
8 t.to("#div1",2,{height:300});
9 t.add("state3");
10 t.stop();
11 t.tweenTo("state2"); //完成指定的动画（过渡）
12 });
13 </script>
add()与tweenTo()综合使用
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 // add---添加状态
24 // 参数说明：
25 // 1. 字符串或一个函数
26 // TweenTo---完成指定的动画（过渡）
27 // 参数说明：
28 // 1. 指定时间或状态的字符串
29 $(function(){
30 var t =new TimelineMax();
31 t.to("#div1",2,{left:300});
32 t.add("state1");//添加状态
33 t.add(function(){
34 $("#div1").css("background","blue");
35 });
36 t.to("#div1",2,{width:300});
37 t.add("state2");
38 t.to("#div1",2,{height:300});
39 t.add("state3");
40 t.stop();
41 t.tweenTo("state2"); //完成指定的动画（过渡）
42 // t.tweenTo(1.5);
43 });
44 </script>
45 </head>
46 <body>
47 <div id="div1"></div>
48 </body>
49 </html>
动画演示：
