自定义view——仿支付宝咻一咻

效果图

这里首先我们我们做一个波波，思路是这样：①设置圆圈的画笔②绘制图片到中心位置，并设置波的大小为图片宽度的一半③hanlder中设置波的半径不断变大，当半径大于画布宽度一半的时候设置半径为图片的宽度一半

public class XiuView2 extends View {
    private Paint paint;
    private Bitmap mBitmap;
    private int radius;
    private int bitmapWidth;
    private int bitmapHeight;
    private int width;
    public Handler handler = new Handler();
    Runnable runnable = new Runnable() {
        @Override
        public void run() {
            invalidate();
            if (radius >= width / 2) {
                radius = bitmapWidth/2;
            }else {
                radius+=3;
            }

            handler.postDelayed(runnable, 16);
        }

    };


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

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

    public XiuView2(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        //圆圈的画笔
        paint = new Paint(Paint.ANTI_ALIAS_FLAG);//抗锯齿
        paint.setStyle(Paint.Style.FILL);//实心
        mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.pay);
        bitmapWidth = mBitmap.getWidth();//图片的宽
        bitmapHeight = mBitmap.getHeight();//图片的高
        radius = bitmapWidth / 2;//半径
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //获取画布的宽和高
        width = canvas.getWidth();
        int height = canvas.getHeight();
        //设置图片在中间位置显示
        float x = (width - bitmapWidth) / 2;
        float y = (height - bitmapHeight) / 2;
        paint.setColor(Color.parseColor("#155c7c"));
        //画多个圆

        canvas.drawCircle(width / 2, height / 2, radius, paint);
        canvas.drawBitmap(mBitmap, x, y, null);

    }

    //提供方法给外部去调用
    public void start() {
        handler.post(runnable);
    }
}

绘制多个圈:思路：基于上面的步骤，①我们可以将半径添加到list集合中，在Runnable中根据当前时间减去之前的时间，如果大于500则添加半径到集合中②遍历所有集合中数据，如果大于画布的宽度的一半，则移除③在画多个波波的时候设置透明度变化，这里我设置默认的透明度是177，根据计算alpha= 177 - 177 * ((radius - bitmapWidth / 2) / (width / 2 - bitmapWidth / 2));

public class XiuView extends View {
    private Paint paint;
    private Bitmap mBitmap;
    private int radius;
    private int bitmapWidth;
    private int bitmapHeight;
    private int width;
    private int alpha;
    public Handler handler = new Handler();
    private List<Integer> radiuss = new ArrayList<>();
    private long current = System.currentTimeMillis();
    Runnable runnable = new Runnable() {
        @Override
        public void run() {
            invalidate();
            //隔一段时间增加一个波
            if (System.currentTimeMillis() - current > 500) {
                radiuss.add(bitmapWidth / 2);
                current = System.currentTimeMillis();
            }
            //半径递增
            for (int i = 0; i < radiuss.size(); i++) {
                radiuss.set(i, radiuss.get(i) + 3);//半径增加
            }
            //移除超过屏幕的波
            Iterator<Integer> iterator = radiuss.iterator();
            if (iterator.hasNext()) {
                Integer next = iterator.next();
                if (next >= width / 2) {
                    if (radiuss.contains(next)) {
                        //最后进行移除
                        iterator.remove();
                    }
                }
            }

            handler.postDelayed(runnable, 16);
        }

    };


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

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

    public XiuView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        //圆圈的画笔
        paint = new Paint(Paint.ANTI_ALIAS_FLAG);//抗锯齿
        paint.setStyle(Paint.Style.FILL);//实心
        mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.pay);
        bitmapWidth = mBitmap.getWidth();//图片的宽
        bitmapHeight = mBitmap.getHeight();//图片的高
        radius = bitmapWidth / 2;//半径
        radiuss.add(radius);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //获取画布的宽和高
        width = canvas.getWidth();
        int height = canvas.getHeight();
        //设置图片在中间位置显示
        float x = (width - bitmapWidth) / 2;
        float y = (height - bitmapHeight) / 2;
        paint.setColor(Color.parseColor("#155c7c"));
        //画多个圆
        for (int i = 0; i < radiuss.size(); i++) {
            int radius = radiuss.get(i);
            //对波进行透明度变化
            alpha = 177 - 177 * ((radius - bitmapWidth / 2) / (width / 2 - bitmapWidth / 2));
            paint.setAlpha(alpha);
            canvas.drawCircle(width / 2, height / 2, radius, paint);
        }
        canvas.drawBitmap(mBitmap, x, y, null);

    }
    //提供方法给外部去调用
    public void start() {
        handler.post(runnable);
    }
}