效果图
这里首先我们我们做一个波波,思路是这样:①设置圆圈的画笔②绘制图片到中心位置,并设置波的大小为图片宽度的一半③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);
}
}