積少成多Flash(11) - Flex 3.0 動畫效果(effect)

<a href="http://down.51cto.com/data/100162" target="_blank">[源碼下載下傳]</a>

介紹

示範 Flex 3.0 中的各種動畫效果(effect)的應用

Zoom - 放大/縮小

Wipe - 從上/下/左/右 4 個方向線性漸變地對控件做删除/顯示

Rotate - 旋轉

Resize - 調整控件大小

Fade - 淡入/淡出

Move - 改變控件位置

Iris - 顯示/消失（放射性漸變）

Blur - 模糊

Dissolve - 對控件做alpha修改

Glow - 對控件做周邊發光

SoundEffect - 播放一段音頻

Parallel - 對各種 effect 做并行展示

Sequence - 對各種 effect 做串行展示

TweenEffect - 此類是大部分 effect 的基類

線上DEMO

1、Zoom.mxml

<?xml version="1.0" encoding="utf-8"?>

<!--

示範放大/縮小的動畫效果

-->

<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300"

title="Effect - Zoom (放大/縮小)">

<mx:Script>

<![CDATA[

private function doZoom(e:MouseEvent):void

{

if (zoom.isPlaying)

{

zoom.reverse();

}

else

zoom.play([e.target], e.type == MouseEvent.ROLL_OUT ? true : false);

}

]]>

</mx:Script>

<mx:Zoom id="zoom" originX="24" originY="24"

zoomWidthFrom="1" zoomWidthTo="2" zoomHeightFrom="1" zoomHeightTo="2" />

<mx:Image source="@Embed('images/logo.png')"

x="24" y="24" width="48" height="48"

scaleX="1" scaleY="1"

rollOver="doZoom(event)" rollOut="doZoom(event)"

</mx:Panel>

2、Wipe.mxml

示範從上/下/左/右 4 個方向線性漸變地對控件做删除/顯示的動畫效果

title="Effect - WipeUp, WipeDown, WipeLeft, WipeRight (擦除)">

private function effectEndHandler():void

mx.controls.Alert.show("WipeLeft 效果結束");

<mx:WipeLeft id="wipeLeft" duration="1000" effectEnd="effectEndHandler()" />

<mx:WipeUp id="wipeUp" duration="1000" />

x="24" y="24" width="48" height="48"

visible="{chk.selected}" hideEffect="{wipeLeft}" showEffect="{wipeUp}"

<mx:ControlBar horizontalAlign="center">

<mx:CheckBox id="chk" label="顯示" selected="true"

textRollOverColor="blue"

textSelectedColor="red"

</mx:ControlBar>

3、Rotate.mxml

示範旋轉的動畫效果

title="Effect - Rotate (旋轉)">

[Bindable]

private var angle:int = 0;

private function rotateImage():void

rotate.end();

angle +=45;

rotate.play();

}

<mx:Rotate id="rotate" angleFrom="{angle-45}" angleTo="{angle}" target="{image}" duration="100" />

<mx:Image id="image" source="@Embed('images/logo.png')"

x="24" y="24" width="48" height="48"

<mx:Button label="旋轉 45 度" click="rotateImage();" />

4、Resize.mxml

示範調整控件大小的動畫效果

title="Effect - Resize (重設大小)">

private function smoothImage(e:Event):void

var bmp:Bitmap = e.target.content as Bitmap;

bmp.smoothing = true;

<mx:Resize id="resizeUp" target="{image}" widthTo="180" heightTo="180" />

<mx:Resize id="resizeDown" target="{image}" widthTo="48" heightTo="48" />

creationComplete="smoothImage(event)"

<mx:Button label="放大" click="resizeUp.end(); resizeUp.play();" />

<mx:Button label="縮小" click="resizeDown.end(); resizeDown.play();" />

5、Fade.mxml

示範淡入/淡出的動畫效果

title="Effect - Fade (淡入/淡出)">

<mx:Fade id="fadeOut" duration="1000" alphaFrom="1" alphaTo="0" />

<mx:Fade id="fadeIn" duration="1000" alphaFrom="0" alphaTo="1" />

visible="{chk.selected}" hideEffect="{fadeOut}" showEffect="{fadeIn}"

6、Move.mxml

示範改變控件位置的動畫效果（移動控件）

title="Effect - Move (移動)">

private function moveImage(e:MouseEvent):void

var position:Point = new Point(stage.mouseX, stage.mouseY);

var localPosition:Point = canvas.globalToLocal(position);

effectMove.end();

effectMove.xTo = localPosition.x - (image.width / 2)

effectMove.yTo = localPosition.y - (image.height / 2)

effectMove.play();

<mx:Move id="effectMove" target="{image}" />

<mx:Canvas id="canvas" width="100%" height="100%" mouseDown="moveImage(event)">

<mx:Image id="image" source="@Embed('images/logo.png')"

x="24" y="24" width="48" height="48"

</mx:Canvas>

7、Iris.mxml

示範顯示/消失（放射性漸變）的動畫效果

title="Effect - Iris (遮罩 - 用于消失/顯示對象)">

<mx:Iris id="irisOut" duration="1000" showTarget="true" />

<mx:Iris id="irisIn" duration="1000" showTarget="false" />

visible="{chk.selected}" hideEffect="{irisOut}" showEffect="{irisIn}"

8、Blur.mxml

示範模糊的動畫效果

title="Effect - Blur (模糊)">

<mx:Blur id="blurImage" duration="1000"

blurXFrom="0" blurXTo="10" blurYFrom="0" blurYTo="10"

<mx:Blur id="unblurImage" duration="1000"

blurXFrom="10" blurXTo="0" blurYFrom="10" blurYTo="0"

rollOverEffect="{blurImage}" rollOutEffect="{unblurImage}"

9、Dissolve.mxml

示範對控件做alpha修改的動畫效果

title="Effect - Dissolve (溶解, 變換 alpha 的效果)">

<mx:Dissolve id="dissolveOut" duration="1000" alphaFrom="1" alphaTo="0" />

<mx:Dissolve id="dissolveIn" duration="1000" alphaFrom="0" alphaTo="1" />

visible="{chk.selected}" hideEffect="{dissolveOut}" showEffect="{dissolveIn}"

10、Glow.mxml

示範對控件做周邊發光的動畫效果

title="Effect - Glow (發光)">

<mx:Glow id="glowImage" duration="1000"

alphaFrom="1" alphaTo="0.3"

blurXFrom="0" blurXTo="50" blurYFrom="0" blurYTo="50"

color="0x22aa55"

<mx:Glow id="unglowImage" duration="1000"

alphaFrom="0.3" alphaTo="1"

blurXFrom="50" blurXTo="0" blurYFrom="50" blurYTo="0"

color="0x3388dd"

rollOverEffect="{glowImage}" rollOutEffect="{unglowImage}"

11、SoundEffect.mxml

播放一段音頻

title="Effect - SoundEffect (音效)">

<mx:SoundEffect id="soundEffect" source="@Embed('assets/bomb.mp3')" />

mouseDownEffect="{soundEffect}"

12、Parallel.mxml

對各種 effect 做并行展示

title="Effect - Parallel (效果并行), AddItemAction, RemoveItemAction">

import mx.collections.ArrayCollection;

private var dp:ArrayCollection = new ArrayCollection(["webabcd", "webabcd", "webabcd"])

private function addItem():void

dp.addItemAt("webabcd", dp.length);

private function removeItem():void

dp.removeItemAt(dp.length - 1);

<mx:Parallel id="parallel">

<mx:AddItemAction filter="addItem" startDelay="500" />

<mx:RemoveItemAction filter="removeItem" startDelay="500" />

<mx:Blur startDelay="500" duration="1000" blurXFrom="0" blurXTo="10" blurYFrom="0" blurYTo="10" filter="addItem" />

</mx:Parallel>

<mx:Label text="順便說明 AddItemAction, RemoveItemAction" x="10" y="10"/>

<mx:List id="list" dataProvider="{dp}" fontSize="16" y="36" x="10" height="178" width="360"

itemsChangeEffect="{parallel}"/>

<mx:Button label="增加一項" click="addItem();" />

<mx:Button label="删除一項" click="removeItem();" />

13、Sequence.mxml

對各種 effect 做串行展示

<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" horizontalAlign="center" width="400" height="300"

title="Effect - Sequence (效果串行), AnimateProperty, Pause">

<mx:Label text="順便說明 AnimateProperty, Pause"/>

<mx:Sequence id="sequence">

<mx:AnimateProperty property="scaleX" fromValue="1" toValue="3" duration="300" />

<mx:Pause duration="2000"/>

<mx:AnimateProperty property="scaleX" fromValue="3" toValue="1" duration="1000" />

</mx:Sequence>

width="48" height="48"

scaleX="1" scaleY="1"

mouseDownEffect="{sequence}"

14、TweenEffect.mxml

示範 TweenEffect （此類是大部分 effect 的基類）

title="TweenEffect 的介紹（它是部分 effect 的基類）">

import mx.events.TweenEvent;

private function tweenStartHandler(e:TweenEvent):void

txtMsg.text += "補間效果開始\r";

private function tweenEndHandler(e:TweenEvent):void

txtMsg.text += "補間效果結束\r";

lblUpdate.text = "寬度: " + image.width;

private function tweenUpdateHandler(e:TweenEvent):void

<mx:Resize id="resizeUp" target="{image}" widthTo="180" heightTo="180" duration="5000"

tweenStart="tweenStartHandler(event)"

tweenEnd="tweenEndHandler(event)"

tweenUpdate="tweenUpdateHandler(event)"

<mx:Text x="264" y="36" width="106" height="178" id="txtMsg"/>

<mx:Label x="264" y="10" id="lblUpdate"/>

<mx:ControlBar horizontalAlign="center">

<mx:Button label="放大" click="resizeUp.end(); resizeUp.play();" />

<mx:Button label="縮小" click="resizeDown.end(); resizeDown.play();" />

</mx:ControlBar>

本文轉自webabcd 51CTO部落格，原文連結：http://blog.51cto.com/webabcd/342247，如需轉載請自行聯系原作者

積少成多Flash(11) - Flex 3.0 動畫效果(effect)

繼續閱讀

Flex中如何通過建立新的XML命名空間（namespace），在MXML中使用flash.filters類

關于Flex及AS3的百多條小小知識

Socket套接字類 AS3

Flash AS3 連續加載外部若幹圖檔

tomcat conf目錄下web.xml tomcat-users.xml server.xml context.xml這四個檔案的作用

Silverlight調用WCF服務，在添加WCF服務引用時，報錯如下：

2018年不想被web前端開發淘汰，你需要掌握哪些技術？

sqli-labs第一關--報錯注入練習

小程式自定義button元件擷取使用者資訊（使用者授權登入）

寫一個Junit類...在Spring中

jqGrid的使用筆記：5. 事件

invalid byte 1 of 1-byte UTF-8 sequence

出現invalid byte 1 of 1-byte UTF-8 sequence問題

為什麼要選擇UniDAC

SIP Presence SUBSCRIBE-NOTIFY

QName是什麼