12.8.創建AnimateColor 特效

2024-04-27 13:52:14

字體：大中小

來源：轉載

供稿：網友

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="backgroundColor" isStyle="true"
fromValue="0xFF0000"
toValue="0x00FF00"
duration="4000" />