12.8.创建AnimateColor 特效

12.8.1 问题
我想平滑地过渡颜色。
12.8.2 解决办法
使用自定义效果,AnimateColor,获得一个在两个色值间平滑过渡。
12.8.3 讨论
使用AnimateProperty 效果在颜色之间转换会因为色值本身的性质造成闪烁的问题。

AnimateProperty 效果平滑地在fromValue 和toValue 之间转换,但是仅限于值为数字的情况下。例如,AnimateProperty 可以出色地将组件从x 等于10 位置平滑地移动到x 等于100 位置。

另一方面,颜色并不是真正的数字。它们由数值表达,例如十六进制0xFFCC33 或十进制16763955,但每个数字都由三个独立的数字(颜色通道)组成:红,绿,蓝。每个通道取值范围为从0 到255 (0xFF)。0xFF0000 表示纯红,0x00FF00 表示纯绿,0x0000FF 表示纯蓝。于是,色值0x990099 即为由部分红加部分蓝混合而成。

要平滑地转换一个颜色,必须单独地看颜色的三个部分。例如,如果颜色从0x000000 过渡到0xFF0000,转换应该仅应用在red 通道上。但是,AnimateProperty 则把这个转换看作从0到16711680。数字255 因恰好在开始和结束值之间而可能在过渡过程中显示出来,但是255代表的是0x0000FF 纯蓝。因此,纯蓝会出现在过渡过程中,但是在此强调一下,在这里仅需要从red 通道过渡即可。

基于这种理解,从一个颜色到另一个颜色的过渡需要单独在每个通道的基础上完成,于是创建一个新的名为AnimateColor 的效果。

像下面这样使用AnimateColor 效果:
+展开
-XML
<ds:AnimateColor xmlns:ds="com.darronschall.effects.*"
id="fadeColor"
target="{someTarget}"
property="backgroundColorisStyle="true"
fromValue="0xFF0000"
toValue="0x00FF00"
duration="4000" />

一个AnimateColor 效果计算从fromValue 到toValue 间不同值的每个颜色通道。每一步过渡,都要先考虑每个独立通道需要变化多少,然后生成一个新的的颜色值。整体效果会形成一个平滑的颜色过渡。在前面代码例子中,someTarget 的backgroundColor 在4 秒内从纯红过渡到纯蓝,在过渡过程中会显示一点点紫色。

加支付宝好友偷能量挖...


评论(0)网络
阅读(106)喜欢(0)flash/flex/fcs/AIR