返回介绍

九 - 仿微信雷达搜索好友特效,逻辑清晰实现简单

发布于 2025-02-28 12:56:41 字数 4315 浏览 0 评论 0 收藏 0

不知不觉这个春节也已经过完了,遗憾家里没网,没能及时给大家送上祝福,今天回到深圳,明天就要上班了,小伙伴们是不是和我一样呢?今天讲的是一个大家都见过的动画,雷达搜索好友嘛,原理也十分的简单,你看完我的分析,也会觉得很简单了,国际惯例,无图无真相,我们先看看效果图,对了,真
测试机送人了,所讲这段时间应该一直用模拟器显示吧!

截图

这个界面相信大家都认识,我们来说下原理,其实就三层

中间是一张图片,然后画四个圆,这个应该简单吧,不会的可以看下 Android 绘图机制(二) - 自定义 View 绘制形,圆形,三角形,扇形,椭圆,曲线,文字和图片的坐标讲解 ,然后最上面就是一个渐变的圆了,这个圆我们只要让他不停的旋转就可以了,那我们新建一个工程 - RadarSearch

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文