TweenMax 建立在TweenLite 核心类以及它的大哥TweenFilterLite 基础之上，它为Tween 家族增加了新的受欢迎的功能（尽管只是锦上添花），从而使家族更加的壮大，比如贝赛尔缓动、暂停/继续能力，简便的连续缓、16进制颜色缓动、以及更多的内容。
直接开始!!!
得到动画的实例 new
TweenMax提供了TimelineMax()方法用来得到实例
TweenMax依赖jQuery
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/uncompressed/TweenMax.js"></script>
<script>
$(function () {
var t = new TimelineMax();
});
</script>
添加动画 to()
to()方法参数说明
1. 元素选择器或对象
2. 持续时间
3. 对象
4. 【可选】动画延迟发生时间可写数字,"-=0.5","+=0.5"
页面中插入一个div
<style>
#div1 { 100px; height: 100px; background: red; position: absolute; left: 0; top: 0; }
</style>
<body>
<div id="div1"></div>
</body>
执行单条动画
<script>
t.to("#div1", 1, { left: 300 });
</script>
执行组合动画
<script>
t.to("#div1", 1, { left: 300, 300 });
</script>
执行队列动画,列表中的动画会依次执行
<script>
t.to("#div1", 1, { left: 300 });
t.to("#div1", 1, { 300 });
t.to("#div1", 1, { height: 300 });
t.to("#div1", 1, { top: 300 });
t.to("#div1", 1, { rotationZ: 180 });
t.to("#div1", 1, { opacity: 0 });
</script>
通过这样的动画队列,代码比以前利用回调函数来写要清晰很多
添加第四个参数 设置动画的延迟时间
<script>
//动画延迟一秒执行
t.to("#div1", 1, { left: 300, 300 }, 1);
//第二条动画没有延迟时间,所以等第一条动画执行完成后立刻执行第二条动画
t.to("#div1", 1, { 300 });
</script>
<script>
//动画延迟一秒执行
t.to("#div1", 1, { left: 300, 300 }, 1);
//第二条动画也是延迟一秒执行,会和第一条动画同时延迟一毛执行
t.to("#div1", 1, { 300 }, 1);
</script>
延迟执行第二条动画
<script>
//动画延迟一秒执行
t.to("#div1", 1, { left: 300, 300 }, 1);
//实现第一条动画完成后,延迟一秒,执行第二条动画
t.to("#div1", 1, { 300 }, 3);
</script>
延迟执行第二条动画(便捷写法)
<script>
//动画延迟一秒执行
t.to("#div1", 1, { left: 300, 300 }, 1);
t.to("#div1", 1, { 300 }, "+=1");
</script>
让第二条动画指令立刻执行
<script>
//动画延迟一秒执行
t.to("#div1", 1, { left: 300, 300 }, 1);
//第四个参数设0后,动画会立刻执行
t.to("#div1", 1, { 300 }, 0);
</script>
动画的停止与播放
通过play()方法与stop()方法来控制
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
#div1 { 100px; height: 100px; background: red; position: absolute; left: 0; top: 50px; }
</style>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/uncompressed/TweenMax.js"></script>
<script>
$(function () {
//得到对象
var t = new TimelineMax();
//队列动画
t.to("#div1", 1, { left: 300, 300 });
t.to("#div1", 1, { 300 });
t.to("#div1", 1, { height: 300 });
t.to("#div1", 1, { top: 300 });
t.to("#div1", 1, { rotationZ: 180 });
t.to("#div1", 1, { opacity: 0 });
//先把动画停止
t.stop();
//播放动画按钮
$("#play").click(function () {
t.play();
});
//停止动画按钮
$("#stop").click(function () {
t.stop();
});
});
</script>
</head>
<body>
<input type="button" id="play" value="播放" />
<input type="button" id="stop" value="停止" />
<div id="div1"></div>
</body>
</html>
反向执行动画
通过reverse()方法让动画反向执行
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
#div1 { 100px; height: 100px; background: red; position: absolute; left: 0; top: 50px; }
</style>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/uncompressed/TweenMax.js"></script>
<script>
$(function () {
//得到对象
var t = new TimelineMax();
//队列动画
t.to("#div1", 1, { left: 300, 300 });
t.to("#div1", 1, { 300 });
t.to("#div1", 1, { height: 300 });
t.to("#div1", 1, { top: 300 });
t.to("#div1", 1, { rotationZ: 180 });
t.to("#div1", 1, { opacity: 0 });
//反向播放按钮
$("#reverse").click(function () {
t.reverse();
});
});
</script>
</head>
<body>
<input type="button" id="reverse" value="反向播放" />
<div id="div1"></div>
</body>
</html>