这篇博客的效果是我仿照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);
}
}
这部分就是重点了,光圈扩散本质就是不断的绘制圆形,波浪效果则是根据正弦函数来绘制,最近发生的事有点多。。自己也是懒了很多,希望大家都要加油,我自己也要再加一把油!