Android模仿微信、云播雷达扫描动画效果

来源：互联网发布：轩辕剑战印进阶数据编辑：程序博客网时间：2024/04/29 18:49

Android模仿微信、云播雷达扫描动画效果的一个小例子的简单实现，先上效果图。

主要通过绘图及自定义控件来实现。上代码~

package com.example.radar;import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Matrix;import android.graphics.Paint;import android.graphics.Shader;import android.graphics.SweepGradient;import android.os.Handler;import android.util.AttributeSet;import android.view.View;public class RadarView extends View {private int w;private int h;private Paint mPaint;private Paint radarPaint;private Matrix mMatrix;private int start = 0;private Handler mHandler = new Handler();Runnable run = new Runnable() { @Overridepublic void run() {start += 5; // 每次旋转5度mMatrix = new Matrix();mMatrix.setRotate(start, w / 2, h / 2);RadarView.this.invalidate(); mHandler.postDelayed(run, 20); // 隔20ms重复执行}};public RadarView(Context context, AttributeSet attrs) {super(context, attrs);w = this.getResources().getDisplayMetrics().widthPixels;h = this.getResources().getDisplayMetrics().heightPixels;initPaint();mHandler.post(run); // 开始执行}private void initPaint() {mPaint = new Paint(); // 创建圆环画笔mPaint.setStrokeWidth(3);mPaint.setAntiAlias(true); // 抗锯齿mPaint.setColor(Color.parseColor("#A1A1A1"));mPaint.setStyle(Paint.Style.STROKE);radarPaint = new Paint(); // 创建扫描线画笔radarPaint.setAntiAlias(true);Shader shader = new SweepGradient(w / 2, h / 2, Color.TRANSPARENT, Color.parseColor("#AA000000")); // 扫描边由透明->#AA000000进行渐变radarPaint.setShader(shader);}@Overrideprotected void onDraw(Canvas canvas) {// 绘制圆环。这些宽度高度设置仅供参考canvas.drawCircle(w / 2, h / 2, w / 6, mPaint);canvas.drawCircle(w / 2, h / 2, 2 * w / 6, mPaint);canvas.drawCircle(w / 2, h / 2, 11 * w / 20, mPaint);canvas.drawCircle(w / 2, h / 2, h / 2, mPaint);// 绘制扫描线canvas.concat(mMatrix);canvas.drawCircle(w / 2, h / 2, h / 2, radarPaint);super.onDraw(canvas);}}

在布局中，把自定义控件加载进来~

<FrameLayout 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="#FFFFFF" >    <com.example.radar.RadarView        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_gravity="center" /></FrameLayout>

大功告成~

附上源码下载链接：Android模仿微信、云播雷达扫描动画效果源码

2 0