碼上歡樂
相關內容    簡體    繁體

TweenLite說明

本文轉載自   查看原文   2012-09-20 17:56   4596 
  • 效率(這也是作者所標榜的TWEENLITE2大優點之一，呵呵，“標榜”這個詞用得可能有點過了，不過人家確實有那個實力)這里有2者運行效率對比的例子：tweening-speed-test
  • onComplete, onStart, onUpdate 等回調方法是TWEEN所沒有的(TWEENLITE還可以往這些方法中傳遞任意個參數)
  • 智能的alpha(當alpha達到0時，TWEENLITE會自動將對象的visible設為false)
  • 在一次方法調用中就可以緩動多個屬性
  • 可以設置每一次緩動的延時(對有先后順序的緩動很有效)
  • 實現任何MovieClip/Sprite的變色效果非常簡單
  • 可以緩動MovieClip的聲音
  • 唯一的from()方法使你可以使用當前的屬性值作為緩動的目標值
  • 使用相關聯的值
  • 在一次方法調用中就可以緩動多個數組的值
  • TWEENLITE默認會自動地覆蓋同一個對象的緩動以免出現沖突(當然這個特性也是可以關閉的)
  • 強大的delayedCall()方法使你可以隨意設置延時和延時過后所調用的變量，甚至傳遞任意個數的參數
  • TWEENLITE有一個更加powerful的大哥”TweenFilterLite”，而TWEEN只在孤軍奮戰…當TWEENLITE有什么搞不定的時候，直接去找他大哥.

用法：
TweenLite.to(target:Object, duration:Number, variables:Object);
Description：將target對象的屬性從調用方法時的值緩動到variables中所指定的值
Parameters：

  • target:要緩動的對象(這里注意類型是Object,並不僅僅是MovieClip和Sprite)
  • duration:持續的時間(單位是秒)
  • variables: 一個Object,包含你想要緩動的所有屬性(在TweenLite.from()方法中，這些變量表示的則是開始緩動時的值)，如果你給某個屬性加引 號，它將關聯到當前的值。例如y:”xxx”,無論你引號里指定多少，它只會緩動到當前的值或者從當前的值開始緩動(在 TweenLite.from()方法中) 
//2者效果是一樣的(通常情況下是不需要加引號的
TweenLite.to(mc, 5, {x:"10", y:"20", ease:Elastic.easeOut});
TweenLite.to(mc, 5, {x:"20", y:"30", ease:Elastic.easeOut});

特殊屬性：

  • delay:Number-延時幾秒后開始緩動，這在有先后順序的緩動效果中很有用
  • ease:Function-應用在variables上的緩動函數，比如gs.easing.Elastic.easeOut。默認值是Regular.easeOut.當然你也可以應用CustomEase來定義自己的緩動函數(CustomEase屬於收費內容)
  • easeParam:Array-給緩動函數提供額外參數的數組。這在使用Elastic緩動函數時控制其他參數比圖振幅和周期會非常有用(ADOBE官 方文檔中，Elastic.easeXX()方法是可以有6個參數的，但是在TweenLite中只提供4個參數，那么另外2個參數：周期和振幅就可以在 這個數組中給定)。大部分的緩動函數是只有4個參數的，所以通常情況下是不需要傳入easeParams參數的。
  • autoAlpha:Number-效果和改變”alpha”值一樣，但是多了一個特性：如果alpha最終變為0，則自動將visible設為false。同樣如果autoAlpha的值大於0，則在開始緩動前會自動將visible設為true
  • visible:Boolean-緩動效果結束時DisplayObject對象的visible屬性
  • volume:Number-緩動對象的SoundTransform屬性(例如MovieClip/SoundChannel/NetStream等)
  • tint:uint-改變DisplayObject對象的色調，設置一個要緩動到的16進制的顏色值(在from()函數中表示起始值)
  • removeTint:Boolean-表示是否要取消一個應用在DisplayObject對象的tint屬性
  • frame:int-緩動MovieClip到指定的幀(在from()函數中表示起始幀)
  • onStart:Function-在緩動開始時觸發此方法
  • onStartParams:Array-數組，裝有傳遞給onStart方法的參數
  • onUpdate:Function-當屬性值發生改變時(緩動進行中的每一幀，每一秒)觸發此方法
  • onUpdateParams:Array-數組，裝有傳遞給OnUpdate方法的參數
  • onComplete:Function-在緩動效果結束時觸發此方法
  • onCompleteParams:Array-數組，裝有傳遞給onComplete方法的參數
  • persist:Boolean-如果設為true,在緩動效果結束時，TweenLite實例將不會被垃圾回收器自動回收。當然，persist為true的時候，這個緩動效果仍然可以被其他的緩動覆蓋。默認值是false
  • renderOnStart:Boolean-在調用TweenLite.from()函數並且還有一個延時的時候，如果想要讓指定的起始屬性值在延時結 束之后才展現出來的話，將renderOnStart設為true,相反，如果設為false,在延時開始之時就會立即展現指定的起始屬性值。默認值是 false 
    //mc會在y=20處停留3秒，然后在5秒內緩動到當前位置
TweenLite.from(mc, 5, { y:20, ease:Elastic.easeOut, delay:3, renderOnStart:false } );
//mc會在當前位置置停留3秒，然后跳到y=20的位置開始緩動
TweenLite.from(mc, 5, { y:20, ease:Elastic.easeOut, delay:3, renderOnStart:true } );
  • overwrite:Boolean-如果不想讓這個緩動效果被應用在同一個對象上的其他緩動效果自動覆蓋的話，請將這個值設為false

TweenLite.from(target:Object, duration:Number, variables:Object);
基本上同TweenLite.to()方法一樣，唯一不同的是所指定的緩動的屬性是起始值

TweenLite.delayedCall(delay:Number, onComplete:Function, onCompleteParams:Array);
提 供一個簡單的方法來實現在指定的秒數之后調用指定的方法(其作用相當於setTimeout()方法，如果單為了實現setTimeout的功能而給你的 代碼增加3K的重量，實在不值，但是如果項目中已經引入了TweenLite,使用這個方法是個不錯的主意)，可以傳遞任意個數的參數
Parameters:略…

TweenLite.killTweensOf(target:Object, complete:Boolean);
提供一個簡單的方法來移除應用在對象上的所有緩動效果，可以指定是否立即強制結束
Parameters:
target:目標對象
complete: 如果設為true,目標對象的緩動效果將會立即結束(緩動的屬性直接變為緩動效果結束時的值，同時調用onComplete方法如果定義了的話)，若設為 false,同樣會立即結束緩動效果 ，但是屬性值將停留在當前緩動到的位置，onComplete函數也不會執行

TweenLite.killDelayedCallsTo(function:Function);
提供一個簡單的方法來移除TweenLite.delayedCall方法中設置了的方法(其作用相當於clearTimeout)
Parameters:略..

TweenLite.removeTween(tween:TweenLite):void
回收指定的TweenLite的實例
Parameters:略.

示例：

import gs.TweenLite;
import gs.easing.Back;
 
TweenLite.to(clip_mc, 5, { alpha:0.5, x:120, ease:Back.easeOut, delay:2, onComplete:onFinishTween, onCompleteParams:[5, clip_mc] } );
 
//注意這里的參數，分別對應前面onCompleteParams數組中的類型，而不是Array型
function onFinishTween(parameter1_num:Number, parameter2_mc:MovieClip):void
{
 trace("The tween has finished! parameters: " + parameter1_num + ", and " + parameter2_mc);
}

源碼包中也有2個很不錯的例子~包含了大部分的用法在里面

About TweenLiteVars
Jack Doyle在7月15日的更新中加入了類TweenLiteVars，目的是為了讓人們可以在FB，FD,FDT等編輯器中可以使用代碼提示而不用去記眾多的屬性，並且能提供更加嚴謹的數據類型控制。TweenLiteVars類可以在TweenMax源碼包中找到。
TweenLiteVars的用法如下：

import gs.TweenLite;
import gs.utils.tween.TweenLiteVars;
import gs.easing.*;
 
var v:TweenLiteVars = new TweenLiteVars();
 
//with addProps(), you can add up to 15 dynamic properties at a time. addProp() adds one at a time.
v.addProps("x", 300, false, "y", 100, true);
v.ease = Elastic.easeOut;
v.onComplete = myFunction;
TweenLite.to(my_mc, 2, v);

靜態屬性

TweenLite.defaultEase

設置默認的緩動函數

 

靜態方法

TweenLite.to( target:Object, duration:Number, vars:Object):TweenLite

功能：用來創建動畫

參數：target:要創建動畫的影片剪輯

        duration:動畫持續的時間，以秒為單位（如果整個動畫模式是基於幀的話則以幀為單位）

        vars：要參與動畫的屬性，以對象形式來寫，比如{x:100,y:100,…},這些屬性是動畫完成的目標

例：TweenLite.to(mc, 1, {x:100});

   var myTween:TweenLite = new TweenLite(mc, 1, {x:100});  //以第一個代碼效果相同

   var myTween:TweenLite = TweenLite.to(mc, 1, {x:100});   //以第一個代碼效果相同

TweenLite.from( target:Object, duration:Number, vars:Object):TweenLite

功能：用來創建動畫,與TweenLite.to不同的是，這個函數動畫的屬性目標是影片剪輯的現有屬性，初始屬性是vars設定的屬性

參數：target:要創建動畫的影片剪輯

        duration:動畫持續的時間，以秒為單位（如果整個動畫模式是基於幀的話則以幀為單位）

        vars：要參與動畫的屬性，以對象形式來寫，比如{x:100,y:100,…},這些屬性是動畫的初始屬性

例：TweenLite.from(mc, 1, {x:100});

 

TweenLite.delayedCall( delay:Number,onComplete:Function,onCompleteParams:Array = null, useFrames:Boolean = false):TweenLite

功能：用於在一定時間或一定幀數后自動執行一個函數，相當於一個延遲器吧

參數：delay:要延遲執行函數的時間（或是幀數）

        onComplete:要延遲執行的函數

        onCompleteParams：要延遲執行的函數的參數，以數組形式傳入

        useFrames:指明是用時間還是幀數來記時

例：TweenLite.delayedCall(1, myFunction, ["param1", 2]);

TweenLite.killTweensOf( target:Object, complete:Boolean = false, vars:Object = null):void

功能：用來消除動畫

參數：target:要消除動畫的影片剪輯

        complete:如果為真則會在消除動畫的同時把動畫屬性設為完成時的值，如果為假則不會

        vars：要消除動畫的屬性，以對象形式來寫，比如{x:true,y:true,…},這些屬性將不再參與動畫

例：TweenLite.killTweensOf(mc, false, {alpha:true, x:true});

動畫屬性對象vars：

{

delay:Number   在開始動畫前要等待的時間,單位為秒（或幀數） 

useFrames:Boolean   如果設為true則動畫模式是基於幀的，否則是基於時間的（指的是動畫函數中要指定時間的地方）

ease:Function  緩動函數，默認為Quad.easeOut

easeParams:Array 緩動函數的參數，以數組形式傳入，注意只是有些緩動函數才需要需要參數的

immediateRender:Boolean 當值為false時，

overwrite:int  用來控制同一個對象上有多個動畫時的覆蓋之類的情況,tweenlite只有1和2這兩種情況可選,具體請見OverwriteManager

onInit:Function 當動畫開始渲染（或是說開始運行時）前要執行的函數

onInitParams:Array onInit函數的參數，以數組形式傳入

onStart:Function 當動畫開始渲染時要執行的函數，有可能會被執行多次，因為動畫時可以重復開始的

onStartParams:Array onStart函數的參數，以數組形式傳入

onUpdate:Function 當每一次動畫屬性值發生變化時調用的函數

onUpdateParams:Array  onUpdate函數的參數，以數組形式傳入

onComplete:Function 當動畫執行完畢后要調用的函數

onCompleteParams:Array  onComplete函數的參數，以數組形式傳入

onReverseComplete:Function  當一個動畫被反轉后又回到了原點時調用的函數

onReverseComplete:Array  onReverseComplete函數的參數，以數組形式傳入

}

OverwriteManager

NONE(0)  同一個物體上的動畫之間不會被覆蓋

ALL_IMMEDIATE(1) 會立即覆蓋之前的所有動畫（包括運行的和沒運行的），也是也tweenlite的默認模式，被覆蓋的動畫會保持覆蓋那一刻的現狀

AUTO(2) 當動畫開始運行時（即不包括延遲或暫停之類的）覆蓋，且只會覆蓋同一物體上的正在運行的動畫中的有重疊的動畫屬性。是TweenMax、TimelineLite、TimelineMax的默認覆蓋模式

CONCURRENT(3) 當動畫開始運行時覆蓋，會覆蓋同一物體上正在運行的所有動畫

ALL_ONSTART(4)  當動畫開始運行時覆蓋，會覆蓋同一物體上的所有動畫（包括運行的和沒運行的）

PREEXISTING(5)  當動畫開始運行時覆蓋，會覆蓋同一物體上在本動畫之前創建的所有動畫（包括運行的和沒運行的）

可以使用OverwriteManager.init(OverwriteManager.AUTO);來給所有動畫定義覆蓋方式，如果想給不同動畫定義不同覆蓋方式，則在具體的vars對象中定義

2、3、4、5類型都需要導入OverwriteManager類


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 tweenlite簡單介紹 GSAP JS基礎教程--TweenLite操作元素的相關屬性 @EnableAutoConfiguration的說明 PrintTemplate說明 Spark的基本說明 Demura說明 軟件說明 Bugzilla說明 關於spdlog的說明 AT指令說明
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM