android自定义 水波纹呼吸

效果图

1、2、3、

功能说明

主要实现从小圆变成大圆然后恢复小圆 

参数说明 

innnerPaint：内部圆画笔
outPaint：外部圆画笔
wHeight：手机屏幕高度
wWidth：手机屏幕宽度
scale：圆形增加的尺度

方法介绍

getWindowWh：主要获取屏幕宽度与高度

实例演示

下面通过代码来演示如何在画布上绘制圆形。

protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    Log.i("ggg","   "+wWidth);
    Log.i("ggg","   "+wHeight);
    canvas.drawCircle(wWidth/2,wHeight/2,100+scale*3,outPaint);
    canvas.drawCircle(wWidth/2,wHeight/2,30+scale,innnerPaint);

}

drawCircle 方法的

第一个参数为x坐标

第二个参数为y坐标

第三个参数为圆形的半径 

第四个参数为绘制的画笔

如何实现让圆形不断变大

通过属性动画不断改变scale的值

ValueAnimator anim = ValueAnimator.ofInt(0,40);
anim.setDuration(2000);
anim.setRepeatCount(INFINITE);
anim.setRepeatMode(Animation.REVERSE);
anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator animation) {
         scale = (int) animation.getAnimatedValue();
         invalidate();
        Log.d("ggg", "cuurent value is " + scale);
    }
});
anim.start();

最主要的方式是改变值之后记得调用invalidate 方法 让自定义view 重新执行 

onDraw方法。

完整代码

public class WaveView extends View {
    private Paint innnerPaint;
    private Paint outPaint;
    private int wHeight;
    private int wWidth;
    private int scale;

    public WaveView(Context context) {
        super(context);
        initPaint();
    }

    private void initPaint() {
        innnerPaint=new Paint(Paint.ANTI_ALIAS_FLAG);
        innnerPaint.setColor(Color.parseColor("#0707f5"));
        outPaint=new Paint(Paint.ANTI_ALIAS_FLAG);
        outPaint.setColor(Color.parseColor("#3385ff"));
    }

    public WaveView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        initPaint();
        getWindowWh(context);
        ValueAnimator anim = ValueAnimator.ofInt(0,40);
        anim.setDuration(2000);
        anim.setRepeatCount(INFINITE);
        anim.setRepeatMode(Animation.REVERSE);
        anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                 scale = (int) animation.getAnimatedValue();
                 invalidate();
                Log.d("ggg", "cuurent value is " + scale);
            }
        });
        anim.start();
    }

    public WaveView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initPaint();
        getWindowWh(context);

    }
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

    }
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Log.i("ggg","   "+wWidth);
        Log.i("ggg","   "+wHeight);
        canvas.drawCircle(wWidth/2,wHeight/2,100+scale*3,outPaint);
        canvas.drawCircle(wWidth/2,wHeight/2,30+scale,innnerPaint);

    }
    private void getWindowWh(Context context){
        WindowManager wm = (WindowManager) context
                .getSystemService(Context.WINDOW_SERVICE);
         wWidth = wm.getDefaultDisplay().getWidth();
         wHeight = wm.getDefaultDisplay().getHeight();

    }
}