android - 如何动画渐变？

Question

如何设置从颜色#1 到颜色#2 的渐变动画？类似于

我打算将它用作单位的生命条(因此，它将是从绿色开始到红色结束的有限动画)

Answer 1

在谷歌搜索时，我发现了两种适用于 android 的方法:use ShaderFactory或使用 new Shader(new LinearGradient()) 扩展 View。两个答案都是一样的——调用 new Shader() 每次 View.onDraw(Canvas canvas) 方法的调用。如果此类动画渐变的数量超过 ~3 个，它真的很昂贵。

所以我换了一种方式。我避免在每次 onDraw() 时调用 new，使用单个预先计算的 LinearGradient。这就是它的样子(gif，所以动画衰减):

诀窍是创建 LinearGradient，它是 colorsCount 倍于 View.getWidth()。之后，您可以使用 canvas.translate()，在绘制渐变时更改其颜色，因此 onDraw() 中没有 new 调用全部。

要创建渐变，您需要当前的宽度和高度。我是在 onSizeChanged() 中完成的。我也在这里设置了Shader。

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);

    width = getWidth();
    height = getHeight();

    LinearGradient gradient = new LinearGradient(
            0, height / 2, width * colors.length - 1, height / 2,
            colors, null, Shader.TileMode.REPEAT);
    fillPaint.setShader(gradient);

    shapePath = getParallelogrammPath(width, height, sidesGap);
    shapeBorderPath = getParallelogrammPath(width, height, sidesGap);
}

我使用路径是因为平行四边形 View ，你可以使用任何你想要的。在实现绘图时，您应该注意两件事:您需要在当前偏移量上translate() 整个canvas 和offset() 填充形状:

@Override
protected void onDraw(Canvas canvas) {
    canvas.save();
    canvas.translate(-gradientOffset, 0);
    shapePath.offset(gradientOffset, 0f, tempPath);
    canvas.drawPath(tempPath, fillPaint);
    canvas.restore();

    canvas.drawPath(shapeBorderPath, borderPaint);

    super.onDraw(canvas); // my View is FrameLayout, so need to call it after
}

您还应该使用 canvas.save() 和 canvas.restore()。它将保存 Canvas 的内部矩阵进行堆叠并相应地恢复它。

因此，您最后需要做的是为 gradientOffset 设置动画。你可以使用任何你想要的东西，比如 ObjectAnimator (Property Animation) .我用了TimeAnimator ，因为我需要直接控制 updateTick 和起始偏移量。这是我的实现(有点困难和苛刻):

static public final int LIFETIME_DEAFULT = 2300;
private long lifetime = LIFETIME_DEAFULT, updateTickMs = 25, timeElapsed = 0;
private long accumulatorMs = 0;
private float gradientOffset = 0f;

public void startGradientAnimation() {
    stopGradientAnimation();
    resolveTimeElapsed();

    final float gradientOffsetCoef = (float) (updateTickMs) / lifetime;
    final int colorsCount = this.colors.length - 1;
    gradientAnimation.setTimeListener(new TimeAnimator.TimeListener() {
        @Override
        public void onTimeUpdate(TimeAnimator animation, long totalTime, long deltaTime) {
            final long gradientWidth = width * colorsCount;
            if (totalTime > (lifetime - timeElapsed)) {
                animation.cancel();
                gradientOffset = gradientWidth;
                invalidate();
            } else {
                accumulatorMs += deltaTime;

                final long gradientOffsetsCount = accumulatorMs / updateTickMs;
                gradientOffset += (gradientOffsetsCount * gradientWidth) * gradientOffsetCoef;
                accumulatorMs %= updateTickMs;

                boolean gradientOffsetChanged = (gradientOffsetsCount > 0) ? true : false;
                if (gradientOffsetChanged) {
                    invalidate();
                }
            }
        }
    });

    gradientAnimation.start();
}

您可以找到完整的查看代码here