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/462671

相关文章

Android实现打开本地pdf文件的两种方式

《Android实现打开本地pdf文件的两种方式》在现代应用中,PDF格式因其跨平台、稳定性好、展示内容一致等特点,在Android平台上,如何高效地打开本地PDF文件,不仅关系到用户体验,也直接影响... 目录一、项目概述二、相关知识2.1 PDF文件基本概述2.2 android 文件访问与存储权限2.

使用Python实现全能手机虚拟键盘的示例代码

《使用Python实现全能手机虚拟键盘的示例代码》在数字化办公时代,你是否遇到过这样的场景:会议室投影电脑突然键盘失灵、躺在沙发上想远程控制书房电脑、或者需要给长辈远程协助操作?今天我要分享的Pyth... 目录一、项目概述:不止于键盘的远程控制方案1.1 创新价值1.2 技术栈全景二、需求实现步骤一、需求

Android Studio 配置国内镜像源的实现步骤

《AndroidStudio配置国内镜像源的实现步骤》本文主要介绍了AndroidStudio配置国内镜像源的实现步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,... 目录一、修改 hosts,解决 SDK 下载失败的问题二、修改 gradle 地址,解决 gradle

在Android平台上实现消息推送功能

《在Android平台上实现消息推送功能》随着移动互联网应用的飞速发展,消息推送已成为移动应用中不可或缺的功能,在Android平台上,实现消息推送涉及到服务端的消息发送、客户端的消息接收、通知渠道(... 目录一、项目概述二、相关知识介绍2.1 消息推送的基本原理2.2 Firebase Cloud Me

Android中Dialog的使用详解

《Android中Dialog的使用详解》Dialog(对话框)是Android中常用的UI组件,用于临时显示重要信息或获取用户输入,本文给大家介绍Android中Dialog的使用,感兴趣的朋友一起... 目录android中Dialog的使用详解1. 基本Dialog类型1.1 AlertDialog(

使用Sentinel自定义返回和实现区分来源方式

《使用Sentinel自定义返回和实现区分来源方式》:本文主要介绍使用Sentinel自定义返回和实现区分来源方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Sentinel自定义返回和实现区分来源1. 自定义错误返回2. 实现区分来源总结Sentinel自定

Python实现自动化接收与处理手机验证码

《Python实现自动化接收与处理手机验证码》在移动互联网时代,短信验证码已成为身份验证、账号注册等环节的重要安全手段,本文将介绍如何利用Python实现验证码的自动接收,识别与转发,需要的可以参考下... 目录引言一、准备工作1.1 硬件与软件需求1.2 环境配置二、核心功能实现2.1 短信监听与获取2.

Android Kotlin 高阶函数详解及其在协程中的应用小结

《AndroidKotlin高阶函数详解及其在协程中的应用小结》高阶函数是Kotlin中的一个重要特性,它能够将函数作为一等公民(First-ClassCitizen),使得代码更加简洁、灵活和可... 目录1. 引言2. 什么是高阶函数?3. 高阶函数的基础用法3.1 传递函数作为参数3.2 Lambda

如何自定义Nginx JSON日志格式配置

《如何自定义NginxJSON日志格式配置》Nginx作为最流行的Web服务器之一,其灵活的日志配置能力允许我们根据需求定制日志格式,本文将详细介绍如何配置Nginx以JSON格式记录访问日志,这种... 目录前言为什么选择jsON格式日志?配置步骤详解1. 安装Nginx服务2. 自定义JSON日志格式各

Android自定义Scrollbar的两种实现方式

《Android自定义Scrollbar的两种实现方式》本文介绍两种实现自定义滚动条的方法,分别通过ItemDecoration方案和独立View方案实现滚动条定制化,文章通过代码示例讲解的非常详细,... 目录方案一:ItemDecoration实现(推荐用于RecyclerView)实现原理完整代码实现