转载请注明出处:http://blog.csdn.net/xiaohao0724/article/details/54572605
上一篇我们实现了点击屏幕以点击的这个点为圆心画圆并放大,现在我们对上篇进一步加深自定义水波纹效果。
效果图如下:
1、定义一个自定义View和水波纹类,并在构造方法里面初始化水波纹类集合
public class RingWaveView extends View {
public RingWaveView(Context context, AttributeSet attrs) {
super(context, attrs);
ringWaveViewList = new ArrayList<RingWaveView.Wave>();
}
/**
* 定义一个波浪
*/
private class Wave {
int cx; // 圆心横坐标
int cy; // 圆心纵坐标
Paint paint; // 画笔
int radius; // 半径
}
}
2、重写onTouchEvent方法确定水波纹的圆心和半径
@Override
public boolean onTouchEvent(MotionEvent event) {
super.onTouchEvent(event);
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
case MotionEvent.ACTION_MOVE:
int x = (int) event.getX();
int y = (int) event.getY();
addPoint(x, y);
break;
default:
break;
}
return true;
}
/**
* 添加新的波浪中心点
*
* @param x
* @param y
*/
private void addPoint(int x, int y) {
if (ringWaveViewList.size() == 0) {
addPoint2List(x, y);
/*
* 第一次启动动画
*/
isRunning = true;
handler.sendEmptyMessage(0);
} else {
Wave wave = ringWaveViewList.get(ringWaveViewList.size() - 1);
//判断当手指滑动与上一个圆环相差20px时再添加新的圆环
if (Math.abs(wave.cx - x) > DIS_SOLP
|| Math.abs(wave.cy - y) > DIS_SOLP) {
addPoint2List(x, y);
}
}
;
}
/**
* 添加新的波浪
*
* @param x
* @param y
*/
private void addPoint2List(int x, int y) {
Wave wave = new Wave();
wave.cx = x;
wave.cy = y;
Paint paint = new Paint();
paint.setColor(colors[(int) (Math.random() * 5)]);
paint.setAntiAlias(true);
paint.setStyle(Style.STROKE);
wave.paint = paint;
ringWaveViewList.add(wave);
}
3、重写onDraw方法绘制水波纹
@Override
protected void onDraw(Canvas canvas) {
for (int i = 0; i < ringWaveViewList.size(); i++) {
Wave wave = ringWaveViewList.get(i);
canvas.drawCircle(wave.cx, wave.cy, wave.radius, wave.paint);
}
}
4、根据手机触摸移动通过Handler发消息刷新数据重绘水波纹
private Handler handler = new Handler() {
public void handleMessage(android.os.Message msg) {
// 刷新数据
flushData();
// 刷新页面
invalidate();
// 循环动画
if (isRunning) {
handler.sendEmptyMessageDelayed(0, 50);
}
};
};
/**
* 刷新数据
*/
private void flushData() {
for (int i = 0; i < ringWaveViewList.size(); i++) {
Wave wave = ringWaveViewList.get(i);
// 如果透明度为 0 从集合中删除
int alpha = wave.paint.getAlpha();
if (alpha == 0) {
ringWaveViewList.remove(i); // 删除i 以后,i的值应该再减1
i--;
// 否则会漏掉一个对象,不过,在此处影响不大,效果上看不出来。
continue;
}
alpha -= 5;
if (alpha < 5) {
alpha = 0;
}
// 降低透明度
wave.paint.setAlpha(alpha);
// 扩大半径
wave.radius = wave.radius + 4;
// 设置半径厚度
wave.paint.setStrokeWidth(wave.radius / 4);
}
/*
* 如果集合被清空,就停止刷新动画
*/
if (ringWaveViewList.size() == 0) {
isRunning = false;
}
}
OK,大功告成,有没有很炫的赶脚