（转）TweenMax动画库学习（三）
上一节我们主要聊了TweenMax动画库中的add()添加状态、tweenTo()完成指定的动画（过渡）等方法的使用，接下来我们继续学习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、seek()---完成指定的动画（无过渡）
参数说明：
1. 指定时间或状态
2. 【可选】布尔值
true：不执行函数 默认
false: 执行函数
seek(时间)
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.seek(2);//直接运动到设置的时间点，后面的运动会接着运动
8 });
9 <script>
seek("状态")
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.seek("state2");//直接运动到设置的状态，后面的运动会接着运动
11 });
12 </script>
seek("状态",false)
1 <script>
2 $(function(){
3 var t =new TimelineMax();
4 t.to("#div1",2,{left:300,onComplete:function(){
5 alert("left:300");
6 }});//标记一
7 t.add("state1");
8 t.to("#div1",2,{width:300,onComplete:function(){
9 alert("width:300");
10 }});
11 t.add("state2");
12 t.to("#div1",2,{height:300});
13 t.add("state3");
14 t.seek("state1",false);//直接运动到设置的状态，但会执行【标记一】中的函数，后面的运动会接着运动
15 </script>
3、time() 动画已执行的时间
参数说明：
1 动画已执行的时间
1 <script>
2 $(function(){
3 var t =new TimelineMax();
4 t.to("#div1",2,{left:300,onComplete:function(){
5 alert("left:300");
6 }});
7 t.add("state1");
8 t.to("#div1",2,{width:300,onComplete:function(){
9 alert("width:300");
10 }});
11 t.add("state2");
12 t.to("#div1",2,{height:300});
13 t.add("state3");
14 t.seek("state3",false);
15 console.log(t.time()); //6 //动画已执行的时间
16 });
17 </script>
4、clear()：清除所有动画
参数说明：
1 清除所有动画
1 <script>
2 $(function(){
3 var t =new TimelineMax();
4 t.to("#div1",2,{left:300,onComplete:function(){
5 alert("left:300");
6 }});
7 t.add("state1");
8 t.to("#div1",2,{width:300,onComplete:function(){
9 alert("width:300");
10 }});
11 t.add("state2");
12 t.clear(); //清除state2之前的所有动画，后面的动画依然继续执行
13 t.to("#div1",2,{height:300});
14 t.add("state3");
15 });
16 </script>
seek()、time()、clear()综合使用
1 <script>
2 // seek()：完成指定的动画（无过渡）
3 // 参数说明：
4 // 1. 指定时间或状态
5 // 2. 【可选】布尔值
6 // true：不执行函数 默认
7 // false: 执行函数
8 // time()：动画已执行的时间
9 // clear()：清除所有动画
10 $(function(){
11 var t =new TimelineMax();
12 t.to("#div1",2,{left:300,onComplete:function(){
13 alert("left:300");
14 }});
15 t.add("state1");
16 t.to("#div1",2,{width:300,onComplete:function(){
17 alert("width:300");
18 }});
19 t.add("state2");
20 // t.clear(); //清除所有动画
21 t.to("#div1",2,{height:300});
22 t.add("state3");
23 // t.stop();
24 t.seek("state3",false);
25 console.log(t.time()); //6 //动画已执行的时间
26 });
27 </script>
动画演示：
