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

2023-12-06 17:30
文章标签 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。

相关文章

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
Android实现任意版本设置默认的锁屏壁纸和桌面壁纸（两张壁纸可不一致）

Android实现任意版本设置默认的锁屏壁纸和桌面壁纸（两张壁纸可不一致）

客户有些需求需要设置默认壁纸和锁屏壁纸  在默认情况下 这两个壁纸是相同的  如果需要默认的锁屏壁纸和桌面壁纸不一样 需要额外修改 Android13实现 替换默认桌面壁纸： 将图片文件替换frameworks/base/core/res/res/drawable-nodpi/default_wallpaper.*  （注意不能是bmp格式） 替换默认锁屏壁纸： 将图片资源放入vendo
阅读更多...
Android平台播放RTSP流的几种方案探究（VLC VS ExoPlayer VS SmartPlayer）

Android平台播放RTSP流的几种方案探究（VLC VS ExoPlayer VS SmartPlayer）

技术背景 好多开发者需要遴选Android平台RTSP直播播放器的时候，不知道如何选的好，本文针对常用的方案，做个大概的说明： 1. 使用VLC for Android VLC Media Player（VLC多媒体播放器），最初命名为VideoLAN客户端，是VideoLAN品牌产品，是VideoLAN计划的多媒体播放器。它支持众多音频与视频解码器及文件格式，并支持DVD影音光盘，VCD影
阅读更多...
防近视护眼台灯什么牌子好？五款防近视效果好的护眼台灯推荐

防近视护眼台灯什么牌子好？五款防近视效果好的护眼台灯推荐

在家里，灯具是属于离不开的家具，每个大大小小的地方都需要的照亮，所以一盏好灯是必不可少的，每个发挥着作用。而护眼台灯就起了一个保护眼睛，预防近视的作用。可以保护我们在学习，阅读的时候提供一个合适的光线环境，保护我们的眼睛。防近视护眼台灯什么牌子好？那我们怎么选择一个优秀的护眼台灯也是很重要，才能起到最大的护眼效果。下面五款防近视效果好的护眼台灯推荐： 一：六个推荐防近视效果好的护眼台灯的
阅读更多...
Flutter 进阶：绘制加载动画

Flutter 进阶：绘制加载动画

绘制加载动画：由小圆组成的大圆 1. 定义 LoadingScreen 类2. 实现 _LoadingScreenState 类3. 定义 LoadingPainter 类4. 总结 实现加载动画 我们需要定义两个类：LoadingScreen 和 LoadingPainter。LoadingScreen 负责控制动画的状态，而 LoadingPainter 则负责绘制动画。
阅读更多...
自定义类型：结构体(续)

自定义类型：结构体(续)

目录 一. 结构体的内存对齐 1.1 为什么存在内存对齐？ 1.2 修改默认对齐数 二. 结构体传参 三. 结构体实现位段 一. 结构体的内存对齐 在前面的文章里我们已经讲过一部分的内存对齐的知识，并举出了两个例子，我们再举出两个例子继续说明： struct S3{double a;int b;char c;};int mian(){printf("%zd\n",s
阅读更多...
android-opencv-jni

android-opencv-jni

//------------------start opencv--------------------@Override public void onResume(){ super.onResume(); //通过OpenCV引擎服务加载并初始化OpenCV类库，所谓OpenCV引擎服务即是 //OpenCV_2.4.3.2_Manager_2.4_*.apk程序包，存
阅读更多...
从状态管理到性能优化：全面解析 Android Compose

从状态管理到性能优化：全面解析 Android Compose

文章目录 引言一、Android Compose基本概念1.1 什么是Android Compose?1.2 Compose的优势1.3 如何在项目中使用Compose 二、Compose中的状态管理2.1 状态管理的重要性2.2 Compose中的状态和数据流2.3 使用State和MutableState处理状态2.4 通过ViewModel进行状态管理 三、Compose中的列表和滚动
阅读更多...
Spring 源码解读：自定义实现Bean定义的注册与解析

Spring 源码解读：自定义实现Bean定义的注册与解析

引言 在Spring框架中，Bean的注册与解析是整个依赖注入流程的核心步骤。通过Bean定义，Spring容器知道如何创建、配置和管理每个Bean实例。本篇文章将通过实现一个简化版的Bean定义注册与解析机制，帮助你理解Spring框架背后的设计逻辑。我们还将对比Spring中的BeanDefinition和BeanDefinitionRegistry，以全面掌握Bean注册和解析的核心原理。
阅读更多...
Android 10.0 mtk平板camera2横屏预览旋转90度横屏拍照图片旋转90度功能实现

Android 10.0 mtk平板camera2横屏预览旋转90度横屏拍照图片旋转90度功能实现

1.前言 在10.0的系统rom定制化开发中，在进行一些平板等默认横屏的设备开发的过程中，需要在进入camera2的 时候，默认预览图像也是需要横屏显示的，在上一篇已经实现了横屏预览功能，然后发现横屏预览后，拍照保存的图片 依然是竖屏的，所以说同样需要将图片也保存为横屏图标了，所以就需要看下mtk的camera2的相关横屏保存图片功能， 如何实现实现横屏保存图片功能 如图所示: 2.mtk
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2