TweenMax學習總結(一)

2021-08-27 16:08:07 字數 3933 閱讀 2480

和其它的庫類似,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這些數字,然後通過交換數字來找到目標陣列,我剛開始在想的時候沒想出這...