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

来源：互联网发布：淘宝怎样能排名靠前编辑：程序博客网时间：2024/05/18 17:27

这篇博客的效果是我仿照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完成动态效果

@Overrideprotected 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);}}

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

项目源码

0 0