实现百度地图的身边雷达的功能效果

一、概述

       百度地图现在在不断滴做很多的各种功能，可能是面向客户的开发，所以在不断开发出新颖的功能，以取得更多的用户。最近出了一个“身边雷达”的新的功能。感觉十分的酷炫。不去评论这个功能是谁先开发出来的（快播）。既然好看，就试着动手做一个了。直接也用百度的资源文件了。这样效果就会更加逼真。

       首先先看下百度他们做的：

二、开发前充电

1. SweepGradient：

      

2. 将Drawable中的资源文件转变成Bitmap

Resources r = getResources();
			Bitmap bp = BitmapFactory.decodeResource(r,
					R.drawable.component_radar_light_point);

三、代码实现

       设计的思路就是使用渲染中的SweepGradient进行颜色的旋转。设计思路的来源是，颜色是Int值正好资源文件也是int值。于是用图片去替代颜色值。（因为百度的雷达的时候其实就是旋转图片）

       1. 新建一个项目，应该大家都没有问题。于是已经可以不用操作主Avtivity了。

       2. 配置布局xml文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <FrameLayout
        android:layout_width="320dp"
        android:layout_height="320dp"
        android:layout_gravity="center"
        android:background="@drawable/component_radar_board" >

        <cn.com.sric.android_radio.SampleView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >
        </cn.com.sric.android_radio.SampleView>
    </FrameLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >
    </LinearLayout>

</LinearLayout>

    3.看见自定义的View了吗。接下来实现这个自定义的SampleView。代码如下：

package cn.com.sric.android_radio;

import android.content.Context;
import android.content.res.Resources;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
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.util.AttributeSet;
import android.view.KeyEvent;
import android.view.View;

public class SampleView extends View {
	private Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
	private float mRotate;
	private Matrix mMatrix = new Matrix();
	private Shader mShader;
	private boolean mDoTiming;

	float x = 160;// 旋转的原点x
	float y = 160;// 旋转的原点y

	public SampleView(Context context) {
		super(context);
	}

	public SampleView(Context context, AttributeSet paramAttributeSet) {
		super(context, paramAttributeSet);
		setFocusable(true);
		setFocusableInTouchMode(true);

		mShader = new SweepGradient(x, y, new int[] {
				R.drawable.component_radar_pointer, Color.TRANSPARENT }, null);
		mPaint.setShader(mShader);
	}

	@Override
	protected void onDraw(Canvas canvas) {
		Paint paint = mPaint;

		Paint ppPaint = new Paint();
		ppPaint.setColor(Color.WHITE);

		canvas.drawColor(Color.TRANSPARENT);
		// canvas.setBitmap(getResources().getDrawable(R.drawable.component_radar_board));

		mMatrix.setRotate(mRotate, x, y);
		mShader.setLocalMatrix(mMatrix);
		mRotate += 2.5;// 设置旋转速度
		if (mRotate >= 360) {
			mRotate = 0;
		}
		invalidate();

		if (mDoTiming) {
			long now = System.currentTimeMillis();
			for (int i = 0; i < 30; i++) {
				canvas.drawCircle(x, y, 80, paint);
			}
			now = System.currentTimeMillis() - now;
			android.util.Log.d("skia", "sweep ms = " + (now / 20.));
		} else {
			// canvas添加的图层也有一个堆载的形式，先绘制的图像在底层
			canvas.drawCircle(x, y, 118, paint);
			canvas.drawCircle(x, y, 3, ppPaint);

			Resources r = getResources();
			Bitmap bp = BitmapFactory.decodeResource(r,
					R.drawable.component_radar_light_point);
			canvas.drawBitmap(bp, 100, 120, paint);
			canvas.drawBitmap(bp, 120, 130, paint);
			canvas.drawBitmap(bp, 170, 110, paint);
			canvas.drawBitmap(bp, 180, 100, paint);
			canvas.drawBitmap(bp, 230, 199, paint);
			canvas.drawBitmap(bp, 200, 249, paint);
			canvas.drawBitmap(bp, 158, 210, paint);
		}

	}

	@Override
	public boolean onKeyDown(int keyCode, KeyEvent event) {
		switch (keyCode) {
		case KeyEvent.KEYCODE_D:
			mPaint.setDither(!mPaint.isDither());
			invalidate();
			return true;
		case KeyEvent.KEYCODE_T:
			mDoTiming = !mDoTiming;
			invalidate();
			return true;
		}
		return super.onKeyDown(keyCode, event);
	}
}

四、实现效果图

      首先感谢百度地图，提供的资源文件。

      接下来是效果图：