我在 flex 4 中创建了我的第一个动画效果。它在我的自定义组件中是一个非常简单的动画,它将标签组件从左到右向左移动 3-5 次,然后逐渐淡出。
一切正常,但问题是当我第一次运行动画时,它会播放生涩的动画,之后会变得更加流畅。我不知道为什么。
有人能说出这有什么问题吗?
这是我的自定义组件的完整源代码。将其添加到舞台后,调用 showProgressEffect() 将播放动画。
请注意,我制作了标签“cacheAsBitmap”以避免在移动标签时闪烁,并在每个动画/效果的 play() 方法之前调用 stop()。
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="274" height="72"
click="onClick()" xmlns:components="ui.hud.components.*" cacheAsBitmap="true">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
<s:Sequence id="tween" repeatCount="5" effectEnd="onEffectEnd()" >
<s:Move xBy="20" duration="500" />
<s:Move xBy="-20" duration="500" xFrom="50"/>
</s:Sequence>
<s:Fade id="fadeEffect" alphaTo="0" duration="2000" />
</fx:Declarations>
<fx:Script>
<![CDATA[
[Bindable]
public var questId:int;
[Bindable]
public var questTitle:String;
[Bindable]
public var iconUrl:String;
private function onClick():void{
Globals.questCtr.showQuest(questId);
}
private function onEffectEnd():void{
fadeEffect.stop();
fadeEffect.play([lblStatus]);
}
public function showProgressEffect():void{
tween.stop();
lblStatus.alpha = 1;
tween.play([lblStatus]);
}
]]>
</fx:Script>
<mx:Image source="{iconUrl}" width="75" height="75"/>
<s:Group x="77" y="24" width="197">
<s:Label id="lblStatus" text="Task Complete" fontWeight="bold" fontSize="25" alpha="0" cacheAsBitmap="true" hideEffect="" mouseEnabled="false"/>
</s:Group>
</s:Group>