Flex 4 - 生涩的动画问题答案

【问题标题】：Flex 4 - Jerky animation issueFlex 4 - 生涩的动画问题
【发布时间】：2012-05-25 16:34:10
【问题描述】：

我在 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>

【问题讨论】：

标签： apache-flex animation effects tween

【解决方案1】：

这是因为在动画开始之前，您的标签与之后的位置不同。我不知道你到底想达到什么目标，但有两种选择：

你可以在第二步效果中将xFrom="50"更改为xFrom="20"；
可以将lblStatusx坐标改为30；

【讨论】：