Android自定义View-仿华为手机管家病毒查杀类似于雷达扫描动画效果

本文主要是介绍Android自定义View-仿华为手机管家病毒查杀类似于雷达扫描动画效果,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

最近在使用华为手机管家病毒查杀时有一个类似雷达扫描的动画,发现该动画旋转轴未对准圆心,如下图:


这样不仔细看,看不出来,咱们放大看一下,放大后如下:


现在我们可以清楚看到这个问题,于是想自己实现一把,好了,为了便于理解,这里就按照动画所见内容依次展开来说。
先简单的分析一下这里的元素,主要有3个园,三条直线,一个渐变扇形,一个渐变圆弧,知道这些以后,我们就可以开始进行代码编写了,那么首先定义一下所需要的画笔,画布及一些数据

//初始化画笔
private void initPaint() {mPaintCircleOrLine = new Paint();mPaintCircleOrLine.setStrokeWidth(2);mPaintCircleOrLine.setAntiAlias(true);mPaintCircleOrLine.setStyle(Paint.Style.STROKE);mPaintCircleOrLine.setColor(getResources().getColor(R.color.colorCircleOrLine));mPaintArc1 = new Paint();mPaintArc1.setStyle(Paint.Style.FILL);mPaintArc1.setAntiAlias(true);mPaintArc2 = new Paint();mPaintArc2.setStrokeWidth(4);mPaintArc2.setStyle(Paint.Style.STROKE);mPaintArc2.setAntiAlias(true);mPaintArc2.setColor(getResources().getColor(R.color.colorArcBorder));mPaintLine = new Paint();mPaintLine.setStrokeWidth(4);mPaintLine.setStyle(Paint.Style.STROKE);mPaintLine.setAntiAlias(true);mPaintLine.setColor(getResources().getColor(R.color.colorLine));}


注意这里画园和十字直线使用的同一个画笔的样式,如果你需要不同的样式,可以分开定义。初始化操作完成了之后,就是给变量赋值,我选择在onSizeChange()方法里面对变量进行赋值,代码如下:


    @Overrideprotected void onSizeChanged(int w, int h, int oldw, int oldh) {super.onSizeChanged(w, h, oldw, oldh);mWidth = getWidth();mHeight = getHeight();mRectF = new RectF(getPaddingLeft(), getPaddingTop(), mWidth-getPaddingRight(), mHeight-getPaddingBottom());SweepGradient sweepGradient1 = new SweepGradient(mWidth / 2, mHeight / 2,new int[]{Color.TRANSPARENT, getResources().getColor(R.color.colorArc)}, new float[]{0.8f, 1f});mPaintArc1.setShader(sweepGradient1);SweepGradient sweepGradient2 = new SweepGradient(mWidth / 2, mHeight / 2,Color.TRANSPARENT, getResources().getColor(R.color.colorArcBorder));mPaintArc2.setShader(sweepGradient2);Log.i("wang", String.format("width:%s, height:%s", mWidth, mHeight));}

到这里我们的准备工作都做完了,接下来就进行绘制了,我重写了onDraw方法,我们看一下onDraw方法里面的操作:

@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);Log.i("ScanView", "onDraw()");canvasCircle(canvas);canvasLine(canvas);//根据matrix中设定角度,不断绘制shader,呈现出一种扇形扫描效果if(threadRunning) {canvas.concat(matrix);canvasArc(canvas);}}

这里面有画园,画直线,画扇形,画圆弧,所以可以发现,我们所看到的效果,都是在onDraw方法里面实现的,我们具体看看每一个方法:

private void canvasCircle(Canvas canvas) {canvas.drawCircle(mWidth / 2, mHeight / 2, (mWidth - getPaddingLeft() - getPaddingRight()) / 6, mPaintCircleOrLine);canvas.drawCircle(mWidth / 2, mHeight / 2, (mWidth - getPaddingLeft() - getPaddingRight()) / 3, mPaintCircleOrLine);canvas.drawCircle(mWidth / 2, mHeight / 2, (mWidth - getPaddingLeft() - getPaddingRight()) / 2, mPaintCircleOrLine);}private void canvasLine(Canvas canvas) {canvas.drawLine(getPaddingLeft(), mHeight/2, mWidth - getPaddingRight(), mHeight/2, mPaintCircleOrLine);canvas.drawLine(mWidth/2, getPaddingTop(), mWidth/2, mHeight - getPaddingBottom(), mPaintCircleOrLine);}private void canvasArc(Canvas canvas) {canvas.drawArc(mRectF, 0, 180, true, mPaintArc1);canvas.drawArc(mRectF, 0, 180, false, mPaintArc2);canvas.drawLine(getPaddingLeft()-2, mHeight/2, mWidth/2, mHeight/2, mPaintLine);}


这样就绘制了整个UI,接下来实现动画效果,就可以实现整体的效果。

这里实现动画的时候,用到了Matrix这个东西,使用Matrix可以实现强大的图形动画,包位移、旋转、缩放、透明等效果,定义一线程,通过Matrix旋转操作实现动画,代码如下:

protected class ScanThread extends Thread {private ScanView view;public ScanThread(ScanView view) {// TODO Auto-generated constructor stubthis.view = view;}@Overridepublic void run() {Log.i("ScanView", "run()");// TODO Auto-generated method stubwhile (threadRunning) {view.post(new Runnable() {public void run() {start = start + 1;matrix = new Matrix();matrix.preRotate(start, mWidth/2, mWidth/2);view.invalidate();}});try {Thread.sleep(5);} catch (InterruptedException e) {e.printStackTrace();}}}}

好了,最终整体代码如下:

package com.wwj.custom.scan.view;import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.SweepGradient;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;/*** Created by Administrator on 2017/4/25.*/public class ScanView extends View {private Paint mPaintCircleOrLine, mPaintArc1, mPaintArc2, mPaintLine;private float mWidth, mHeight;private RectF mRectF;private Matrix matrix;//旋转效果起始角度private int start = 0;private boolean threadRunning = false;private ScanThread mThread;public ScanView(Context context) {super(context);initPaint();}public ScanView(Context context, AttributeSet attrs) {super(context, attrs);initPaint();}private void initPaint() {mPaintCircleOrLine = new Paint();mPaintCircleOrLine.setStrokeWidth(2);mPaintCircleOrLine.setAntiAlias(true);mPaintCircleOrLine.setStyle(Paint.Style.STROKE);mPaintCircleOrLine.setColor(getResources().getColor(R.color.colorCircleOrLine));mPaintArc1 = new Paint();mPaintArc1.setStyle(Paint.Style.FILL);mPaintArc1.setAntiAlias(true);mPaintArc2 = new Paint();mPaintArc2.setStrokeWidth(4);mPaintArc2.setStyle(Paint.Style.STROKE);mPaintArc2.setAntiAlias(true);mPaintArc2.setColor(getResources().getColor(R.color.colorArcBorder));mPaintLine = new Paint();mPaintLine.setStrokeWidth(4);mPaintLine.setStyle(Paint.Style.STROKE);mPaintLine.setAntiAlias(true);mPaintLine.setColor(getResources().getColor(R.color.colorLine));}@Overrideprotected void onSizeChanged(int w, int h, int oldw, int oldh) {super.onSizeChanged(w, h, oldw, oldh);mWidth = getWidth();mHeight = getHeight();mRectF = new RectF(getPaddingLeft(), getPaddingTop(), mWidth-getPaddingRight(), mHeight-getPaddingBottom());SweepGradient sweepGradient1 = new SweepGradient(mWidth / 2, mHeight / 2,new int[]{Color.TRANSPARENT, getResources().getColor(R.color.colorArc)}, new float[]{0.8f, 1f});mPaintArc1.setShader(sweepGradient1);SweepGradient sweepGradient2 = new SweepGradient(mWidth / 2, mHeight / 2,Color.TRANSPARENT, getResources().getColor(R.color.colorArcBorder));mPaintArc2.setShader(sweepGradient2);Log.i("wang", String.format("width:%s, height:%s", mWidth, mHeight));}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);Log.i("ScanView", "onDraw()");canvasCircle(canvas);canvasLine(canvas);//根据matrix中设定角度,不断绘制shader,呈现出一种扇形扫描效果if(threadRunning) {canvas.concat(matrix);canvasArc(canvas);}}private void canvasCircle(Canvas canvas) {canvas.drawCircle(mWidth / 2, mHeight / 2, (mWidth - getPaddingLeft() - getPaddingRight()) / 6, mPaintCircleOrLine);canvas.drawCircle(mWidth / 2, mHeight / 2, (mWidth - getPaddingLeft() - getPaddingRight()) / 3, mPaintCircleOrLine);canvas.drawCircle(mWidth / 2, mHeight / 2, (mWidth - getPaddingLeft() - getPaddingRight()) / 2, mPaintCircleOrLine);}private void canvasLine(Canvas canvas) {canvas.drawLine(getPaddingLeft(), mHeight/2, mWidth - getPaddingRight(), mHeight/2, mPaintCircleOrLine);canvas.drawLine(mWidth/2, getPaddingTop(), mWidth/2, mHeight - getPaddingBottom(), mPaintCircleOrLine);}private void canvasArc(Canvas canvas) {canvas.drawArc(mRectF, 0, 180, true, mPaintArc1);canvas.drawArc(mRectF, 0, 180, false, mPaintArc2);canvas.drawLine(getPaddingLeft()-2, mHeight/2, mWidth/2, mHeight/2, mPaintLine);}public void start() {mThread = new ScanThread(this);mThread.start();threadRunning = true;}public void stop() {threadRunning = false;invalidate();}protected class ScanThread extends Thread {private ScanView view;public ScanThread(ScanView view) {// TODO Auto-generated constructor stubthis.view = view;}@Overridepublic void run() {Log.i("ScanView", "run()");// TODO Auto-generated method stubwhile (threadRunning) {view.post(new Runnable() {public void run() {start = start + 1;matrix = new Matrix();matrix.preRotate(start, mWidth/2, mWidth/2);view.invalidate();}});try {Thread.sleep(5);} catch (InterruptedException e) {e.printStackTrace();}}}}
}

这个SanView使用也很简单,启动调用start(),需要停止调用其stop()即可。

github地址:https://github.com/wjwang0914/CustomScanView

现在才开始写博客,欢迎大家一起学习,讨论,期待我们一起进步。

这篇关于Android自定义View-仿华为手机管家病毒查杀类似于雷达扫描动画效果的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/462672

相关文章

通过React实现页面的无限滚动效果

《通过React实现页面的无限滚动效果》今天我们来聊聊无限滚动这个现代Web开发中不可或缺的技术,无论你是刷微博、逛知乎还是看脚本,无限滚动都已经渗透到我们日常的浏览体验中,那么,如何优雅地实现它呢?... 目录1. 早期的解决方案2. 交叉观察者:IntersectionObserver2.1 Inter

C#中通过Response.Headers设置自定义参数的代码示例

《C#中通过Response.Headers设置自定义参数的代码示例》:本文主要介绍C#中通过Response.Headers设置自定义响应头的方法,涵盖基础添加、安全校验、生产实践及调试技巧,强... 目录一、基础设置方法1. 直接添加自定义头2. 批量设置模式二、高级配置技巧1. 安全校验机制2. 类型

录音功能在哪里? 电脑手机等设备打开录音功能的技巧

《录音功能在哪里?电脑手机等设备打开录音功能的技巧》很多时候我们需要使用录音功能,电脑和手机这些常用设备怎么使用录音功能呢?下面我们就来看看详细的教程... 我们在会议讨论、采访记录、课堂学习、灵感创作、法律取证、重要对话时,都可能有录音需求,便于留存关键信息。下面分享一下如何在电脑端和手机端上找到录音功能

Android实现图片浏览功能的示例详解(附带源码)

《Android实现图片浏览功能的示例详解(附带源码)》在许多应用中,都需要展示图片并支持用户进行浏览,本文主要为大家介绍了如何通过Android实现图片浏览功能,感兴趣的小伙伴可以跟随小编一起学习一... 目录一、项目背景详细介绍二、项目需求详细介绍三、相关技术详细介绍四、实现思路详细介绍五、完整实现代码

SpringBoot AspectJ切面配合自定义注解实现权限校验的示例详解

《SpringBootAspectJ切面配合自定义注解实现权限校验的示例详解》本文章介绍了如何通过创建自定义的权限校验注解,配合AspectJ切面拦截注解实现权限校验,本文结合实例代码给大家介绍的非... 目录1. 创建权限校验注解2. 创建ASPectJ切面拦截注解校验权限3. 用法示例A. 参考文章本文

在Android中使用WebView在线查看PDF文件的方法示例

《在Android中使用WebView在线查看PDF文件的方法示例》在Android应用开发中,有时我们需要在客户端展示PDF文件,以便用户可以阅读或交互,:本文主要介绍在Android中使用We... 目录简介:1. WebView组件介绍2. 在androidManifest.XML中添加Interne

Vite 打包目录结构自定义配置小结

《Vite打包目录结构自定义配置小结》在Vite工程开发中,默认打包后的dist目录资源常集中在asset目录下,不利于资源管理,本文基于Rollup配置原理,本文就来介绍一下通过Vite配置自定义... 目录一、实现原理二、具体配置步骤1. 基础配置文件2. 配置说明(1)js 资源分离(2)非 JS 资

Android协程高级用法大全

《Android协程高级用法大全》这篇文章给大家介绍Android协程高级用法大全,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友跟随小编一起学习吧... 目录1️⃣ 协程作用域(CoroutineScope)与生命周期绑定Activity/Fragment 中手

聊聊springboot中如何自定义消息转换器

《聊聊springboot中如何自定义消息转换器》SpringBoot通过HttpMessageConverter处理HTTP数据转换,支持多种媒体类型,接下来通过本文给大家介绍springboot中... 目录核心接口springboot默认提供的转换器如何自定义消息转换器Spring Boot 中的消息

Android 缓存日志Logcat导出与分析最佳实践

《Android缓存日志Logcat导出与分析最佳实践》本文全面介绍AndroidLogcat缓存日志的导出与分析方法,涵盖按进程、缓冲区类型及日志级别过滤,自动化工具使用,常见问题解决方案和最佳实... 目录android 缓存日志(Logcat)导出与分析全攻略为什么要导出缓存日志?按需过滤导出1. 按