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 { width: 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, width: 300 });
</script>執行隊列動畫,列表中的動畫會依次執行
<script>
t.to("#div1", 1, { left: 300 });
t.to("#div1", 1, { width: 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, width: 300 }, 1);
//第二條動畫沒有延遲時間,所以等第一條動畫執行完成後立刻執行第二條動畫
t.to("#div1", 1, { width: 300 });
</script><script>
//動畫延遲一秒執行
t.to("#div1", 1, { left: 300, width: 300 }, 1);
//第二條動畫也是延遲一秒執行,會和第一條動畫同時延遲一毛執行
t.to("#div1", 1, { width: 300 }, 1);
</script>延遲執行第二條動畫
<script>
//動畫延遲一秒執行
t.to("#div1", 1, { left: 300, width: 300 }, 1);
//實現第一條動畫完成後,延遲一秒,執行第二條動畫
t.to("#div1", 1, { width: 300 }, 3);
</script>延遲執行第二條動畫(便捷寫法)
<script>
//動畫延遲一秒執行
t.to("#div1", 1, { left: 300, width: 300 }, 1);
t.to("#div1", 1, { width: 300 }, "+=1");
</script>讓第二條動畫指令立刻執行
<script>
//動畫延遲一秒執行
t.to("#div1", 1, { left: 300, width: 300 }, 1);
//第四個參數設0後,動畫會立刻執行
t.to("#div1", 1, { width: 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 { width: 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, width: 300 });
t.to("#div1", 1, { width: 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 { width: 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, width: 300 });
t.to("#div1", 1, { width: 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>