[Android高级动画] 如何实现水波纹效果？

如何实现水波纹效果？

like this:

效果图

原理分析：
画一个空心圆，让它的半径从0不断变大。

核心代码：

//绘制空心圆
float strokeWidth = mDistance - mCurrentHoleRadius;
float radius = strokeWidth /2 + mCurrentHoleRadius;
mPaint.setStrokeWidth(strokeWidth);
canvas.drawCircle(mCenterX,mCenterY,radius,mPaint);

使用属性动画，变化半径值：

ValueAnimator mAnimator = ValueAnimator.ofFloat(0,mDistance);
mAnimator.setDuration(1000);
//LinearInterpolator以常量速率改变
mAnimator.setInterpolator(new LinearInterpolator());
mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator animation) {
        mCurrentHoleRadius = (float)animation.getAnimatedValue();
        invalidate();
    }
});

mAnimator.start();

以后就可以实现水波纹效果了。

附上完整的代码：

package com.example.bezier;

import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.view.animation.LinearInterpolator;

import androidx.annotation.Nullable;

public class WaterView extends View {
    public WaterView(Context context) {
        this(context,null);
    }

    public WaterView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs,0);
    }

    public WaterView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

    }



    private Paint mPaint = new Paint();

    //旋转圆的中心坐标
    private float mCenterX;
    private float mCenterY;


    private float mDistance;

    private float mCurrentHoleRadius;
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mCenterX = w * 1f /2;
        mCenterY = h * 1f/2;

        //Math.hypot(x,y); 根据x、y两条边长，求其斜边的长度
        mDistance = (float) Math.hypot(w,h) / 2 ;
        Log.d("WaterView","onSizeChanged | mDistance-->"+mDistance);
        init();
    }


    private void init(){

        mPaint.setColor(Color.WHITE);
        mPaint.setStyle(Paint.Style.STROKE);


        ValueAnimator mAnimator = ValueAnimator.ofFloat(0,mDistance);
        mAnimator.setDuration(1000);
        //LinearInterpolator以常量速率改变
        mAnimator.setInterpolator(new LinearInterpolator());
        mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mCurrentHoleRadius = (float)animation.getAnimatedValue();
                Log.d("WaterView","onAnimationUpdate | mCurrentHoleRadius-->"+mCurrentHoleRadius);
                invalidate();
            }
        });

        mAnimator.start();
    }

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

        canvas.drawColor(Color.GRAY);

        //绘制空心圆
        float strokeWidth = mDistance - mCurrentHoleRadius;
        float radius = strokeWidth /2 + mCurrentHoleRadius;

        mPaint.setStrokeWidth(strokeWidth);

        canvas.drawCircle(mCenterX,mCenterY,radius,mPaint);
    }
}