Flex的動畫效果與變換 二

2021-06-29 12:29:59 字數 3246 閱讀 4646

本文出自

在上篇文章《flex的動畫效果與變換(一)》中講到了使用flex系統裡面自帶的一些動來效果的使用,但很多開發者都並不滿足flex裡提供的簡單的漸變大小,透明,移動,遮罩等的效果,如果是flash的開發者的話,更不用說了,在flash,多數人都是隨意的製作一些動畫效果等,而且形態多變。但是不是flex裡就不能實現呢?肯定不是,在flex裡也可以自定義動畫效果,只不過就是沒有flash裡面那麼簡單隨意了。不過熟悉了之後,也會覺得在flex裡製作動畫也不是什麼難事,不多說了,轉入正題!

在這裡我先介紹一下flex裡面的動畫效果機制,在flex裡面要使用動畫效果的話,先要建立乙個效果標籤,之後在元件裡(如textinput)寫上效果觸發器,但可能會有人問,如果程式裡我就只定義乙個移動效果

效果執行的時候,其實執行的不是move這個物件,而是moveinstance這個物件,move只是工廠,既然乙個動畫效果就主要分這兩大部份,我們就先建造乙個工廠吧!

在flex裡面所有的效果的工廠都是繼承自 mx.effects.effect 這個類,我們也不能搞特殊,我們自定義的效果也要繼承那個類,先看以下整個工廠類的**:

[複製到剪貼簿]

code:

package com.jiangzone.flex.effects

public function myeffect(newtarget:object = null)

override public function getaffectedproperties( ):array

override protected function initinstance(instance:effectinstance):void }}

大家看看上面的**,其中先看建構函式,建構函式要接收乙個預設為空的object物件

public function myeffect(newtarget:object = null)

之後在該建構函式裡面呼叫父類的建構函式,並且將instanceclass這個屬性設定為你的該效果的例項類,因為這個類是工廠類,所以要知道你這個工廠生產什麼產品,即上面說的「衣服」,所以這裡我們將其命名為myeffectinstance,注意:在flex中的所有效果例項類都是在工廠類後面加instance,也不是一定,只是規範而已。還有注意,下面一會定義的例項類的類名一定要跟這裡的一致。

大家還會看到,上面的**中,複寫(override)了二個方法:getaffectedproperties( )與initinstance(instance:effectinstance)

這兩個方法都是要複寫的,先說說getaffectedproperties( )這個方法,這個方法是獲取被改變的屬性值,怎麼說呢,比如說,你做的動畫效果如果要用到元件物件的一些屬性的話,就要返回這些屬性的名字,如:你的效果是對元件做旋轉的話,則:

[複製到剪貼簿]

code:

override public function getaffectedproperties( ):array

反正你做的效果需要對元件修改什麼屬性的話,都在這個方法裡返回名字,修改多個屬性的話就往陣列裡加就是了。

後面就是這個方法了initinstance,該方法接收乙個instance:effectinstance引數,也就是效果例項類啦,因為每個效果例項類都要繼承effectinstance類,所以這個方法裡的引數寫的是父類,在裡面要做其它的話,需要將 instance 轉換為你相應的效果類。在這個方法裡面,也是要呼叫父類的同名方法:super.initinstance(instance);

[複製到剪貼簿]

code:

private var _color:number = 0xff0000;

public function set color(value:number):void

你想執行時的效果可以設定不同的顏色的話,就可以直接設定myeffect的color屬性,之後將這個屬性傳給效果例項類:

[複製到剪貼簿]

code:

override protected function initinstance(instance:effectinstance):void

這些對效果例項類的設定,都是要定在initinstance方法裡了,你想對執行時的效果設定什麼屬性的話,都要先告訴工廠類,之後工廠類在這個方法裡面轉嫁給例項類,這樣,同乙個效果,可以執行不同的顏色。但前提是你後面要寫的例項類要有color這個屬性。

現在已做好了工廠類了,下面要做效果例項類了,先貼出完整**:

[複製到剪貼簿]

code:

package com.jiangzone.flex.effects

public function myeffectinstance(newtarget:object)

override public function play( ):void

private function drawshape():void

private function onenterframe(e:event):void}}

}我們看到,每乙個動畫效果例項類,都要繼承自effectinstance這個類,建構函式也是需要接收乙個object,這個object其實就是你要應用到的元件物件,這個會是系統自動傳遞的,接收了object後還要用該object 呼叫父類的建構函式:super(newtarget);

之後還有一件必做的事,就是重寫play()這個方法:override public function play( ):void

這裡先看看最終效果:

由於編幅關係,就不在這裡詳細介紹tweeneffectinstence了,就簡單貼出該類的寫法與注釋吧:

[複製到剪貼簿]

code:

package com.jiangzone.flex.effects

//建構函式

public function myeffectinstance(newtarget:object)

//同樣的要重寫play()方法與呼叫父類同名方法

override public function play( ):void

override public function ontweenupdate(value:object):void

override public function ontweenend(value:object):void

private function drawshape():void}}

就寫到這裡吧,關於tween其它的,就留作為作業,讓大家思考與探索吧!之後如果有時間的話,將會寫完下篇文章介紹flex的「變麵」動畫,即狀態變換!這裡先謝謝大家支援!

Flex動畫效果與變換 二

很多開發者都並不滿足flex裡提供的簡單的漸 變大小,透明,移動,遮罩等的效果,如果是flash的開發者的話,更不用說了,在flash,多數人都是隨意的製作一些動畫效果等,而且形態多變。但是 不是flex裡就不能實現呢?肯定不是,在flex裡也可以自定義動畫效果,只不過就是沒有flash裡面那麼簡單...

Flex動畫效果與變換 三

這篇文章是flex動畫效果變換的最後一編了,這篇將會講述flex中的 變麵 技術,即是transitions!看到了效果了吧,這種的變換不難實現,再來看看 再解析 代 碼會比較多,我們先看看標籤,它是乙個集合,就是你的程式有多少個狀態,什麼是狀態呢?我自已理解就即是有多少個 面 譜 即是現在程式裡面...

Flex的動畫效果與變換!(一)

在flex裡面不像在flash裡面隨意製作動畫了,flex更趨向於應用程式,而不是動畫製作了,所以沒有了時間軸的概念。在flex中使用動畫效果,可以用flex自帶的effect,或者自已定製effect,因為很多人都想借flash裡面的一樣操作flex,比如在flash裡面做乙個動態按鈕很容易,當滑...