手把手教你打造一个高仿雷达扫描效果和仿水波纹中心扩散效果

高仿雷达扫描效果和仿水波纹中心扩散效果，手把手教你撸一个炫酷的自定义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：

/**
 * 类功能描述：

 * 仿雷达扫描View
 * 博客地址：http://blog.csdn.net/androidstarjack
 * 公众号：终端研发部
 * @author yuyahao
 * @version 1.0 
 修改时间：
 修改备注：

 */
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
微信公众号：终端研发部

（这里 学到的不仅仅是技术）