目录
上一节我们主要聊了TweenMax动画库中的add()添加状态、tweenTo()完成指定的动画（过渡）等方法的使用，接下来我们继续学习TweenMax动画库中的其它方法的使用。
TweenMax动画库的官方网址: http://greensock.com/timelinemax
下面我们直奔主题，开始介绍TweenMax动画库中的其它方法的使用：
1、页面布局
1 <script src="./../js/jquery-2.1.4.min.js"></script> 2 <script src="./../js/TweenMax.js"></script> 3 <style> 4 html,body{ 5 margin: 0; 6 padding: 0; 7 } 8 .div1{ 9 width:100px; 10 height:100px; 11 background: #8D121A; 12 position: absolute; 13 top:150px; 14 left:0; 15 } 16 </style>
1 <body> 2 <div id="label"></div> 3 <div class="div1"></div> 4 </body>
2、currentLabel()：获取当前状态
参数说明：
1 返回值是状态的字符串
currentLabel()
1 <script> 2 $(function(){ 3 var t =new TimelineMax(); 4 t.add("state1"); 5 t.to(".div1",1,{left:300,onComplete:function(){ 6 getCurrentLabel(); 7 }},1); 8 t.add("state2"); 9 t.to(".div1",1,{300,onComplete:function(){ 10 getCurrentLabel(); 11 }},"+=1"); 12 t.add("state3"); 13 t.to(".div1",1,{height:300,onComplete:function(){ 14 getCurrentLabel(); 15 }}); 16 getCurrentLabel(); 17 //获取当前状态 18 function getCurrentLabel(){ 19 console.log(t.currentLabel()); //控制台打印输出当前动画运动到的状态 20 } 21 }); 22 </script>
3、getLabelAfter()：获取下一个状态
参数说明：
1. 时间数字
返回值是状态的字符串，如果没有下一个状态返回null
getLabelBefore()：获取上一个状态
参数说明：
1. 时间数字
返回值是状态的字符串，如果没有上一个状态返回null
1 <script> 2 $(function(){ 3 var t =new TimelineMax(); 4 t.add("state1"); 5 t.to(".div1",1,{left:300,onComplete:function(){ 6 getCurrentLabel(); 7 }},1); 8 t.add("state2"); 9 t.to(".div1",1,{300,onComplete:function(){ 10 getCurrentLabel(); 11 }},"+=1"); 12 t.add("state3"); 13 t.to(".div1",1,{height:300,onComplete:function(){ 14 getCurrentLabel(); 15 }}); 16 getCurrentLabel(); 17 //获取当前状态 18 function getCurrentLabel(){ 19 //获取当前的时间 20 var currentTime = t.getLabelTime( t.currentLabel() ); 21 //获取到上一个状态 22 var beforeLabel = t.getLabelBefore( currentTime ); 23 //获取到下一个状态 24 var afterLabel = t.getLabelAfter( currentTime ); 25 var str = "<p>上一个状态:"+ beforeLabel +"</p><p>当前状态:"+ t.currentLabel() +"</p><p>下一个状态:"+ afterLabel +"</p>"; 26 $("#label").html( str ); 27 } 28 }); 29 </script>
动画演示：
代码打包下载：
链接: http://pan.baidu.com/s/1eSz4Xz0 密码: wgw3