Question

在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一起使用（由Adobe推荐）。以下是我的想法：

    <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效果会应用滤镜并保持应用。

~~~ UPDATE ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~
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相关效果。

另外，请注意当使用单一效果时，如在答案中那样，将其反转而不是像glowAnimation.play（null，true）那样结束它。

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

Answer 1

我不知道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。

Answer 2

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

<!-- 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]}" />

如何在Spark中使用辉光滤镜

2 个答案: