天天看點

Flex動畫效果

    在flex裡面不像在flash裡面随意制作動畫了,flex更趨向于應用程式,而不是動畫制作了,是以沒有了時間軸的概念。在flex中使用動畫效果,可以用flex自帶的effect,或者自已定制effect,因為很多人都想借flash裡面的一樣操作flex,比如在flash裡面做一個動态按鈕很容易,當滑鼠移動到上面時,會有很多發光的點跑出來(熒火蟲效果),這種效果在flash十分容易實作,但在flex裡面要實作這種效果就不是那麼簡單了。

    首先介紹一下flex裡面的自帶的效果有:

        blur 模糊效果

        move 移動效果

        fade 淡入淡出效果

        glow 發光效果

        resize 調整大小效果

        rotate 旋轉效果

        zoom 縮放效果

        wipeleft 用遮罩實作畫面收放效果,下同,分别為不同方向

        wiperight

        wipeup

        wipedown

    不同的效果設定的屬性也不一樣,比如blur效果需要設定它的x與y軸的模糊像素

        <mx:blur id=”blur” blurxfrom=”0″ blurxto=”10″ />

    而move效果需要設定移動的位置

        <mx:move id=”moveeffect” xfrom=”-100″ />

    其它設定可以參考flex語言參考

    下面說說如何使用這些效果。要運作這些效果有兩種方法:一種是調用該效果的play()方法,另外一種是使用觸發器來觸發效果。

    (1)使用play()方法:

    先看效果:

<?xml version=”1.0″ encoding=”utf-8″?>

<mx:application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”>

<mx:script>

    <![cdata[

    private function onclick(event:event):void

    {

        be.target = event.currenttarget;

        be.play( );

    }

    ]]>

</mx:script>

<mx:blur id=”be” blurxto=”50″ bluryto=”50″ duration=”1000″ />

<mx:panel id=”p” width=”200″ height=”180″ click=”onclick(event)” />

</mx:application>

   在代碼中看到,要使用效果,先定好一個效果,在panel的點選事件裡再對該效果進行一些設定,如be.target =event.currenttarget設定該效果将要應用到的目标元件(component),之後再調用play()方法後,該效果就會應用在panel上面播放!

    (2)使用觸發器播放效果:

    使用觸發器播放效果的話,可以不用寫actionscript代碼,直接在元件的效果觸發器上指明使用哪個效果就可以了,比較簡單明了,但就不能進行更多的屬性定制,先看看觸發器播放的代碼:

        <?xml version=”1.0″ encoding=”utf-8″?>

        <mx:application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”>

               <mx:blur id=”be” blurxto=”50″ bluryto=”50″ duration=”2000″ />

            <mx:panel id=”p” width=”200″ height=”180″ creationcompleteeffect=”{be}” />

        </mx:application>

    duration=”2000″這個是播放的時間以毫秒為機關。

    在panel标簽裡有這樣一句:creationcompleteeffect=”{be}” 這個就是觸發器,是該panel元件的效果觸發器,當panel元件加載完成時,會由系統自動調用該效果觸發器,觸發器裡面指了觸發 be 這個blur效果。

    在flex裡面還有很多觸發器如:

        addedeffect 被添加進容器時觸發效果

        removedeffect 被從容器中移除時觸發效果

        creationcompleteeffect 被建立成功時觸發效果

        focusineffect 獲得焦點時觸發

        focusouteffect 失去焦點時觸發

        hideeffect 被隐藏時(visible=false)觸發

        showeffect 被顯示時(visible=true)觸發

        rollovereffect 滑鼠經過時觸發

        rollouteffect 滑鼠離開時觸發

        mousedowneffect 滑鼠按下時觸發

        mouseupeffect 滑鼠松開時觸發

        moveeffect 被移動時觸發

        resizeeffect 被重整大小時觸發

    注意:這些都是效果觸發器,不要與事件觸發器混亂了。事件觸發器是rollover,事件觸發器與效果觸發器差不多,事件觸發器是當使用者執行相就操作時觸發事件,将會調用自定的事件觸發處理函數,而效果觸發器是執行相應操作時被觸發并由系統自動調用所定的效果的play()方法。

    效果的一些其它屬性:

    每個效果都有reverse( )方法,該方法是反向播放,原本由小到大的變化,而調用reverse( );後再運作play()的話,效果将會從大到小進行播放。

    但,reverse( )方法不會自動播放,即是單單調用reverse( );的話,效果并不會播放,他隻會記錄該效果為倒轉,而要再調用play()後倒轉效果才會開始播放。而調用pause( )與resume( )就是暫停與繼續播放效果。

    startdelay這個屬性是設定效果的播放延時,以毫秒為機關,即要等待多少毫秒後效果才開始播放,如:

    <mx:blur id=”be” blurxto=”50″ startdelay=”3000″ />  該模糊效果将會在調用play()之後3秒才開始播放

    repeatcount屬性設定效果的重複次數,預設為1,設定為0的話就是不停循環播放

    <mx:blur id=”be” blurxto=”50″ startdelay=”3000″ repeatcount=”5″ />

    每個效果都有兩個事件:effectstart 與 effectend

    你可以在該效果事件的處理函數裡面對效果作相應的操作,如:

    <?xml version=”1.0″ encoding=”utf-8″?>

    <mx:application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”>

        <mx:script>

        <![cdata[

            import mx.events.effectevent;

            public function oneffend(e:effectevent):void

            {

                e.effectinstance.reverse();

                e.effectinstance.play();

            }

        ]]>

        </mx:script>

        <mx:blur id=”be” blurxto=”50″ bluryto=”50″ duration=”2000″ />

        <mx:panel id=”p” width=”200″ height=”180″ creationcompleteeffect=”{be}” effectend=”oneffend(event)” />

    </mx:application>

    當效果播放完時,系統将會自動觸發effectend事件,在處理函數裡面,将該效果instance即現時播放的效果執行個體進行倒轉并播放,當播放完,又會觸發effectend事伯,這樣一直循環!

    效果的組合:

    通常如果你覺得隻應用一個效果很單調的話,可以進行效果組合應用,即多個效果同時播放或者順序播放,

如,當加載頁面時,你想panel先模糊到一定程度,再将panel移動到某個位置,再把panel還原成原來的清淅度。一共用了三個效果,一,先應用blur效果,當blur完成時,再應用move效果,當move完成時,再應用另外一個blur(由模至清)效果。這樣三個效果組合就是按順序組合,先後運作。

        <mx:sequence id=”sequenceeffect”>

            <mx:blur id=”beout” blurxto=”50″ bluryto=”50″ duration=”500″ />

            <mx:move id=”mv” xto=”200″ yto=”150″ duration=”500″ />

            <mx:blur id=”bein” blurxfrom=”50″ bluryfrom=”50″ blurxto=”0″ bluryto=”0″ duration=”500″ />

        </mx:sequence>

        <mx:panel id=”p” width=”200″ height=”180″ mousedowneffect=”sequenceeffect” />

    看以上代碼,<mx:sequence id=”sequenceeffect”>标簽就是順序組合效果标簽,當應用sequenceeffect效果的時候,它會按順序播放該标簽裡面的三個子效果。