如何在Android中的画布上绘制文本的不同部分？

Question

我正在尝试重新创建以下动画：

可以在此处访问动画GIF：https://github.com/ugomeda/d3-liquid-fill-gauge

在这个动画中，随着波浪的上升和下降，文本的颜色会发生变化：波浪上方的文字部分为深蓝色，波浪下方的部分为浅蓝色。有没有办法在Android中实现这个？

我完全按照上图所示实现了动画的其余部分：

这是我在画布上绘制的代码：

public void createShader(){

    mDefaultAngularFrequency = 2.0f * Math.PI / DEFAULT_WAVE_LENGTH_RATIO / getWidth();
    mDefaultAmplitude = (getHeight()) * DEFAULT_AMPLITUDE_RATIO;
    mDefaultWaterLevel = (getHeight())  * DEFAULT_WATER_LEVEL_RATIO;
    mDefaultWaveLength = getWidth();

    Bitmap bitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(bitmap);

    final int endX = getWidth() + 1;
    final int endY = getHeight() + 1;

    float[] waveY = new float[endX];

    for (int beginX = 0; beginX < endX; beginX++) {
        double wx = beginX * mDefaultAngularFrequency;
        float beginY = (float) (mDefaultWaterLevel + mDefaultAmplitude * Math.sin(wx));
        canvas.drawLine(beginX, beginY, beginX, endY, mWavePaint);

        waveY[beginX] = beginY;
    }

    mWaveShader = new BitmapShader(bitmap, Shader.TileMode.REPEAT, Shader.TileMode.CLAMP);
    mWavePaint.setShader(mWaveShader);

}

protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    // Draw the outer circle
    canvas.drawCircle(getWidth()/2, getHeight()/2, getWidth()/2 - 15, mCirclePaint);

    if (mWavePaint.getShader() == null) {
        createShader();
        mWavePaint.setShader(mWaveShader);
    }

    // scale shader according to mWaveLengthRatio and mAmplitudeRatio
    // this decides the size(mWaveLengthRatio for width, mAmplitudeRatio for height) of waves
    mShaderMatrix.setScale(mWaveLengthRatio / DEFAULT_WAVE_LENGTH_RATIO, mAmplitudeRatio / DEFAULT_AMPLITUDE_RATIO,
            0, mDefaultWaterLevel);
    // translate shader according to mWaveShiftRatio and mWaterLevelRatio
    // this decides the start position(mWaveShiftRatio for x, mWaterLevelRatio for y) of waves

    mShaderMatrix.postTranslate(mWaveShiftRatio * getWidth(),
            (DEFAULT_WATER_LEVEL_RATIO - mWaterLevelRatio) * getHeight());

    // assign matrix to invalidate the shader
    mWaveShader.setLocalMatrix(mShaderMatrix);

    //draw the inner circle
    float innerCircleRadius = getWidth()/2 - 30;
    canvas.drawCircle(getWidth() / 2f, getHeight() / 2f, innerCircleRadius, mWavePaint);

    //draw the text inside the circles
    canvas.drawText(String.format("%.0f", mPercentageValue) + "%", getWidth() / 2 - 10,
            (getHeight() - mTextPaint.ascent()) / 2, mTextPaint);

}

这是我在MainActivity中设置波形动画的代码：

ObjectAnimator waveShiftAnim = ObjectAnimator.ofFloat(l, "waveShiftRatio", 0f, 0.5f);
    waveShiftAnim.setRepeatCount(ValueAnimator.INFINITE);
    waveShiftAnim.setDuration(mWaveAnimDuration);
    waveShiftAnim.setInterpolator(new LinearInterpolator());
    animators.add(waveShiftAnim);