目录
上一节我们主要聊了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;
top:150px;
left:0;
}
</style>
<body>
<div id="label"></div>
<div class="div1"></div>
</body>
2、currentLabel()：获取当前状态
参数说明：
返回值是状态的字符串
currentLabel()
<script>
$(function(){
var t =new TimelineMax();
t.add("state1");
t.to(".div1",1,{left:300,onComplete:function(){
getCurrentLabel();
}},1);
t.add("state2");
t.to(".div1",1,{width:300,onComplete:function(){
getCurrentLabel();
}},"+=1");
t.add("state3");
t.to(".div1",1,{height:300,onComplete:function(){
getCurrentLabel();
}});
getCurrentLabel();
//获取当前状态
function getCurrentLabel(){
console.log(t.currentLabel()); //控制台打印输出当前动画运动到的状态
}
});
</script>
3、getLabelAfter()：获取下一个状态
参数说明：
1. 时间数字
返回值是状态的字符串，如果没有下一个状态返回null
getLabelBefore()：获取上一个状态
参数说明：
1. 时间数字
返回值是状态的字符串，如果没有上一个状态返回null
<script>
$(function(){
var t =new TimelineMax();
t.add("state1");
t.to(".div1",1,{left:300,onComplete:function(){
getCurrentLabel();
}},1);
t.add("state2");
t.to(".div1",1,{width:300,onComplete:function(){
getCurrentLabel();
}},"+=1");
t.add("state3");
t.to(".div1",1,{height:300,onComplete:function(){
getCurrentLabel();
}});
getCurrentLabel();
//获取当前状态
function getCurrentLabel(){
//获取当前的时间
var currentTime = t.getLabelTime( t.currentLabel() );
//获取到上一个状态
var beforeLabel = t.getLabelBefore( currentTime );
//获取到下一个状态
var afterLabel = t.getLabelAfter( currentTime );
var str = "<p>上一个状态:"+ beforeLabel +"</p><p>当前状态:"+ t.currentLabel() +"</p><p>下一个状态:"+ afterLabel +"</p>";
$("#label").html( str );
}
});
</script>
动画演示：
代码打包下载：
链接: http://pan.baidu.com/s/1eSz4Xz0 密码: wgw3