淡入淡出效果应用于相邻的 ItemRenderer

Question

我正在对 mouseOver 事件的 s:ItemRenderer 应用 s:Fade 效果。淡入淡出效果结束很好，但在执行期间，它仅应用于ItemRenderer对象的一半，加上相邻（右）ItemRenderer 的一半。

ItemRenderer 对象位于使用 Horizo​​ntalLayout 的 s:List 内。

以下是名为 FilterTagRenderer 的 ItemRenderer 的代码：

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark" 
                xmlns:mx="library://ns.adobe.com/flex/mx" 
                autoDrawBackground="false"
                mouseOver="{fadeIn.play()}"
                mouseOut="{alpha = 0.6}"
                alpha="0.6">

    <fx:Declarations>
        <s:Fade id="fadeIn" alphaTo="1" duration="500" target="{this}"/>
    </fx:Declarations>

    <s:Label id="lblFilterName" text="{data}" paddingBottom="5" fontWeight="bold" fontSize="14"/>

</s:ItemRenderer>

以下是 List 的代码：

    <s:List id="filterValuesList" width="{this.width}" borderVisible="false"
    itemRenderer="view.FilterTagRenderer">
        <s:layout>
            <s:HorizontalLayout id="flowLayout" gap="6"/>
        </s:layout>
    </s:List>

我正在使用 Flex SDK 4.0。

有谁知道这是 Flex 中的错误还是我做错了什么？

谢谢

Answer 1

您做的事情有点错误，因为使用 Spark 组件，您应该让状态更改运行效果，而不是尝试自己运行它。但是，底层效果只是单个 DisplayObject 上的过滤器，因此我不确定如何获得部分作用于两个不同对象的效果。您的渲染器可能并不在您想象的位置。如果您使用 Flex 附带的布局之一（例如 TileLayout）会发生什么？

Answer 2

看起来像一个错误。

重现步骤：只需编译并运行以下两个文件，然后将鼠标移至任意单词上即可。

应用程序文件 (FadeBug.mxml)：

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
        ]]>
    </fx:Script>

    <s:List dataProvider="{new ArrayCollection('The quick brown fox jumped over the lazy dog'.split(' '))}"
            itemRenderer="BuggyItemRenderer" >
        <s:layout>
            <s:HorizontalLayout gap="6"/>
        </s:layout>
    </s:List>

</s:Application>

BuggyItemRenderer.mxml：

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark" 
                xmlns:mx="library://ns.adobe.com/flex/mx" 
                autoDrawBackground="false"
                alpha="0.4"
                mouseOver="{fadeEffect.play()}"
                mouseOut="itemrenderer1_mouseOutHandler(event)">

    <fx:Script>
        <![CDATA[
            protected function itemrenderer1_mouseOutHandler(event:MouseEvent):void
            {
                if (fadeEffect.isPlaying) {
                    fadeEffect.stop();
                }
                this.alpha = 0.4;
            }
        ]]>
    </fx:Script>


    <fx:Declarations>
        <s:Fade id="fadeEffect" target="{this}" alphaFrom="0.4" alphaTo="1"/>
    </fx:Declarations>

    <s:Label text="{data}" fontSize="25" fontWeight="bold"/>

</s:ItemRenderer>