TweenMax的介紹
- 一般情況下我們使用jquery必須使用animate,然后后面接回調函數才能操作動畫。
- 它最大的弊端就是操作不了時間。不方便。比如我就想要運動過程中在第三秒輸出一句話，他很難實現.
- 所以這個時候TweenMax誕生了。他完美的解決了這個問題
- TweenMax在使用的時候他必須要首先調用jquery 否則他實現不了
TweenMax使用介紹
- 在使用之前無論如何都必須要創建一個對象,所有的方法都是圍繞這個對象進行
var move = new TimelineMax(); //創建對象
- move.to(argument1,argument2,argument3,argument4)
- to方法就是綁定動畫效果,他一共接受4個參數
- 第一個參數: 元素名稱例如 "#nav"表示綁定的是id是nav的元素
- 第二個參數: 動畫的時間 表示 執行一個動畫要多久
- 第三個參數: 表示要改變的屬性。注意他只能是對象,并且值里面不加單位
- 例如{"left":300,"width":200}
- 這里要特別注意的就是onComplete:function(){}表示的是動畫完成后要執行的方法
- onReverseComplete:function(){} //表示動畫反轉完成后要執行的方法
- ease:Bounce.easeIn, //表示運動的形式。(了解就好)
- 完整版本的:
t.to("#div1",1,{ease:Bounce.easeIn,left:300,width:300,onComplete:function(){console.log("第一個動畫正序結束")},onReverseComplete:function(){console.log("第一個動畫倒序結束")}},1); - 第四個參數:表示的就是延遲時間 表示等待的時間
- 一般情況下他后面接受的是數字，但是你要是想每個動畫都需要延遲的話只有 "+=1"或者"-=1"
- 這里特別注意的就是""引號千萬不能少
- 1表示的就是1S 你要是想500MS可以用 0.5s
- 動畫效果見下邊
動畫效果.gif
對應的代碼
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>TweenMax</title>
<script src="js/jquery.min.js"></script>
<script src="js/TweenMax.js"></script>
</head>
<style>
*{margin:0px;padding:0px;}
#div1{width:100px;height:100px;background:red;position:absolute;left:0px;top:0px;}
input{margin-top:100px;}
</style>
<body>
<div id="div1"></div>
</body>
<script>
$(function(){
//首先第一步必須要new一個對象
var t = new TimelineMax();
//t.stop(); //這樣一上來就阻止運行了。只有點擊播放按鈕才運行。他肯定封裝了exit()方法
//利用to方法綁定動畫事件
//4個參數 第一個參數 元素 ,第二個參數時間,第三個參數改變的屬性，必須是個對象,第四個動畫延遲的時間 : 除了第一個可以寫數組，剩下的要是想延遲就用"+=1" "-=1"必須加""
//第三個參數里面還能封裝個方法:onComplete() 運動結束后觸發對應的函數
//第三個參數里面封裝的方法:onReverseComplete();反向運動結束后觸發的函數
//第三個參數里面還能用ease方法。獲取到運動的表現形式。(了解就好)
t.to("#div1",1,{ease:Bounce.easeIn,left:300,width:300,onComplete:function(){console.log("第一個動畫正序結束")},onReverseComplete:function(){console.log("第一個動畫倒序結束")}},1); //同時變化
t.to("#div1",2,{left:500},"+=1"); //不加單位，自己變化
t.to("#div1",2,{rotationX:180}); //旋轉這里封裝的是rotation,自己變化
t.to("#div1",2,{opacity:0}); //還能修改濾鏡,自己變化
t.to("#div1",2,{background:"blue"});
})
</script>
</html>
to方法就到這了
播放與停止與反轉
- move.play();表示動畫的播放
- move.stop(); 表示動畫的停止,一上來用一次這樣動畫不會自己播放
- move.reverse(); //表示動畫的反轉。意思就是從后向前執行
- 效果圖如下:
運動效果1.gif
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>TweenMax</title>
<script src="js/jquery.min.js"></script>
<script src="js/TweenMax.js"></script>
</head>
<style>
*{margin:0px;padding:0px;}
#div1{width:100px;height:100px;background:red;position:absolute;left:0px;top:0px;}
input{margin-top:100px;}
</style>
<body>
<div id="div1"></div>
<input type="button" value="播放" id="play">
<input type="button" value="停止" id="pause">
<input type="button" value="反向" id="reverse">
</body>
<script>
$(function(){
//首先第一步必須要new一個對象
var t = new TimelineMax();
t.stop(); //這樣一上來就阻止運行了。只有點擊播放按鈕才運行。他肯定封裝了exit()方法
//利用to方法綁定動畫事件
//4個參數 第一個參數 元素 ,第二個參數時間,第三個參數改變的屬性，必須是個對象,第四個動畫延遲的時間 : 除了第一個可以寫數組，剩下的要是想延遲就用"+=1" "-=1"必須加""
//第三個參數里面還能封裝個方法:onComplete() 運動結束后觸發對應的函數
//第三個參數里面封裝的方法:onReverseComplete();反向運動結束后觸發的函數
//第三個參數里面還能用ease方法。獲取到運動的表現形式。(了解就好)
t.to("#div1",1,{ease:Bounce.easeIn,left:300,width:300,onComplete:function(){console.log("第一個動畫正序結束")},onReverseComplete:function(){console.log("第一個動畫倒序結束")}},1); //同時變化
t.to("#div1",2,{left:500},"+=1"); //不加單位，自己變化
t.to("#div1",2,{rotationX:180}); //旋轉這里封裝的是rotation,自己變化
t.to("#div1",2,{opacity:0}); //還能修改濾鏡,自己變化
t.to("#div1",2,{background:"blue"});
$("#play").click(function(){
t.play(); //播放按鈕
})
$("#pause").click(function(){
t.stop(); //暫停按鈕
})
$("#reverse").click(function(){
t.reverse(); //反向動畫
})
})
</script>
</html>
插入狀態和狀態查詢
- move.add(arguments1) //參數可以是字符串,也可以是要執行的函數。。不過一般都是字符串.
- move.tweenTo(arguments1) //參數可以使字符串。也可以是時間
- move.seek(argument1) //等價于 tweenTo,只不過沒有過渡了，直接切斷.
- move.clear(); //清除所有的動畫
- move.time(); //獲取到時間
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>TweenMax</title>
<script src="js/jquery.min.js"></script>
<script src="js/TweenMax.js"></script>
</head>
<style>
*{margin:0px;padding:0px;}
#div1{width:100px;height:100px;background:red;position:absolute;left:0px;top:0px;}
</style>
<body>
<div id="div1"></div>
</body>
<script>
$(function(){
var t = new TimelineMax();
/*
add 表示增加個狀態值。表示間隔的意思,參數可以是字符串也可以是函數主要還是狀態
tweenTo 表示運動到指定的狀態值或者時間，后續不執行
seek 作用和tewwnTo一樣但是他沒有過度效果，直接跳轉了最終了
clear 清除所有動畫
*/
t.stop();
t.add("狀態一開始");
t.to("#div1",1,{left:300});
t.add(function(){
$("#div1").css({"background":"blue"})
});
t.add("狀態二開始");
t.to("#div1",2,{width:300});
t.add("狀態三開始");
t.to("#div1",3,{height:300});
t.clear();
t.tweenTo("狀態二開始"); //停止在間隔
t.tweenTo(3); //表示停止在3秒
t.seek("狀態二開始"); //這個就表示沒有過度的效果，他會直接跳轉到狀態二的效果
})
</script>
</html>
狀態查詢
- move.getLabelTime(arguments1) //獲取到從開始到當前狀態的時間,參數就是一個狀態,返回值就是時間
- move.getLabelBefore(arguments) //獲取上一個狀態，傳遞的是一個時間數字，返回值是狀態的字符串，如果沒有則返回下一個狀態返回null
- move.getLabelAfter(arguments)//同上只不過獲取到的是下一個狀態
- move.currentLabel():獲取當前狀態 返回值是狀態的字符串
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>TweenMax</title>
<script src="js/jquery.min.js"></script>
<script src="js/TweenMax.js"></script>
</head>
<style>
*{margin:0px;padding:0px;}
#div1{width:100px;height:100px;background:red;position:absolute;left:0px;top:0px;}
</style>
<body>
<div id="div1"></div>
</body>
<script>
/*
t.getLabelTime() 返回從開始到當前狀態的時間 能傳遞一個參數就是狀態的字符串。返回值是一個數字
t.currentLabel():獲取當前狀態 返回值是狀態的字符串
t.getLabelAfter():獲取下一個狀態傳遞的是一個時間數字，返回值是狀態的字符串，如果沒有則返回下一個狀態返回null
t.getLabelBefore():同上
*/
$(function(){
var t = new TimelineMax();
t.add("當前狀態一");
t.to("#div1",1,{"width":300,onComplete:getCurrentTime},1);
t.add("當前狀態二");
t.to("#div1",2,{"left":300,onComplete:getCurrentTime},"+=1");
t.add("當前狀態三");
t.to("#div1",3,{"height":500,onComplete:getCurrentTime},"+=1");
t.add("當前狀態四");
t.to("#div1",3,{"background":"blue"});
console.log(t.totalDuration());
console.log(t.getLabelTime("當前狀態四"));
console.log(t.currentLabel());
function getCurrentLabel(){
console.log(t.currentLabel());
}
function getCurrentTime(){
var time = t.getLabelTime(t.currentLabel());
console.log(t.getLabelBefore(time));
}
})
</script>
</html>
動畫的時間
- move.time() //每一幀動畫的時間
- move.totalDuration() //獲取動畫的時長
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>TweenMax</title>
<script src="js/jquery.min.js"></script>
<script src="js/TweenMax.js"></script>
</head>
<style>
*{margin:0px;padding:0px;}
#div1{width:100px;height:100px;background:red;position:absolute;left:0px;top:0px;}
</style>
<body>
<div id="div1"></div>
</body>
<script>
$(function(){
var t = new TimelineMax;
/*
t.time 表示動畫執行的時間
t.totalDuration 表示獲取動畫總共的時間
*/
t.stop();
t.add("狀態一開始");
t.to("#div1",1,{left:300});
t.add(function(){
$("#div1").css({"background":"blue"})
});
t.add("狀態二開始");
t.to("#div1",2,{width:300});
t.add("狀態三開始");
t.to("#div1",3,{height:300});
t.clear();
t.tweenTo("狀態二開始"); //停止在間隔
t.tweenTo(3); //表示停止在3秒
t.seek("狀態二開始"); //這個就表示沒有過度的效果，他會直接跳轉到狀態二的效果
setInterval(function(){
console.log(t.time())
},16)
console.log(t.totalDuration());
})
</script>
</html>
