使用Alpha动画更改视图颜色

Question

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

我尝试过

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

编辑：由于我们大多数人不清楚，因此假设我们需要在上述解决方案的搜索栏更新值上使用alpha更改此颜色，但是对于alpha而言，这不是预期的...任何建议？

Answer 1

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 2

您实际上并不需要以下方法：initHeaderColor和translateHeaderView。

将ArgbEvaluator定义为类成员：

ArgbEvaluator mArgbEvaluator;

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

// initialize start & end colors

使用参数evaluate调用ArgbEvaluator的(slideOffset, startColor, endColor)方法，将返回值强制转换为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 3

您可以单独使用不同的evaluator或使用AnimatorSet设置Alpha动画。

Answer 4

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

    /**
     * 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 5

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

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表示colorA完全可见，而1表示colorB完全可见。

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

您可以看到，我也将alpha值添加到了方法中。

Answer 6

使用Color.parseColor，而不是直接使用0x值。虽然在Kotlin中的代码示例

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