android 仿微信雷达扫描

来源：互联网发布：产品经理和数据分析编辑：程序博客网时间：2024/04/19 02:26

背景
看到csdn,上有同学贴出来一个仿微信雷达扫描效果，但是仔细看了下，似乎不是那么回事，与其说是实现效果，其中使用了图片的旋转来实现渐变效果，不利于复用；那么用代码如何来实现渐变效果尼？

1.首先我们先看看SweepGradient
这里写图片描述

public SweepGradient (float cx, float cy, int[] colors, float[] positions)
public SweepGradient (float cx, float cy, int color0, int color1)
cx,扫描圆心X坐标
cy,扫描圆心Y坐标
colors/color0,渐变初始颜色
color1,渐变末端颜色

2.如何使用，直接放代码
public class RadaSweepView extends View {
private int mwidth;
private int mheight;
private Paint mframePiant = new Paint();
private Paint mradaPiant = new Paint();
private Paint mtextPaint = new Paint();
private int mframeColor = Color.WHITE;
private int mtextColor = Color.BLUE;
private int mradaRar;
private int sweepAngle = 1;
private Matrix matrix;
public RadaSweepView(Context context, AttributeSet attrs) {
super(context, attrs);
// TODO Auto-generated constructor stub
// 初始化画笔
setUpPaint();
setBackgroundColor(Color.BLACK);
// 开始扫描
post(new SweepRunable());
}

@Overrideprotected void onDraw(Canvas canvas) {    // TODO Auto-generated method stub

// 绘制十字，圆形，背景
drawFrame(canvas);
// 绘制渐变圆形
drawRadaSweep(canvas);
super.onDraw(canvas);

}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {    // TODO Auto-generated method stub    super.onMeasure(widthMeasureSpec, heightMeasureSpec);   // 测量控件尺寸，计算半径    mwidth = getMeasuredWidth();    mheight = getMeasuredHeight();    mradaRar = (mwidth >= mheight ? mheight / 2 : mwidth / 2);}/** * 画十字、圆环框架， */private void drawFrame(Canvas canvas) {    canvas.drawLine(mwidth / 2, 0, mwidth / 2, mheight, mframePiant);    canvas.drawLine(0, mheight / 2, mwidth, mheight / 2, mframePiant);    canvas.drawCircle(mwidth / 2, mheight / 2, mradaRar, mframePiant);    canvas.drawCircle(mwidth / 2, mheight / 2, mradaRar*3 / 4, mframePiant);    canvas.drawCircle(mwidth / 2, mheight / 2, mradaRar / 2, mframePiant);    canvas.drawCircle(mwidth / 2, mheight / 2, mradaRar / 4, mframePiant);}/** * 画雷达扫描 */private void drawRadaSweep(Canvas canvas) {    RectF oval = new RectF(0, (mheight / 2) - mradaRar, mwidth, mheight / 2 + mradaRar);

//设置渐变效果
SweepGradient mShader = new SweepGradient(mwidth / 2, mheight / 2, Color.TRANSPARENT, Color.parseColor(“#AAAAAAAA”));
mradaPiant.setShader(mShader);
canvas.concat(matrix);
canvas.drawCircle(mwidth/2, mheight/2, mradaRar, mradaPiant);
float stopx = (float) (mwidth / 2 +mradaRar * Math.sin(sweepAngle));
float stopy = (float) (mheight / 2 +mradaRar * Math.cos(sweepAngle));

    mtextPaint.setColor(mtextColor);

// canvas.drawLine(mwidth / 2, mheight / 2, stopx, stopy, mtextPaint);

}/** * 初始化，画笔 */private void setUpPaint() {    mframePiant.setAntiAlias(true);    mtextPaint.setAntiAlias(true);    mradaPiant.setAntiAlias(true);    mframePiant.setColor(mframeColor);    mframePiant.setStyle(Style.STROKE);}class SweepRunable implements Runnable {    @Override    public void run() {        synchronized (RadaSweepView.this) {            sweepAngle += 5;            mtextColor+=50;

// 设置旋转矩阵，
matrix=new Matrix();
// 1.当前旋转的角度2.旋转中心坐标x,3旋转中心坐标y
matrix.postRotate(sweepAngle,mwidth/2,mheight/2);

            postDelayed(this, 250);            invalidate();        }    }}

}
3 结果展示
扫描的渐变效果很明显，改天来补图

0 0