返回 登录
2

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

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

于亚豪的博客地址:

http://blog.csdn.net/androidstarjack

我们先看效果图吧

Markdown

Markdown

对于仿水波纹中心扩脉冲效果

思路

大家一看就应该知道,一张图片在不断的放大,且颜色渐变。那不就是自定义属性动画吗

没错就是这么神奇。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进行矩阵旋转

Markdown

效果实现

  • 自定义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);
            }
        }
    }
}

最终实现效果:

image

代码并没有很多,需要的同学可以下载github Demo体验和学习。

项目Github链接地址

https://github.com/androidstarjack/MyCircleWaveDiverge

下载慢?CSDN下载链接:

http://download.csdn.net/detail/androidstarjack/9892366

相信自己,没有做不到的,只有想不到的

如果你觉得此文对您有所帮助,欢迎入群 QQ交流群 :232203809
微信公众号:终端研发部

Markdown

(这里 学到的不仅仅是技术)

评论