最近在翻以前写的代码，翻到几个月以前做的一个仿雷达扫描的效果，现在拿出来和大家分享一下，在进入分析和代码之前，我们先来看看效果吧，



…录屏质量较差，凑活着看吧。看到这样的效果，肯定是用自定义view的方式去实现的。通过观察效果，我们先来列一列要用的知识吧。

整个过程是一个不断绘制的过程，所以我们需要一个Handler。
核心的效果是一个扇形，所以我们还需要会绘制扇形。
绘制的扇形的颜色有一个梯度变化的效果，所以我们需要知道Shader的使用。
整个过程中扇形是不断变化位置的，我们还需要知道如何去旋转canvas。
ok，知道了这些，我们就一一来看一下上面的知识点。

一. 首先这个不断绘制的过程，我们说用handler去实现，其实方式很多，只不过我个人比较喜欢用handler的方式去实现，至于怎么使用，思路就是在Handler的handleMessage方法中继续send一个message。 

例如下面代码：

private Handler mHandler = new Handler() {
        public void handleMessage(Message msg) {
            if(msg.what == MSG_RUN) {
                ...
                postInvalidate();
                sendEmptyMessage(MSG_RUN);
            }
        }
    };

二. 绘制扇形，如何利用canvas去绘制扇形，这都是最基本的知识了，这里仅仅提一下就ok啦，



canvas.drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)

简单说一下参数吧，第一个参数是指的这个扇形所在圆的一个外接矩形。

第二个参数是扇形开始的位置，这里需要注意的是这个开始的位置是从坐标系的正东方向开始算起的。 

如图，



第三个参数，指的是扇形的角度。

第四个参数如果设置false，绘制的是一段圆弧，true的话，绘制的才是一个实体的扇形。

三. Android提供了不少的Shader，我们这里需要一个梯度的变化，这就需要SweepGradient这个类了。 

来看看这个类的构造方法，

public SweepGradient (float cx, float cy, int color0, int color1)

这里只看一个它的一个构造方法，前两个参数是指梯度的圆心位置，后两个参数指的是梯度开始的颜色和结束的颜色。

四. 旋转canvas很容易，只需要调用canvas.rotate方法就ok，但是要记住在旋转之前要保存现场，完毕之后要恢复现场。

除此之外，我们还需要绘制两个圆和两条线。

梳理完这些之后，下面我们正式开始编写代码实现这个效果了。 

首先，我们先来初始化一些东西，

public class MyView extends View {

    private static final int MSG_RUN = 1;

    private Paint mCirclePaint; // 绘制圆形
    private Paint mArcPaint; // 绘制扇形
    private Paint mLinePaint; // 绘制线条

    private RectF mRectF;

    private int mSweep; // 扇形角度

    public MyView(Context context, AttributeSet attrs) {
        super(context, attrs);

        mCirclePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mArcPaint = new Paint(Paint.ANTI_ALIAS_FLAG);

        mCirclePaint.setColor(Color.BLACK);
        mCirclePaint.setStyle(Style.STROKE);
        mCirclePaint.setStrokeWidth(1.f);

        mArcPaint.setColor(Color.GRAY);
        mArcPaint.setStyle(Style.FILL);

        mLinePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mLinePaint.setColor(Color.BLACK);
        mLinePaint.setStrokeWidth(1.f);

        mRectF = new RectF();
    }
}

这里定义了3个Paint，分别用来绘制圆形、线条和扇形，并且在构造中初始化这些Paint。

因为我们需要的是一个正方形的区域，所以我们还需要重写onMeasure方法，并且在这里面设置Rect的值。



@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);

    int size = getMeasuredWidth();
    setMeasuredDimension(size, size);
    mRectF.set(0, 0, getMeasuredWidth(), getMeasuredHeight());

    mArcPaint.setShader(new SweepGradient(size/2, size/2, Color.GRAY, Color.BLACK));
}

这里我们设置我们的view大小是一个正方形，而且初始化了mRectF，这个我们在绘制的时候要用到。 

最后，我们给绘制扇形的Paint设置了一个shader，这里正是使用了SweepGradient，关于它的构造方法的在上面已经说明了。 

继续代码，就到了绘制的时候了，怎么绘制呢？ 我们先来看代码，

@Override
protected void onDraw(Canvas canvas) {
    int centerX = getMeasuredWidth() / 2;
    int centerY = getMeasuredHeight() / 2;

    canvas.save();
    canvas.rotate(mSweep, centerX, centerY);
    canvas.drawArc(mRectF, 0, mSweep, true, mArcPaint);
    canvas.restore();

    canvas.drawLine(0, centerY, getMeasuredWidth(), centerY, mLinePaint);
    canvas.drawLine(centerX, 0, centerX, getMeasuredHeight(), mLinePaint);

    canvas.drawCircle(centerX, centerY, centerX / 2, mCirclePaint);
    canvas.drawCircle(centerX, centerY, centerX, mCirclePaint);
}

这里分为三个部分，后两个部分很容易，就是绘制了两条横竖的线条和两个大小不一样的圆。最重要的还是看第一部分，首先我们保存现场，因为我们在这里要去旋转画布。接下来果然是去旋转了画布，旋转的角度是mSweep,这个值在后面我们会不断的去改变它，最后使用drawArc方法去绘制出了我们需要的扇形，可以看到这里的绘制的开始位置一直是0，那我们在效果图中看到的开始位置不断变化是怎么回事？答案正式我们旋转了画布角度的结果！最后的最后，别忘了去恢复现场。

现在整个绘制的流程就走完了，也可见看到这样一个效果是如此的简单，接下来就是如何开始这个动画，并且不断的去绘制。

public void start() {
    mHandler.sendEmptyMessage(MSG_RUN);
}

private Handler mHandler = new Handler() {
    public void handleMessage(Message msg) {
        if(msg.what == MSG_RUN) {
            mSweep+=2;
            if(mSweep > 360) mSweep = 0;
            postInvalidate();
            sendEmptyMessage(MSG_RUN);
        }
    }
};

我们公开了一个start方法用来开启动画，在start中是调用了handler的sendEmptyMessage去发送一个效果，接下来我们来看看handler中的逻辑。在handler的handleMessage中，我们去改变mSweep的值，如果他的值大于360度，则重新置0，最后再次发送出一个效果，这样就达到了一个不断改变mSweep的值的目的，而且它的值是在0~360度之间。

ok，到现在这个简单的效果就完成了，我们只需要在xml布局中使用这个view，然后在activity中调用它的start方法，就可以显示出这个绚丽的效果了。

最后是demo的源码下载: 代码下载，戳这里

基于SystemVue仿真雷达软件进行自主开发c++模块
国内用SystemVue软件做雷达仿真的人比较少，网上关于这个软件的介绍也不多，在学习的过程中碰了很多壁。所以整理一下遇到的问题，方便和大家交流。
#一、SystemVue的下载安装

网上有很多安装的方法，唯一注意的一点就是安装之前先检查自己的windows用户名是不是中文，如果是，安装的时候可能会报错。解决方法如下：

1.同时按win+R，输入sysdm.cpl，点击确定。或者我的电脑---->右键---->属性；

2.点击高级选项卡，点击右下角的环境变量；

3.在任意一个盘中新建文件夹Temp，比如D:\Temp;

4.分别将用户变量里面的TMP和TEMP修改为刚才新建的文件夹;

5.点击确定，关闭环境变量对话框；

6.点击确定，关闭系统属性对话框；

7.然后再安装即可顺利安装成功，如果第一次没安装成功，先卸载，再安装即可。
#二、利用SystemVue自主开发c++模块

首先是环境的配置，因为需要跨平台的编译，中间还涉及到cmake的安装，cmake的安装可以直接在网上找教程，根据自己电脑的配置安装合适的Cmake。

在这一块刚开始用的时候遇到了创建工程不成功的情况，查了一下，发现很多在刚开始的时候都遇到了这个问题。具体报错如下：



打开cmakeerror文件错误提示如下:



尝试了很多解决方法，但是都没有找到具体原因，最后使用了VS2015才成功创建工程。
成功创建工程以后就可以自主开发模块了。具体步骤如下：

以加法器为例说明此类模块制作过程，该加法器带有增益控制，有两个输入口，有一个可改变的参数Gain：output=(input1+input2）*Gain

1、打开systemVue 菜单栏–>Action–>选择Create Model Builder Project



2、选择Create Model Builder Project，为工程取个名字，注意这里是工程名字不是模块名字。比如这里取名为Myproject1,选好模块存放路径，比如下面放在D:\SystemVue_64bit\project\Myproject1，这个可以随便放。点击Create，等待一会，VisualStudio会自动打开。



3、VisualStudio打开了然后切换到。


4、打开刚才建立的过程所在的目录（D:\SystemVue_64bit\project\Myproject1），找到刚才建立的工程。



4、打开依次打开如下文件夹：找到CMakeLists.txt

Myproject1—>source—>SystemVue—>CMakeLists.txt

5、打开CMakeLists.txt，做如下修改：


6、保存，然后关闭CMakeLists.txt，回到刚才自动打开的VisualStudio。切换到解决方案资源管理器

右键SystemVue-Myproject1，选择生成：



中间过程会出现什么文件被改变啊之类的，一路点重新加载，点OK就行。一直到生成完。

7、展开SystemVue-Myproject1，会多出两个文件，ADD1.h以及ADD1.cpp,模块的功能由这两个文件共同定义。这两个可能没有出现在vs资源管理方案里面， 但是出现在了工程文件里面，可以手动添加进去。


8、先点开ADD1.h,里面定义的是输入，输出端口以及模块用到的变量。

加法器有两个输入，一个输出，有一个可改变的参数Gain，我们把输入定义为In1,In2,输出定义为Out，因为Out=（In1+In1）*Gain，所以定义一个模块的传输变量Gain，如果你的模块有更多的输入输出口以及可变参数，以同样的方式依次在该.h文件下添加。

9、点开ADD1.cpp,做如下修改


（1）添加IO口In1，In2，Out，添加模块参数Gain。

（2）在构造函数ADD1：：ADD1（）里边初始化参数

（3）在Run函数里面完成模块要完成的功能，算法。
10、在解决方案资源管理器里右键ALL_BUILD,选择生成，只要没有语法错误，就能生成成功，生成成功后，模块ADD1就做好了。下面要在systemVue里面使用该模块



11、模块在 \ Myproject1\build-win64-vs2010\SystemVue\Debug\Myproject1.dll里面，找到刚才生成的Myproject1.dll,注意这个并不是模块名！！这个是工程名，我们的模块名字叫ADD1，Myproject1.dll下可以找到ADD1

12、往systemVue里添加模块：打开systemVue，添加模块：

Tools—>Library Manager



然后点Add From File…

找到刚才的Myproject1.dll添加进来

可以看到加进来了，接下来点close添加成功，接下来是使用


13、在systemVue的Part Select A的Algorithm Design里面找到Myproject1.dll


可以看到我们做好的模块ADD1


可以使用了，可以看到输入口是In1，In2，输出口是Out，参数试Gain，和我们定义的名字一样。

高仿雷达扫描效果和仿水波纹中心扩散效果，手把手教你撸一个炫酷的自定义view。

  
于亚豪的博客地址：
  
  
http://blog.csdn.net/androidstarjack
我们先看效果图吧
对于仿水波纹中心扩脉冲效果
思路
大家一看就应该知道，一张图片在不断的放大，且颜色渐变。那不就是自定义属性动画吗
没错就是这么神奇。ScaleAnimation+AlphaAnimation
缩放动画：

  //创建一个AnimationSet对象，参数为Boolean型，
//true表示使用Animation的interpolator，false则是使用自己的
animationSet = new AnimationSet(true);
//参数1：x轴的初始值
//参数2：x轴收缩后的值
//参数3：y轴的初始值
//参数4：y轴收缩后的值
//参数5：确定x轴坐标的类型
//参数6：x轴的值，0.5f表明是以自身这个控件的一半长度为x轴
//参数7：确定y轴坐标的类型
//参数8：y轴的值，0.5f表明是以自身这个控件的一半长度为x轴
ScaleAnimation scaleAnimation = new ScaleAnimation(
       1, animation_size,1,animation_size,
       Animation.RELATIVE_TO_SELF,0.5f,
       Animation.RELATIVE_TO_SELF,0.5f);
scaleAnimation.setDuration(3000);
animationSet.addAnimation(scaleAnimation);

渐变动画

//创建一个AlphaAnimation对象，参数从完全的透明度，到完全的不透明
AlphaAnimation alphaAnimation = new AlphaAnimation(1, 0);
//设置动画执行的时间
alphaAnimation.setDuration(3000);
//将alphaAnimation对象添加到AnimationSet当中
animationSet.addAnimation(alphaAnimation);
//使用ImageView的startAnimation方法执行动画
animationSet.setFillAfter(true);
animationSet.setInterpolator(new AccelerateInterpolator());
animationSet.setAnimationListener(new AnimationListener() {
    public void onAnimationStart(Animation animation) {
    }
    public void onAnimationRepeat(Animation animation) {
    }
    public void onAnimationEnd(Animation animation) {
        imageview_01.startAnimation(animationSet);
    }
});
imageview_01.startAnimation(animationSet);

高仿雷达扫描效果
思路
首先我们要确认要用什么方式去实现
布局的摆放
利用属性动画一张图片或者是一个view在绕着中心点
自定义View进行矩阵旋转
效果实现
自定义RelativeLayout进行摆设布

 protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);   
        canvas.drawBitmap(bitmap, getWidth() / 2 - bitmap.getWidth() / 2, getHeight() / 2 - bitmap.getHeight() / 2, null);
        canvas.drawBitmap(bitmap1,  getWidth() / 2 - bitmap1.getWidth() / 2, getHeight() / 2 - bitmap1.getHeight() / 2, null);
        if(isSearching) invalidate();
    }

动画

Rect rMoon = new Rect(getWidth()/2-bitmap2.getWidth(),getHeight()/2,getWidth()/2,getHeight()/2+bitmap2.getHeight());
            canvas.rotate(offsetArgs,getWidth()/2,getHeight()/2);
            canvas.drawBitmap(bitmap2,null,rMoon,null);
            offsetArgs = offsetArgs + 3;

自定义CircleWaveDivergenceView：
/**
 * 类功能描述：</br>
 * 仿雷达扫描View
 * 博客地址：http://blog.csdn.net/androidstarjack
 * 公众号：终端研发部
 * @author yuyahao
 * @version 1.0 </p> 修改时间：</br> 修改备注：</br>
 */
public class CircleWaveDivergenceView extends RelativeLayout{

    public static final String TAG = "SearchDevicesView";
    public static final boolean D  = BuildConfig.DEBUG;
    public Context context;
    @SuppressWarnings("unused")
    private long TIME_DIFF = 1500;
    private float offsetArgs = 0;
    private boolean isSearching = false;
    private Bitmap bitmap;
    private Bitmap bitmap1;
    private Bitmap bitmap2;


    public boolean isSearching() {
        return isSearching;
    }

    public void setSearching(boolean isSearching) {
        this.isSearching = isSearching;
        offsetArgs = 0;
        invalidate();
    }

    public CircleWaveDivergenceView(Context context) {
        super(context);
        this.context = context;
        initBitmap();
    }

    public CircleWaveDivergenceView(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.context = context;
        initBitmap();
    }

    public CircleWaveDivergenceView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        this.context = context;
        initBitmap();
    }

    private void initBitmap(){
        if(bitmap == null){
            bitmap = Bitmap.createBitmap(BitmapFactory.decodeResource(context.getResources(), R.drawable.gplus_search_bg));
        }
        if(bitmap1 == null){
            bitmap1 = Bitmap.createBitmap(BitmapFactory.decodeResource(context.getResources(), R.drawable.locus_round_click));
        }
        if(bitmap2 == null){
            bitmap2 = Bitmap.createBitmap(BitmapFactory.decodeResource(context.getResources(), R.drawable.gplus_search_args));
        }
    }

    @SuppressLint("DrawAllocation")
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);   
        canvas.drawBitmap(bitmap, getWidth() / 2 - bitmap.getWidth() / 2, getHeight() / 2 - bitmap.getHeight() / 2, null);
        if(isSearching){
            Rect rMoon = new Rect(getWidth()/2-bitmap2.getWidth(),getHeight()/2,getWidth()/2,getHeight()/2+bitmap2.getHeight());
            canvas.rotate(offsetArgs,getWidth()/2,getHeight()/2);
            canvas.drawBitmap(bitmap2,null,rMoon,null);
            offsetArgs = offsetArgs + 3;
        }else{
            canvas.drawBitmap(bitmap2,  getWidth() / 2  - bitmap2.getWidth() , getHeight() / 2, null);
        }
        canvas.drawBitmap(bitmap1,  getWidth() / 2 - bitmap1.getWidth() / 2, getHeight() / 2 - bitmap1.getHeight() / 2, null);
        if(isSearching) invalidate();
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {    
        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:       
            handleActionDownEvenet(event);
            return true;
        case MotionEvent.ACTION_MOVE: 
            return true;
        case MotionEvent.ACTION_UP:
            return true;
        }
        return super.onTouchEvent(event);
    }

    private void handleActionDownEvenet(MotionEvent event){
        RectF rectF = new RectF(getWidth() / 2 - bitmap1.getWidth() / 2, 
                                getHeight() / 2 - bitmap1.getHeight() / 2, 
                                getWidth() / 2 + bitmap1.getWidth() / 2, 
                                getHeight() / 2 + bitmap1.getHeight() / 2);

        if(rectF.contains(event.getX(), event.getY())){
            if(D) Log.d(TAG, "click search device button");
            if(!isSearching()) {
                setSearching(true);
            }else{
                setSearching(false);
            }
        }
    }
}
最终实现效果：

  
代码并没有很多，需要的同学可以下载github Demo体验和学习。
  
  
项目Github链接地址
  
  
https://github.com/androidstarjack/MyCircleWaveDiverge
  
  
下载慢？CSDN下载链接：
  
  
http://download.csdn.net/detail/androidstarjack/9892366
相信自己，没有做不到的，只有想不到的
如果你觉得此文对您有所帮助，欢迎入群 QQ交流群 ：232203809  

微信公众号：终端研发部 
（这里 学到的不仅仅是技术）

网上下载了几张图片，做了个demo
资源下载：http://download.csdn.net/detail/hello_12413/8601533
别的不说了，直接上图上代码



代码如下：
package com.example.actionbaraddui;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.Point;
import android.graphics.RectF;
import android.os.Handler;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

/**
 * @project javaapk.com-ActionBarAddUI
 * @ClassName ScanView.java
 * @Description 搜索页面，模仿雷达 背景不动，指针转动
 * @author xugang
 * @date 2015-4-9 下午5:04:08
 */
public class ScanView extends View implements Runnable {

	/** 转盘 */
	private Bitmap plate;
	/** 指针 */
	private Bitmap pointer;

	private Bitmap btn;

	private float Angel = 0.0f;
	private Matrix matx = new Matrix();

	private boolean isStopRoter = false;
	private Point mPoint;

	public ScanView(Context context, AttributeSet attrs, int defStyleAttr) {
		super(context, attrs, defStyleAttr);
		new Thread(this).start();
	}

	public ScanView(Context context, AttributeSet attrs) {
		this(context, attrs, 0);
	}

	public ScanView(Context context) {
		this(context, null);
	}

	@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);
		init();
		canvas.restore();
		Paint paintPlate = new Paint();
		canvas.drawBitmap(plate, (canvas.getWidth() - plate.getWidth()) / 2, (canvas.getHeight() - plate.getHeight()) / 2, paintPlate);

		matx.reset();
		matx.setTranslate(canvas.getWidth() / 2 - pointer.getWidth(), canvas.getHeight() / 2);
		matx.postRotate(Angel, canvas.getWidth() / 2, canvas.getHeight() / 2);

		Paint paintPointer = new Paint();
		canvas.drawBitmap(pointer, matx, paintPointer);

		Paint paintBtn = new Paint();
		canvas.drawBitmap(btn, (canvas.getWidth() - btn.getWidth()) / 2, (canvas.getHeight() - btn.getHeight()) / 2, paintBtn);
		mPoint = new Point(canvas.getWidth() / 2, canvas.getHeight() / 2);
	}

	private void init() {
		if (plate == null)
			plate = Bitmap.createBitmap(BitmapFactory.decodeResource(getResources(), R.drawable.gplus_search_bg));
		if (btn == null)
			btn = Bitmap.createBitmap(BitmapFactory.decodeResource(getResources(), R.drawable.locus_round_click));
		if (pointer == null)
			pointer = Bitmap.createBitmap(BitmapFactory.decodeResource(getResources(), R.drawable.gplus_search_args));
	}

	Handler handler = new Handler() {
		public void handleMessage(android.os.Message msg) {
			invalidate();
		};
	};

	@Override
	public boolean onTouchEvent(MotionEvent event) {
		switch (event.getAction()) {
		case MotionEvent.ACTION_DOWN:
			handleActionDownEvenet(event);
			return true;
		case MotionEvent.ACTION_MOVE:
			return true;
		case MotionEvent.ACTION_UP:
			return true;
		}
		return super.onTouchEvent(event);
	}
	//判断是否点击了中间点
	private void handleActionDownEvenet(MotionEvent event) {
		int x = (int) event.getX();
		int y = (int) event.getY();
		RectF rectF = new RectF(getWidth() / 2 - btn.getWidth() / 2, getHeight() / 2 - btn.getHeight() / 2, getWidth() / 2 + btn.getWidth() / 2, getHeight() / 2 + btn.getHeight() / 2);

		if (rectF.contains(event.getX(), event.getY())) {
			isStopRoter = !isStopRoter;
		}
	}

	@Override
	public void run() {
		while (true) {
			try {
				Thread.sleep(40);
			} catch (InterruptedException e) {
				e.printStackTrace();
			}
			if (isStopRoter) {
				Angel += 5;
				handler.sendEmptyMessage(1);
			}
		}
	}

}

遗留问题：1、大小不能随意变化，这个还需要研究研究。
                  2、用的是矩阵变化，这里有个前乘和后乘的问题