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

Question

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

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

它的行为是这样的：

• 翻滚时，颜色立即改变，
• 如果鼠标在翻转过渡（实际上并没有发生）结束之前滚动（即在动画定义中设置的时间过去之前），则过渡起作用，并且颜色补间到原始颜色， “向上”值
• 如果鼠标在该时间之后滚动，颜色的变化是即时的

以下是相关代码片段：

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>

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