Question

我正在尝试为Flex 4 Spark Button创建一个皮肤。它有一个背景矩形，其颜色由“chromeColor”样式属性控制。如果我为它创建了一个样式声明，它具有不同的颜色值，可用于向上和向上状态，它可以正常工作 - 当鼠标结束时，按钮的背景颜色会发生变化。

但是，我想改变这种行为，以便背景颜色随着转换而不是立即改变，同时仍然能够定义要与CSS伪选择器进行更改的颜色。所以我在皮肤定义中添加了声明，但是效果不好。

表现如下：

翻转时，颜色会立即改变，
如果鼠标在翻转过渡之前（未真正发生）结束（即在动画定义中设置的时间过去之前），则过渡有效，并且颜色被补充到原始状态， “up”值
如果在此之后鼠标滚出，则颜色的变化是即时的

以下是相关的代码片段：

Main.mxml：

<fx:Style>

    .blackSquare {
        skinClass: ClassReference("OverButtonSkin");
        chromeColor: #000000;
    }

    .blackSquare:over {
        chromeColor: #ABCDEF; 
    }

</fx:Style>
<s:Button styleName="blackSquare" />

OverButtonSkin.mxml：

<s:transitions>
    <s:Transition>
        <s:AnimateColor target="{bgFill}" duration="1000" />
    </s:Transition>
</s:transitions>

<s:Rect width="100%" height="100%">
    <s:fill>
        <mx:SolidColor id="bgFill" color="{getStyle('chromeColor')}"/>
    </s:fill>
</s:Rect>

我做错了什么，或者我发现了一个错误？我正在使用Flex SDK 4.6.0。

Answer 1

我认为状态的伪选择器不是有效的Flex CSS（它只是标准CSS的一个子集）。你可以做的是创建自己的CSS属性，如下所示：

s|Button {
    chromeColorUp: red;
    chromeColorOver: green;
    chromeColorDown: blue;
}

现在，您可以使用基于Flex 4状态的属性分配来实现所需的效果。

<s:Rect left="0" right="0" top="0" bottom="0">
    <s:fill>
        <s:SolidColor id="bgFill"
                      color.up="{getStyle('chromeColorUp')}"
                      color.over="{getStyle('chromeColorOver')}"
                      color.down="{getStyle('chromeColorDown')}" />
    </s:fill>
</s:Rect>

当Button更改其状态时，您已定义的Transition现在将自动播放红色，绿色和蓝色之间的颜色过渡。

在Flex 4中，如何为样式属性创建过渡？

Main.mxml：

OverButtonSkin.mxml：

1 个答案: