使用 alpha 动画更改视图颜色

Question

我正在编写代码，其中需要沿着 alpha 动画将视图背景从一种颜色修改为另一种颜色。

我试过

ObjectAnimator backgroundColorAnimator = ObjectAnimator.ofObject(stickyLayout,
                        "backgroundColor",
                        new ArgbEvaluator(),
                        0xFFFFFFFF,
                        0xff78c5f9);

编辑： 由于我们大多数人都不清楚，假设我们需要在 seekbar 更新值上使用 alpha 更改此颜色，上面提到的解决方案有些工作但不像预期的那样使用 alpha.. .有什么建议吗？

Answer 1

您可以使用不同的 evaluator or animate alpha independently with AnimatorSet。

Answer 2

这是我目前找到的有效代码：

    /**
     * Initialise header color while translate animation
     */
    private void initHeaderColor(int startColor, int endColor) {

        initR = Color.red(startColor);
        initG = Color.green(startColor);
        initB = Color.blue(startColor);
        initAlpha = Color.alpha(startColor);

        endR = Color.red(endColor);
        endG = Color.green(endColor);
        endB = Color.blue(endColor);
        endAlpha = Color.alpha(endColor);
    }

并设置您想要的偏移量。

   /**
     * Translate header view component
     * @param slideOffset
     */
    private void translateHeaderView(float slideOffset) {

            finalR = (int) (initR + (endR - initR) * slideOffset);
            finalG = (int) (initG + (endG - initG) * slideOffset);
            finalB = (int) (initB + (endB - initB) * slideOffset);
            finalAlpha = (int) (initAlpha + (endAlpha - initAlpha) * slideOffset);

            int color = Color.argb(finalAlpha, finalR, finalG, finalB);
            fmActionBar.setBackgroundColor(color);
        }

Answer 3

我使用静态辅助方法来插入两种颜色。

public static int interpolateColor(int colorA, int colorB, float proportion) {
float[] hsva = new float[3];
float[] hsvb = new float[3];
Color.colorToHSV(colorA, hsva);
Color.colorToHSV(colorB, hsvb);
for (int i = 0; i < 3; i++) {
  hsvb[i] = interpolate(hsva[i], hsvb[i], proportion);
}
int alpha1 = Color.alpha(colorA);
int alpha2 = Color.alpha(colorB);
int newAlpha = interpolate(alpha1, alpha2, proportion);
return Color.HSVToColor(newAlpha, hsvb);  }

还有插值方法：

private static float interpolate(float a, float b, float proportion) {
return (a + ((b - a) * proportion)); }

此方法为 0-1 之间的比例值提供正确的颜色，其中 0 表示颜色 A 完全可见，1 表示颜色 B 完全可见。

然后您可以使用 ValueAnimator 添加 onUpdateListener 并获取 animationPercentage 并将其作为比例传递给插值方法。

如您所见，我也将 alpha 值添加到该方法中。

Answer 4

您并不真的需要这些方法：initHeaderColor & translateHeaderView。

将 ArgbEvaluator 定义为 class 成员：

ArgbEvaluator mArgbEvaluator;

// define start & end colors
int mStartColor, mEndColor;

// initialize start & end colors

使用参数(slideOffset, startColor, endColor)调用ArgbEvaluator的evaluate方法，将return值转换为Integer，并用它来设置fmActionBar的背景颜色:

void updateActionBarbgColor(float slideOffset) {
    if (mArgbEvaluator == null)
        mArgbEvaluator = new ArgbEvaluator();

    int bgColor = (Integer) mArgbEvaluator.evaluate(slideOffset, mStartColor, mEndColor);
    fmActionBar.setBackgroundColor(bgColor);
}

供参考，ArgbEvaluator#evaluate(...):

public Object evaluate(float fraction, Object startValue, Object endValue) {
    int startInt = (Integer) startValue;
    int startA = (startInt >> 24) & 0xff;
    int startR = (startInt >> 16) & 0xff;
    int startG = (startInt >> 8) & 0xff;
    int startB = startInt & 0xff;

    int endInt = (Integer) endValue;
    int endA = (endInt >> 24) & 0xff;
    int endR = (endInt >> 16) & 0xff;
    int endG = (endInt >> 8) & 0xff;
    int endB = endInt & 0xff;

    return (int)((startA + (int)(fraction * (endA - startA))) << 24) |
            (int)((startR + (int)(fraction * (endR - startR))) << 16) |
            (int)((startG + (int)(fraction * (endG - startG))) << 8) |
            (int)((startB + (int)(fraction * (endB - startB))));
}

Answer 5

ValueAnimator colorAnim = ObjectAnimator.ofInt(**myView**, "backgroundColor", Color.RED, Color.BLUE);
colorAnim.setDuration(3000);
colorAnim.setEvaluator(new ArgbEvaluator());
colorAnim.setRepeatCount(ValueAnimator.INFINITE);
colorAnim.setRepeatMode(ValueAnimator.REVERSE);
colorAnim.start();

其中 myView 是您要应用动画的视图

Answer 6

使用Color.parseColor代替直接0x值。 Kotlin 中的代码示例

val objectAnimator = ObjectAnimator.ofObject(my_2_text, "backgroundColor",  ArgbEvaluator(),
    Color.parseColor("#FFFFFFFF"), Color.parseColor("#FF78c5f9"))

使用 alpha 动画更改视图颜色

Change View Color with alpha animation

android

background-color

android-animation