TweenMax動畫庫學習 四

2022-06-21 18:42:08 字數 3426 閱讀 6927

目錄

tweenmax動畫庫學習(一)

tweenmax動畫庫學習(二)

tweenmax動畫庫學習(三)

tweenmax動畫庫學習(四)

tweenmax動畫庫學習(五)

tweenmax動畫庫學習(六)

上一節我們主要聊了tweenmax動畫庫中的seek()完成指定的動畫(無過渡)、time() 動畫已執行的時間、clear():清除所有動畫等方法的使用,接下來我們繼續學習tweenmax動畫庫中的其它方法的使用。     

tweenmax動畫庫的****:

下面我們直奔主題,開始介紹tweenmax動畫庫中的其它方法的使用:

1、staggerto():新增動畫

引數說明:

1. 元素選擇器或物件

2. 持續時間

3. 物件

變化的屬性->值

4. 【可選】動畫延遲發生時間

可寫數字,「-=0.5」,「+=0.5「

頁面布局

<

script

src="./../js/jquery-2.1.4.min.js"

>

script

>

<

script

src="./../js/tweenmax.js"

>

script

>

<

style

>

html,body

.box

style

>

1

<

body

>

2<

div

class

="box"

>

div>

3<

div

class

="box"

>

div>

4<

div

class

="box"

>

div>

5<

div

class

="box"

>

div>

6<

div

class

="box"

>

div>

7<

div

class

="box"

>

div>

8<

div

class

="box"

>

div>

9<

div

class

="box"

>

div>

10<

div

class

="box"

>

div>

11<

div

class

="box"

>

div>

12<

div

class

="box"

>

div>

13body

>

staggerto("元素選擇器或物件",持續時間,物件,動畫延遲發生時間);

1

<

script

>2$(

function

(),1);

5t.staggerto(

".box",

2,,1);

6//staggerto()與to()的區別在於在設定相同的延遲時間的情況下,7//

to()下的所有動畫會同時進行,而staggerto()下的動畫會乙個接著乙個依次執行

8});

9script

>

2、 totalduration():獲取動畫的總時長頁面布局

1

<

style

>

2html,body

6.div1

14style

>

1

<

body

>

2<

div

class

="div1"

>

div>

3body

>

totalduration()

1

<

script

>2$(

function

(),1);5

t.to(

".div1",

1,,"+=1");

6t.to(

".div1",

1,);

7console.log(t.totalduration());

//5 //獲取動畫的總時長

8});

9script

>

3、getlabeltime():返回從開始到當前狀態的時間引數說明:

1. 狀態的字串

返回值是乙個數字

getlabeltime(字串)

1
部分動畫演示:

pan.baidu.com/s/1slrgzvr 密碼: kg99

TweenMax學習總結(一)

和其它的庫類似,tweenmax動畫庫也依賴於jquery庫,以上兩個檔案都放在了github上 src js jquery.min.js script src js tweenmax.js script function tweenmax.to 是最常用的方法,它允許你定義物件的各個目標值 t.t...

TweenMax學習整理 特有屬性

建構函式 tweenmax target object,duration number,vars object target object 需要緩動的物件 duration number 緩動持續時間 vars object 其它引數 特有屬性29個,外掛程式17個,公共屬性10個,公共方法20個 ...

資料庫學習 四

語法 select 查詢列表 from 表名 where 篩選條件 order by 排序的字段或表示式 特點 select from employees order by salary desc 案例 查詢部門編號 90的員工資訊,並按員工編號降序 select from employees wh...