Android 实现歌词变红效果

效果：

代码：

public class AnimateLoadingTextView extends View {
    private Paint mPaint;
    private Paint mPaintOver;

    private float animValue;
    private int w;
    private int h;
    private float curW;

    public AnimateLoadingTextView(Context context) {
        this(context,null);
    }

    public AnimateLoadingTextView(Context context, AttributeSet attrs) {
        this(context, attrs,0);
    }

    public AnimateLoadingTextView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(2);
        mPaint.setTextSize(30);
        mPaint.setColor(Color.BLACK);


        mPaintOver = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaintOver.setStyle(Paint.Style.STROKE);
        mPaintOver.setStrokeWidth(2);
        mPaintOver.setTextSize(30);
        mPaintOver.setColor(Color.RED);


        //还记得这个动画吧，让线从无到有的动画
        ValueAnimator animator = ValueAnimator.ofFloat(0,1);
        animator.setDuration(5000);
        animator.setRepeatCount(0);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                animValue = (float)animation.getAnimatedValue();

                curW = animValue * w;
                invalidate();
            }
        });
        animator.start();

    }

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

        canvas.drawText("人生好比海上的波浪,are you ok?",20,h/2,mPaint);
        canvas.clipRect(new RectF(0,0,curW,h));

        canvas.drawText("人生好比海上的波浪,are you ok?",20,h/2,mPaintOver);

    }

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

    }
}

原理：

我们使用 canvas.clipRect 裁剪画布，这样就可以出现文字只绘制了一半的效果。