1

在 Flex 3 中，您可以像这样制作发光效果：

    <mx:Glow id="glowImage" duration="250"
             alphaFrom="0" alphaTo="1"
             blurXFrom="0.0" blurXTo="3.0"
             blurYFrom="0.0" blurYTo="3.0" strength="2"
             color="0xcc0000" target="{this}"/>

    <mx:Glow id="unglowImage" duration="250"
             alphaFrom="1" alphaTo="0"
             blurXFrom="3.0" blurXTo="0.0"
             blurYFrom="3.0" blurYTo="0.0" strength="2"
             color="0xaaaaaa" target="{this}"/>

和 MXML：

<mx:Image rollOverEffect="{glowImage}" rollOutEffect="{unglowImage}"/>

在 Flex 4 中，我们应该将 AnimateFilter 与 GlowFilter 一起使用（由 Adob​​e 推荐）。这是我想出的：

    <s:AnimateFilter id="glowAnimation" 
                     target="{this}"
                     duration="250"
                     >

        <s:bitmapFilter>
            <s:GlowFilter color="#ff0000" strength="3" quality="3" />
        </s:bitmapFilter>

        <s:motionPaths>
            <s:SimpleMotionPath valueFrom="0" valueTo="4" property="blurX"/>
            <s:SimpleMotionPath valueFrom="0" valueTo="4" property="blurY"/>
        </s:motionPaths>

    </s:AnimateFilter>

和 MXML：

<mx:Image rollOverEffect="{glowAnimation}" rollOutEffect="{unglowImage}"/>

问题是这个动画一次然后效果被移除，因为 mx 效果应用过滤器并保持它应用。

~~~更新~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~
RIAStar的回答是对的，我想补充一下我刚刚从这个视频中偶然发现[1]的原因。它描述了 Animate 和 AnimateFilter 之间的区别。AnimateFilter 是瞬态的。它应用过滤器，完成后将其删除。Animate 将值永久应用于目标。

我们还应该知道，在 Flex 4 中，并非所有效果都支持触发器。

从 AnimateInstance 类：

override public function startEffect():void
{  
    // This override removes EffectManager.effectStarted() to avoid use of
    // mx_internal. New effects are not currently triggerable, so
    // this should not matter
}

这意味着我们不能依赖 rollOverEffect 来触发绑定到它的效果。我们必须在 rollOver 事件上调用 effect.play()。

所以这意味着当我们使用 Animate 类时，我们还需要改变它： 

<s:Image rollOverEffect="{glowImage}" rollOutEffect="{unglowImage}"/>

对此： 

<s:Image rollOver="glowImage.play()" rollOut="unglowImage.play()"/>

请注意，当使用多个相关效果时，最好先在播放效果上调用 end()，然后再对其相关效果调用 play()。

另外，请注意在使用单个效果时，如答案中所示，将其反转而不是像这样 gloomAnimation.play(null, true) 结束它。

<s:Image rollOver="rollOverAnimation.play()" rollOut="rollOverAnimation.play(null, true)"/>
4

2 回答 2

4

我不知道AnimateFilter，但是这个使用简单Animate效果的解决方案应该可以很好地工作：

<s:Animate id="glowAnimation" target="{glow}" duration="250">
    <s:motionPaths>
        <s:SimpleMotionPath valueFrom="0" valueTo="10" property="blurX"/>
        <s:SimpleMotionPath valueFrom="0" valueTo="10" property="blurY"/>
    </s:motionPaths>
</s:Animate>

<s:Image rollOver="glowAnimation.play()" 
         rollOut="glowAnimation.play(null, true)">

    <s:filters>
        <s:GlowFilter id="glow" blurX="0" blurY="0" />
    </s:filters>
</s:Image>

请注意，我将 和 的初始值blurX设置blurY为0。4这是必要的，否则只要您不翻转图像，它将显示默认值。

于 2012-10-12T16:08:48.180 回答
0

我使用过渡在 SparkSkin 中进行效果切换。用于模糊光标下的蒙皮项目： 

<!-- states -->
<s:states>
    <s:State name="up" />
    <s:State name="over" />
    <s:State name="down" />
    <s:State name="disabled" />
</s:states> 

<fx:Declarations>       
    <s:BlurFilter id="aBlurFilter" blurX="0" blurY="0" blurX.over="10" blurY.over="10" quality="{BitmapFilterQuality.HIGH}"  />     
</fx:Declarations>

<s:transitions>  
    <s:Transition fromState="*" toState="over">

            <s:Animate id="BlurFilterTo" 
                target="{aBlurFilter}"
                repeatCount="1"
                duration="500"
                repeatBehavior="reverse"
                >
                <s:SimpleMotionPath property="blurX" valueFrom="0" valueTo="10"/>
                <s:SimpleMotionPath property="blurY" valueFrom="0" valueTo="10"/>
            </s:Animate>

    </s:Transition> 

    <s:Transition fromState="over" toState="*">

            <s:Animate id="BlurFilterFrom" 
                target="{aBlurFilter}"
                repeatCount="1"
                duration="500"
                repeatBehavior="reverse"
                >
                <s:SimpleMotionPath property="blurX" valueFrom="10" valueTo="0"/>
                <s:SimpleMotionPath property="blurY" valueFrom="10" valueTo="0"/>
            </s:Animate>

    </s:Transition> 

</s:transitions> 

<s:BitmapImage id="iconDisplay" filters="{[aBlurFilter]}" />
于 2013-08-11T16:33:19.353 回答