Android 自定义View学习(4)波浪效果+光圈扩散效果

这篇博客的效果是我仿照WPJY大神的一篇博客做的，加入了一些我自己的改动

先来看下效果

效果图上可能有些卡,但实际运行很流畅

 

上代码喽~~

/**
	 * 外层的几层光环
	 */
	private Paint circlePaint;
	/**
	 * 波浪
	 */
	private Paint wavePaint;
	/**
	 * 振幅
	 */
	private int angle = 0;
	/**
	 * 容器
	 */
	private Paint containPaint;
	/**
	 * 半径
	 */
	private int cirRadius;
	/**
	 * 百分比
	 */
	private int firstCount = 1;
	private boolean isAdd = true;
	private boolean isReduce;

这部分没什么说的

Handler handler = new Handler() {
		public void handleMessage(android.os.Message msg) {
			if (msg.what == 1) {
				invalidate();
				angle++;
				if (angle == 360) {
					angle = 0;
				}
				handler.sendEmptyMessageDelayed(1, 1);
			} else {
				// 判断是否达到最大，达到最大时往回缩
				if (firstCount > 0 && isAdd) {
					firstCount++;
				}
				if (firstCount > 100 || isReduce) {
					isAdd = false;
					isReduce = true;
					firstCount--;
					if (firstCount <= 1) {
						isAdd = true;
						isReduce = false;
					}
				}
				handler.sendEmptyMessageDelayed(2, 15);
			}
		};
	};

	private void initView() {
		cirRadius = 200;
		circlePaint = new Paint();
		circlePaint.setColor(Color.WHITE);
		circlePaint.setStyle(Style.STROKE);
		circlePaint.setAntiAlias(true);
		circlePaint.setAlpha(50);
		wavePaint = new Paint(circlePaint);
		wavePaint.setStyle(Style.FILL);
		containPaint = new Paint(circlePaint);
		containPaint.setStrokeWidth(10);
		containPaint.setAntiAlias(true);
		containPaint.setAlpha(50);
		handler.sendEmptyMessage(1);
		handler.sendEmptyMessage(2);
	}

不断刷新UI完成动态效果

@Override
	protected void onDraw(Canvas canvas) {
		setBackgroundColor(getResources().getColor(R.color.holo_purple2));
		int height = getHeight();
		int width = getWidth();
		angle++;
		// 最小半径
		int radius = 7 * cirRadius / 10;
		// 最多能扩大多少
		float f1 = 3 * cirRadius / 10;
		// 计算百分比距离
		float f2 = f1 * firstCount / 100.0F;
		// 扩散光圈效果
		canvas.drawCircle(width / 2, height / 2, radius + f2, circlePaint);
		// 最小圆形
		canvas.drawCircle(width / 2, height / 2, radius, circlePaint);
		circlePaint.setAlpha(120);
		// 第二层圆形
		canvas.drawCircle(width / 2, height / 2, radius + 20, circlePaint);
		circlePaint.setAlpha(180);
		// 第三层圆形
		canvas.drawCircle(width / 2, height / 2, radius + 40, circlePaint);
		// 波浪的容器
		canvas.drawCircle(width / 2, height / 2, radius - 5, containPaint);
		// 绘制一个扇形
		RectF rectF = new RectF(width / 2 - radius, height / 2 - radius, width
				/ 2 + radius, height / 2 + radius);
		canvas.drawArc(rectF, 0, 180, true, wavePaint);
		double lineX = 0;
		double lineY = 0;
		// 根据正弦绘制波浪
		for (int i = width / 2 - radius; i < width / 2 + radius; i++) {
			lineX = i;
			lineY = 10 * Math.sin((i + angle) * Math.PI / 180) + getHeight()
					/ 2 + 40;
			canvas.drawLine((int) lineX, (int) (lineY - 70), (int) lineX + 1,
					(int) height / 2, wavePaint);
		}

	}

这部分就是重点了，光圈扩散本质就是不断的绘制圆形，波浪效果则是根据正弦函数来绘制，最近发生的事有点多。。自己也是懒了很多，希望大家都要加油，我自己也要再加一把油！

 

项目源码