🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
# Android特效专辑(九)——仿微信雷达搜索好友特效,逻辑清晰实现简单 > 不知不觉这个春节也已经过完了,遗憾家里没网,没能及时给大家送上祝福,今天回到深圳,明天就要上班了,小伙伴们是不是和我一样呢?今天讲的是一个大家都见过的动画,雷达搜索好友嘛,原理也十分的简单,你看完我的分析,也会觉得很简单了,国际惯例,无图无真相,我们先看看效果图,对了,真  > 测试机送人了,所讲这段时间应该一直用模拟器显示吧! ## 截图 ![](https://box.kancloud.cn/2016-02-24_56cd2c1a5da6a.jpg) > 这个界面相信大家都认识,我们来说下原理,其实就三层 ![](https://box.kancloud.cn/2016-02-24_56cd2c1aa26e7.jpg) > 中间是一张图片,然后画四个圆,这个应该简单吧,不会的可以看下[Android绘图机制(二)——自定义View绘制形, 圆形, 三角形, 扇形, 椭圆, 曲线,文字和图片的坐标讲解](http://blog.csdn.net/qq_26787115/article/details/50466655),然后最上面就是一个渐变的圆了,这个圆我们只要让他不停的旋转就可以了,那我们新建一个工程——RadarSearch ![](https://box.kancloud.cn/2016-02-24_56cd2c1abb2ac.jpg) ## layou_main.xml ~~~ <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/photo" > <com.lgl.radarsearch.RadarView android:layout_width="match_parent" android:layout_height="match_parent" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:src="@drawable/circle_photo" /> </RelativeLayout> ~~~ > 我们新建一个RadarView ## RadarView ~~~ package com.lgl.radarsearch; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Matrix; import android.graphics.Paint; import android.graphics.Paint.Style; import android.graphics.Shader; import android.graphics.SweepGradient; import android.os.Handler; import android.util.AttributeSet; import android.view.View; /** * 雷达搜索 * * @author LGL * */ public class RadarView extends View { /** * 思路:我们首先初始化画笔,并且获取到控件的宽高,在onMeasure()中设置铺满,然后在onDraw()方法中绘制四个静态圆和一个渐变圆, * 我们通过Matrix矩阵来让他不停的旋转就达到我们想要的效果了 */ private Paint mPaintLine, mPaintCircle; private int w, h; // 动画 private Matrix matrix; // 旋转角度 private int start; // Handler定时动画 private Handler handler = new Handler(); private Runnable run = new Runnable() { @Override public void run() { start = start + 1; matrix = new Matrix(); // 参数:旋转角度,围绕点坐标的x,y坐标点 matrix.postRotate(start, w / 2, h / 2); // 刷新重绘 RadarView.this.invalidate(); // 继续循环 handler.postDelayed(run, 60); } }; public RadarView(Context context, AttributeSet attrs) { super(context, attrs); initView(); // 获取高宽 w = context.getResources().getDisplayMetrics().widthPixels; h = context.getResources().getDisplayMetrics().heightPixels; // 一致旋转 handler.post(run); } private void initView() { mPaintLine = new Paint(); mPaintLine.setColor(Color.WHITE); mPaintLine.setAntiAlias(true); mPaintLine.setStyle(Style.STROKE); mPaintCircle = new Paint(); mPaintCircle.setColor(Color.RED); mPaintCircle.setAntiAlias(true); matrix = new Matrix(); } /** * 测量 * * @author LGL */ @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { // 设置铺满 setMeasuredDimension(w, h); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); // 画四个圆形 canvas.drawCircle(w / 2, h / 2, w / 2, mPaintLine); canvas.drawCircle(w / 2, h / 2, w / 3, mPaintLine); canvas.drawCircle(w / 2, h / 2, w * 7 / 10, mPaintLine); canvas.drawCircle(w / 2, h / 2, w / 4, mPaintLine); // 绘制渐变圆 Shader mShader = new SweepGradient(w / 2, h / 2, Color.TRANSPARENT, Color.parseColor("#AAAAAAAA")); // 绘制时渐变 mPaintCircle.setShader(mShader); // 增加旋转动画,使用矩阵实现 canvas.concat(matrix); // 前置动画 canvas.drawCircle(w / 2, h / 2, w * 7 / 10, mPaintCircle); } } ~~~ ## Demo下载地址:[http://download.csdn.net/detail/qq_26787115/9430942](http://download.csdn.net/detail/qq_26787115/9430942)