目录
上一节我们主要聊了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>
<body>
<div id="div1"></div>
</body>
2、add()---添加状态
参数说明：
字符串或一个函数
add("字符串")
<script>
$(function(){
var t =new TimelineMax();
t.to("#div1",2,{left:300});
t.add("state1");
t.to("#div1",2,{width:300});
t.add("state2");
t.to("#div1",2,{height:300});
t.add("state3");
});
</script>
add(函数)
<script>
$(function(){
var t =new TimelineMax();
t.to("#div1",2,{left:300});
t.add(function(){
$("#div1").css("background","blue");
});
t.to("#div1",2,{width:300});
t.to("#div1",2,{height:300});
});
</script>
2、TweenTo---完成指定的动画（过渡）
参数说明：
指定时间或状态的字符串
TweenTo（时间）
<script>
$(function(){
var t =new TimelineMax();
t.to("#div1",2,{left:300});
t.to("#div1",2,{width:300});
t.to("#div1",2,{height:300});
t.stop();
t.tweenTo(1.5);//完成指定的动画（过渡）
});
</script>
TweenTo（"字符串"）
<script>
$(function(){
var t =new TimelineMax();
t.to("#div1",2,{left:300});
t.add("state1");//添加状态
t.to("#div1",2,{width:300});
t.add("state2");
t.to("#div1",2,{height:300});
t.add("state3");
t.stop();
t.tweenTo("state2"); //完成指定的动画（过渡）
});
</script>
add()与tweenTo()综合使用
<!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>
// add---添加状态
// 参数说明：
// 1. 字符串或一个函数
// TweenTo---完成指定的动画（过渡）
// 参数说明：
// 1. 指定时间或状态的字符串
$(function(){
var t =new TimelineMax();
t.to("#div1",2,{left:300});
t.add("state1");//添加状态
t.add(function(){
$("#div1").css("background","blue");
});
t.to("#div1",2,{width:300});
t.add("state2");
t.to("#div1",2,{height:300});
t.add("state3");
t.stop();
t.tweenTo("state2"); //完成指定的动画（过渡）
// t.tweenTo(1.5);
});
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
动画演示：
代码打包下载：
链接: http://pan.baidu.com/s/1dFrzxy5 密码: g9ww