Android自定义控件之扫描动画UI

前言

最近有一个需求，就是做一个扫描的UI，看了很多扫描动画，发现酷狗的扫描动画挺漂亮的，所以就做了一个相似的扫描动画，废话不多说，先看一下最终的效果吧。

最终效果图

介绍

首先我们看一下这个效果，它由以下几部分组成： 1.中间一个音符图片 2.在音符图片外面画了三个圆环 3.一个旋转的扇形动画 既然知道它的结构那就来一步一步实现它吧。

准备

@Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); viewSize = 600; setMeasuredDimension(viewSize, viewSize); } /** * 从资源中解码bitmap */ private void initBitmap() { bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.music_note); }

在这里为了方便直接把视图的长宽设置为600，实际应用中可以自己去定制，但是长宽要一样，然后就是在构造的时候解码一下资源文件中的音符图片。然后就可以开始绘图了。

绘图

@Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); Paint mPaint = new Paint(); Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight()); Rect rectd = new Rect((viewSize / 10) * 4, (viewSize / 10) * 4, viewSize - (viewSize / 10) * 4, viewSize - (viewSize / 10) * 4); canvas.drawBitmap(bitmap, rect, rectd, mPaint); circlePaint = new Paint(); circlePaint.setStyle(Paint.Style.STROKE); circlePaint.setAntiAlias(true); circlePaint.setStrokeWidth((viewSize / 10)); circlePaint.setColor(Color.parseColor("#DDFA7298")); canvas.drawCircle(viewSize / 2, viewSize / 2, (viewSize / 10) * 2.5f, circlePaint); circlePaint.setColor(Color.parseColor("#AAFA7298")); canvas.drawCircle(viewSize / 2, viewSize / 2, (viewSize / 10) * 3.5f, circlePaint); circlePaint.setColor(Color.parseColor("#66FA7298")); canvas.drawCircle(viewSize / 2, viewSize / 2, (viewSize / 10) * 4.5f, circlePaint); sectorPaint = new Paint(); sectorPaint.setAntiAlias(true); sectorPaint.setStyle(Paint.Style.STROKE); sectorPaint.setStrokeWidth((viewSize / 10) * 3); Shader sectorShader = new SweepGradient(viewSize / 2, viewSize / 2, new int[]{Color.TRANSPARENT, 0x00FA7298, 0xFFFA7298}, new float[]{0, 0.875f, 1f}); sectorPaint.setShader(sectorShader); if (threadFlag) { canvas.concat(matrix); canvas.drawCircle(viewSize / 2, viewSize / 2, (viewSize / 10) * 3.5f, sectorPaint); } }

这一段有点长，一个一个看，第一部分是画图片

Paint mPaint = new Paint(); Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight()); Rect rectd = new Rect((viewSize / 10) * 4, (viewSize / 10) * 4, viewSize - (viewSize / 10) * 4, viewSize - (viewSize / 10) * 4); canvas.drawBitmap(bitmap, rect, rectd, mPaint);

在这里我们的目的是把整张图画进整张图的最中心，这里使用的是drawBitmap(Bitmap,Rect,Rect,Paint);这个方法。画这张图片需要创建两个Rect，第一个Rect 代表要绘制的bitmap 区域，第二个 Rect 代表的是要将bitmap 绘制在屏幕的什么地方。所以这里第一个Rect我们 取值为整个Bitmap 区域 ，第二个Rect我们取值为view的五等分圆环由内向外第二圆环的外接正方形状，说的这么绕，大家仔细看下应该不难，也就是下图中的蓝色矩形。

circlePaint = new Paint(); circlePaint.setStyle(Paint.Style.STROKE); circlePaint.setAntiAlias(true); circlePaint.setStrokeWidth((viewSize / 10)); circlePaint.setColor(Color.parseColor("#DDFA7298")); canvas.drawCircle(viewSize / 2, viewSize / 2, (viewSize / 10) * 2.5f, circlePaint); circlePaint.setColor(Color.parseColor("#AAFA7298")); canvas.drawCircle(viewSize / 2, viewSize / 2, (viewSize / 10) * 3.5f, circlePaint); circlePaint.setColor(Color.parseColor("#66FA7298")); canvas.drawCircle(viewSize / 2, viewSize / 2, (viewSize / 10) * 4.5f, circlePaint);

这一部分就是画外面的三个圆环了，在这里，我们给画笔设置描边不填充的属性，然后再设置画笔的宽度则可以实现圆环的绘制了，半径的取值我相信大家稍微看下也能看懂。

sectorPaint = new Paint(); sectorPaint.setAntiAlias(true); sectorPaint.setStyle(Paint.Style.STROKE); sectorPaint.setStrokeWidth((viewSize / 10) * 3); Shader sectorShader = new SweepGradient(viewSize / 2, viewSize / 2, new int[]{Color.TRANSPARENT, 0x00FA7298, 0xFFFA7298}, new float[]{0, 0.875f, 1f}); sectorPaint.setShader(sectorShader);

接下来的这部分用到了SweepGradient扫描梯度渲染，这里简单的介绍一下：

public SweepGradient(float cx, float cy, int colors[], float positions[]) public SweepGradient(float cx, float cy, int color0, int color1)

第一个方法 cx 、cy指圆型坐标； colors[]、渲染颜色数组，至少要两个，positions[]设置相对位置的渲染，如果为null则均匀梯度渲染 第二个方法 cx 、cy指圆型坐标；color0、 color1分别指起始渲染颜色和终止渲染颜色。

我们这里使用的是第一种方法，从代码可以看出我们只渲染了1/8的扇形区域。

if (threadFlag) { canvas.concat(matrix); canvas.drawCircle(viewSize / 2, viewSize / 2, (viewSize / 10) * 3.5f, sectorPaint); }

这部分代码的功能就是只有在线程开启时才会绘制扇形渲染。同时根据在矩阵matrix中改变角度持续绘制达到扇形渲染扫描的效果。

动画扫描线程

class ScanThread extends Thread { private ScanView view; public ScanThread(ScanView view) { this.view = view; } @Override public void run() { super.run(); while (threadFlag) { if (start) { view.post(new Runnable() { @Override public void run() { angle = angle + 5; if (angle == 360) { angle = 0; } matrix = new Matrix(); matrix.setRotate(angle, viewSize / 2, viewSize / 2); view.invalidate(); } }); try { Thread.sleep(20); } catch (InterruptedException e) { e.printStackTrace(); } } } } }

这里通过在线程中不断对角度进行改变重绘才有了最终的效果

完整代码

public class ScanView extends View { private static final String TAG = "ScanView"; /** * 画圆的笔 */ private Paint circlePaint; /** * 画扇形渲染的笔 */ private Paint sectorPaint; /** * 扫描线程 */ private ScanThread mThread; /** * 线程进行标志 */ private boolean threadFlag = false; /** * 线程启动标志 */ private boolean start = false; /** * 扇形转动的角度 */ private int angle = 0; /** * 当前视图的宽高，这里相同 */ private int viewSize; /** * 画在view中间的图片 */ private Bitmap bitmap; /** * 对图形进行处理的矩阵类 */ private Matrix matrix; public ScanView(Context context) { this(context, null); } public ScanView(Context context, AttributeSet attrs) { super(context, attrs); initBitmap(); } /** * 此处设置viewSize固定值为600 * @param widthMeasureSpec * @param heightMeasureSpec */ @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); viewSize = 600; setMeasuredDimension(viewSize, viewSize); } /** * 从资源中解码bitmap */ private void initBitmap() { bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.music_note); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); Paint mPaint = new Paint(); Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight()); Rect rectd = new Rect((viewSize / 10) * 4, (viewSize / 10) * 4, viewSize - (viewSize / 10) * 4, viewSize - (viewSize / 10) * 4); canvas.drawBitmap(bitmap, rect, rectd, mPaint); circlePaint = new Paint(); circlePaint.setStyle(Paint.Style.STROKE); circlePaint.setAntiAlias(true); circlePaint.setStrokeWidth((viewSize / 10)); circlePaint.setColor(Color.parseColor("#DDFA7298")); canvas.drawCircle(viewSize / 2, viewSize / 2, (viewSize / 10) * 2.5f, circlePaint); circlePaint.setColor(Color.parseColor("#AAFA7298")); canvas.drawCircle(viewSize / 2, viewSize / 2, (viewSize / 10) * 3.5f, circlePaint); circlePaint.setColor(Color.parseColor("#66FA7298")); canvas.drawCircle(viewSize / 2, viewSize / 2, (viewSize / 10) * 4.5f, circlePaint); sectorPaint = new Paint(); sectorPaint.setAntiAlias(true); sectorPaint.setStyle(Paint.Style.STROKE); sectorPaint.setStrokeWidth((viewSize / 10) * 3); Shader sectorShader = new SweepGradient(viewSize / 2, viewSize / 2, new int[]{Color.TRANSPARENT, 0x00FA7298, 0xFFFA7298}, new float[]{0, 0.875f, 1f}); sectorPaint.setShader(sectorShader); if (threadFlag) { canvas.concat(matrix); canvas.drawCircle(viewSize / 2, viewSize / 2, (viewSize / 10) * 3.5f, sectorPaint); } } public void start() { mThread = new ScanThread(this); mThread.start(); threadFlag = true; start = true; } public void stop() { if (start) { threadFlag = false; start = false; invalidate(); } } class ScanThread extends Thread { private ScanView view; public ScanThread(ScanView view) { this.view = view; } @Override public void run() { super.run(); while (threadFlag) { if (start) { view.post(new Runnable() { @Override public void run() { angle = angle + 5; if (angle == 360) { angle = 0; } matrix = new Matrix(); matrix.setRotate(angle, viewSize / 2, viewSize / 2); view.invalidate(); } }); try { Thread.sleep(20); } catch (InterruptedException e) { e.printStackTrace(); } } } } } }

终于实现了，再贴一下效果图

完整的代码demo

https://github.com/lijunyandev/ScanDemo

结语

这是我写的第一篇博客，前前后后花了几天晚上的时间，所幸今天终于出来了，虽然不难，但是也付出了努力，还是很激动的。希望以后有空能够持续写下去。