和其它的庫類似,tweenmax動畫庫也依賴於jquery庫,以上兩個檔案都放在了github上:
src="js/jquery.min.js">
script>
src="js/tweenmax.js">
script>
$(function
() );
// tweenmax.to()是最常用的方法,它允許你定義物件的各個目標值
t.to("元素選擇器或物件",持續時間,物件(描述運動的方向引數等),(可選)動畫延遲發生時間可寫數字,"-=0.5","+=0.5")
/* 1. 傳入乙個元素選擇器或物件
2. 設定動畫的持續時間
3. 物件
4. (可選)動畫延遲發生時間
可寫數字,「-=0.5」,「+=0.5「
*/
id="div1">
div>
body>
html,body
#div1
style>
$(function
());
});script>
$(function
());
});script>
$(function
());
t.to("#div1", 1, );
t.to("#div1", 1, );
t.to("#div1", 1, );
t.to("#div1", 1, );
t.to("#div1", 1, );
});script>
$(function
(), 1); //第乙個動畫延遲1s後執行
t.to("#div1", 1, ); //第二個動畫沒有新增延遲,因此輪到它的時候立即執行
});script>
$(function
(), 1); //第乙個動畫延遲1s後執行
t.to("#div1", 1, , 1); //第二條動畫也是延遲一秒執行,會和第一條動畫同時延遲一秒執行
});script>
延遲執行第二個動畫
$(function
(), 1); //第乙個動畫延遲1s後執行
t.to("#div1", 1, , 3); //實現第一條動畫完成後,延遲一秒,執行第二條動畫
});script>
lang="en">
charset="utf-8">
titletitle>
html,body
#div1
style>
head>
type="button"
id="play"
type="button"
id="stop"
value="停止">
type="button"
id="reverse"
id="div1">
div>
src="js/jquery-2.1.4.min.js">
script>
src="js/tweenmax.js">
script>
$(function
() , 1);
t.to("#div1", 2, , "+=1");
t.to("#div1", 2, , "+=1");
t.to("#div1", 2, );
t.to("#div1", 2, );
t.to("#div1", 2, );
t.stop();
$("#play").click(function
() );
$("#stop").click(function
() );
});script>
body>
html>
lang="en">
charset="utf-8">
titletitle>
html,body
#div1
style>
head>
type="button"
id="play"
type="button"
id="stop"
value="停止">
type="button"
id="reverse"
id="div1">
div>
src="js/jquery-2.1.4.min.js">
script>
src="js/tweenmax.js">
script>
$(function
() , 1);
t.to("#div1", 2, , "+=1");
t.to("#div1", 2, , "+=1");
t.to("#div1", 2, );
t.to("#div1", 2, );
t.to("#div1", 2, );
t.stop();
$("#play").click(function
() );
$("#stop").click(function
() );
//通過reverse()方法讓動畫反向執行
$("#reverse").click(function
() );
});script>
body>
html>
lang="en">
charset="utf-8">
titletitle>
html,body
#div1
style>
head>
type="button"
id="play"
type="button"
id="stop"
value="停止">
type="button"
id="reverse"
id="div1">
div>
src="js/jquery-2.1.4.min.js">
script>
src="js/tweenmax.js">
script>
$(function
() ,onreversecomplete:function
() }, 1);
t.to("#div1", 2, , "+=1");
t.to("#div1", 2, , "+=1");
t.to("#div1", 2, );
t.to("#div1", 2, );
t.to("#div1", 2, );
t.stop();
$("#play").click(function
() );
$("#stop").click(function
() );
//通過reverse()方法讓動畫反向執行
$("#reverse").click(function
() );
//oncomplete():運動結束後觸發的函式
//onreversecomplete():反向運動結束後觸發的函式
//對應補充如上:
});script>
body>
html>
TweenMax學習整理 特有屬性
建構函式 tweenmax target object,duration number,vars object target object 需要緩動的物件 duration number 緩動持續時間 vars object 其它引數 特有屬性29個,外掛程式17個,公共屬性10個,公共方法20個 ...
TweenMax動畫庫學習 四
目錄 tweenmax動畫庫學習 一 tweenmax動畫庫學習 二 tweenmax動畫庫學習 三 tweenmax動畫庫學習 四 tweenmax動畫庫學習 五 tweenmax動畫庫學習 六 上一節我們主要聊了tweenmax動畫庫中的seek 完成指定的動畫 無過渡 time 動畫已執行的時...
學習總結一
有乙個3 3方格,每個位置只能填寫1 9,不能重複填寫,要求 橫向相加 豎向相加 斜向相加的值相等。在想這道題的過程中,我一開始在想不通過隨機置換數字來通過做出這道題,我通過一維陣列來做這道題,我想的是一開始就擺好123456789這些數字,然後通過交換數字來找到目標陣列,我剛開始在想的時候沒想出這...