自定义控件之实现雷达扫描效果"/>
android 扫描动画效果图,Android 自定义控件之实现雷达扫描效果
效果图:
实现步骤:
画圆
// 获取宽高
w = context.getResources().getDisplayMetrics().widthPixels;
h = context.getResources().getDisplayMetrics().heightPixels; // 初始化画笔
mCirclePaint = new Paint();
mCirclePaint.setColor(Color.WHITE);
mCirclePaint.setStrokeWidth(3);//画的宽度
mCirclePaint.setStyle(Paint.Style.STROKE);
mCirclePaint.setAntiAlias(true);
// 画4个不能半径的圆
canvas.drawCircle(w / 2, h / 2, w / 6, mCirclePaint);
canvas.drawCircle(w / 2, h / 2, w / 3, mCirclePaint);
canvas.drawCircle(w / 2, h / 2, 11 * w / 20, mCirclePaint);
canvas.drawCircle(w / 2, h / 2, 7 * h / 16, mCirclePaint);
画中心位置头像图片
// 获取头像图片
mBitmap = ((BitmapDrawable) getResources().getDrawable(R.drawable.p)).getBitmap();
image_half_width = ((w / 6) * 1) / 2;// 图片设置成最小圆的一半,这是图片的半径
// 图片缩放比例
float sx = (float) 2 * image_half_width / mBitmap.getWidth();// 图片显示的宽度/原图宽度
float sy = (float) 2 * image_half_width / mBitmap.getHeight();
// 缩小图片
Matrix matrix = new Matrix();
matrix.setScale(sx, sy);
mBitmap = Bitmap.createBitmap(mBitmap, 0, 0, mBitmap.getWidth(),
mBitmap.getHeight(), matrix, false);// 显示的图片,绘制的左上角坐标(中心点的坐标减去图片的半径),画笔
canvas.drawBitmap(mBitmap, w / 2 - image_half_width, h / 2 - image_half_width, null);// 这里不需要笔,就是一个图
扫描效果的实现
原理就是画一个这样渐变的图片旋转即可实现此扫描效果
点击波浪效果(暂未写)
源码下载地址
.git
/**
* 雷达UI
*
*@author admin
*
*/
public class Radar extends View {
private int w, h;// 宽高
private Paint mCirclePaint;// 圆的画笔
Bitmap mBitmap;// 显示在中心的图片
private int image_half_width;// 图片的半径
private Paint mGradientCirclePaint;// 渐变圆的笔
Handler mHandler = new Handler();
Matrix matrix;//矩阵
private float degrees = 0;
private long delayMillis = 20;
//子线程实现旋转效果
private Runnable runnable = new Runnable() {
@Override
public void run() {
//旋转
matrix.postRotate(++degrees, w/2, h/2);
Radar.this.invalidate();
mHandler.postDelayed(runnable, delayMillis);
}
};
public Radar(Context context, AttributeSet attrs) {
super(context, attrs);
// setBackgroundResource(resid);
// 获取宽高
w = context.getResources().getDisplayMetrics().widthPixels;
h = context.getResources().getDisplayMetrics().heightPixels;
matrix = new Matrix();
// 初始化画笔
mCirclePaint = new Paint();
mCirclePaint.setColor(Color.WHITE);
mCirclePaint.setStrokeWidth(3);//画的宽度
mCirclePaint.setStyle(Paint.Style.STROKE);
mCirclePaint.setAntiAlias(true);
// 获取头像图片
mBitmap = ((BitmapDrawable) getResources().getDrawable(R.drawable.p))
.getBitmap();
image_half_width = ((w / 6) * 1) / 2;// 图片设置成最小圆的一半,这是图片的半径
// 图片缩放比例
float sx = (float) 2 * image_half_width / mBitmap.getWidth();// 图片显示的宽度/原图宽度
float sy = (float) 2 * image_half_width / mBitmap.getHeight();
// 缩小图片
Matrix matrix = new Matrix();
matrix.setScale(sx, sy);
mBitmap = Bitmap.createBitmap(mBitmap, 0, 0, mBitmap.getWidth(),
mBitmap.getHeight(), matrix, false);
//着色器
Shader mShader = new SweepGradient(w / 2, h / 2, Color.TRANSPARENT,
Color.parseColor("#AAAAAAAA"));
mGradientCirclePaint = new Paint();
mGradientCirclePaint.setColor(Color.WHITE);
// mGradientCirclePaint.setStrokeWidth(3);
mGradientCirclePaint.setStyle(Paint.Style.FILL);// 实心
mGradientCirclePaint.setAntiAlias(true);
mGradientCirclePaint.setShader(mShader);
mHandler.post(runnable);
}
// 重写绘制方法
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// 画4个不能半径的圆
canvas.drawCircle(w / 2, h / 2, w / 6, mCirclePaint);
canvas.drawCircle(w / 2, h / 2, w / 3, mCirclePaint);
canvas.drawCircle(w / 2, h / 2, 11 * w / 20, mCirclePaint);
canvas.drawCircle(w / 2, h / 2, 7 * h / 16, mCirclePaint);
// 显示的图片,绘制的左上角坐标(中心点的坐标减去图片的半径),画笔
canvas.drawBitmap(mBitmap, w / 2 - image_half_width, h / 2
- image_half_width, null);// 这里不需要笔,就是一个图
// 画渐变 的圆
canvas.concat(matrix);
canvas.drawCircle(w/2, h/2, 7 * h / 16, mGradientCirclePaint);
matrix.reset();
}
//实现点击波浪效果
@Override
public boolean onTouchEvent(MotionEvent event) {
return super.onTouchEvent(event);
}
}
更多推荐
android 扫描动画效果图,Android 自定义控件之实现雷达扫描效果
发布评论