2023-03-25 Android app 模仿新浪微博雷达搜索动画效果,我这里来用来做搜索蓝牙效果。

于 2023-03-25 15:00:51 发布
阅读量661 收藏
点赞数 1
文章标签： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37858386/article/details/129767000
版权

一、我自己改进后效果图如下： 

二、主要代码

    1、RadarScanView.java

package com.xxx.bluetooth_ble.view;

import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.ValueAnimator;
import android.content.Context;
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.Rect;
import android.os.Looper;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.AccelerateInterpolator;
import android.view.animation.DecelerateInterpolator;
import android.view.animation.LinearInterpolator;

import com.xxx.bluetooth_ble.R;


public class RadarScanView extends View {
    //默认扫描图标
    private Bitmap mIconScanBitmap;
    //扫描时图标
    private Bitmap mIconScaningBitmap;
    //白色扫描图
    private Bitmap mScanBitmap;
    //黑色扫描背景
    private Bitmap mScanBackgroundBitmap;
    //扫描按钮区域
    private Rect mButtonArea = new Rect();
    //缩放矩阵
    private Matrix mScaleMatrix = new Matrix();
    //旋转矩阵
    private Matrix mRotateMatrix = new Matrix();
    //扫描图标旋转动画
    private ValueAnimator mRotateAnimator = new ValueAnimator();
    //手指点击时白色扫描图片缩小动画
    private ValueAnimator mScaleMinAnimator = new ValueAnimator();
    //手指放开时白色扫描图片放大动画
    private ValueAnimator mScaleMaxAnimator = new ValueAnimator();

    //扫描波纹灰色线动画
    private ValueAnimator mOutGrayAnimator = new ValueAnimator();
    //扫描波纹白色动画
    private ValueAnimator mInnerWhiteAnimator = new ValueAnimator();
    //扫描波纹灰色动画
    private ValueAnimator mBlackAnimator = new ValueAnimator();
    //画笔
    private Paint mOutGrayPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    private Paint mInnerWhitePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    private Paint mBlackPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    private Paint mTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);

    //扫描图标旋转角度
    private float mRotateDegree;
    //缩放比例，默认1:1
    private float mScaleRatio = 1;
    //设定自定义View半径
    private int mRadius;
    //扫描波纹灰色线半径
    private float mOutGrayRadius = 0;
    //扫描波纹白色部分半径
    private float mInnerWhiteRadius = 0;
    //扫描波纹灰色部分半径
    private float mBlackRadius = 0;
    //默认扫描文字提示
    private String mTipText = "点击雷达，开始探索";
    //测量扫描文字提示边界
    private Rect mTextBound = new Rect();
    //是否点击按钮，默认没有点击
    private boolean isButtonClick = false;
    private String TAG = "RadarScanViewTAG";
    private OnDeviceSearchListener onDeviceSearchListener;

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

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

    public RadarScanView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        //加载图片
        mIconScanBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.radar_button_icon_scan);
        mIconScaningBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.radar_button_icon_scaning);
        mScanBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.radar_button_scan);
        mScanBackgroundBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.radar_button_scan_background);
        //初始化画笔
        initViewPaint();
    }

    public void SetDeviceSearchListener(OnDeviceSearchListener l)
    {
        onDeviceSearchListener = l;
    }
    private void initViewPaint() {
        mOutGrayPaint.setStrokeWidth(4f);
        mOutGrayPaint.setColor(Color.rgb(228, 228, 228));
        mOutGrayPaint.setDither(true);
        mOutGrayPaint.setStyle(Paint.Style.STROKE);

        mInnerWhitePaint.setStrokeWidth(1f);
        mInnerWhitePaint.setColor(Color.rgb(241, 241, 241));
        mInnerWhitePaint.setDither(true);
        mInnerWhitePaint.setStyle(Paint.Style.FILL);

        mBlackPaint.setStrokeWidth(1f);
        mBlackPaint.setColor(Color.rgb(228, 228, 228));
        mBlackPaint.setDither(true);
        mBlackPaint.setStyle(Paint.Style.FILL);

        mTextPaint.setTextSize(37f);
        mTextPaint.setColor(Color.rgb(185, 185, 185));
        mTextPaint.setDither(true);
        mTextPaint.setStyle(Paint.Style.FILL);
    }

    public void startAnim() {
        if (mScaleMinAnimator != null) {

            mScaleMinAnimator.start();
            mScaleMaxAnimator.start();
            mRotateAnimator.start();
        }
    }

    public void stopAnim() {
        if (mScaleMinAnimator != null) {
            mScaleMinAnimator.cancel();
        }

        if (mScaleMaxAnimator != null) {
            mScaleMaxAnimator.cancel();
        }

        if (mRotateAnimator != null) {
            mRotateAnimator.cancel();
        }
    }


    private void initScaleMinAnimator() {
        mScaleMinAnimator.setFloatValues(mRadius, mRadius * 0.87f);
        mScaleMinAnimator.setDuration(500);
        mScaleMinAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mScaleRatio = ((Float) animation.getAnimatedValue()) / mRadius;
                invalidateView();
            }
        });
    }

    private void initScaleMaxAnimator() {
        mScaleMaxAnimator.setFloatValues(mRadius * 0.87f, mRadius);
        mScaleMaxAnimator.setDuration(500);
        mScaleMaxAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mScaleRatio = ((Float) animation.getAnimatedValue()) / mRadius;
                invalidateView();
            }
        });
    }

    private void initRoateAnimator() {
        mRotateAnimator.setFloatValues(0, 360);
        mRotateAnimator.setDuration(1000);
        mRotateAnimator.setRepeatCount(-1);
        mRotateAnimator.setInterpolator(new LinearInterpolator());
        mRotateAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mRotateDegree = (Float) animation.getAnimatedValue();
                invalidateView();
            }
        });
        mRotateAnimator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationStart(Animator animation) {
                super.onAnimationStart(animation);
                //mTipText = "Searching nearby bluetooth";
                mTipText = "";
                //旋转动画启动后启动扫描波纹动画
                mOutGrayAnimator.start();
                mInnerWhiteAnimator.start();
                mBlackAnimator.start();
            }

            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                //取消扫描波纹动画
                mOutGrayAnimator.cancel();
                mInnerWhiteAnimator.cancel();
                mBlackAnimator.cancel();
                //重置界面要素
                mOutGrayRadius = 0;
                mInnerWhiteRadius = 0;
                mBlackRadius = 0;
                //mTipText = "未能探索到周边的...，请稍后再试";
                mTipText = "";
                invalidateView();
            }
        });
    }

    private void initOutGrayAnimator() {
        mOutGrayAnimator.setFloatValues(mBlackRadius, getMeasuredWidth() / 2);
        mOutGrayAnimator.setDuration(1000);
        mOutGrayAnimator.setRepeatCount(-1);
        mOutGrayAnimator.setInterpolator(new LinearInterpolator());
        mOutGrayAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mOutGrayRadius = (Float) animation.getAnimatedValue();
            }
        });
    }

    private void initInnerWhiteAnimator() {
        mInnerWhiteAnimator.setFloatValues(0, getMeasuredWidth() / 3);
        mInnerWhiteAnimator.setDuration(1000);
        mInnerWhiteAnimator.setRepeatCount(-1);
        mInnerWhiteAnimator.setInterpolator(new AccelerateInterpolator());
        mInnerWhiteAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mInnerWhiteRadius = (Float) animation.getAnimatedValue();
            }
        });
    }

    private void initBlackAnimator() {
        mBlackAnimator.setFloatValues(0, getMeasuredWidth() / 3);
        mBlackAnimator.setDuration(1000);
        mBlackAnimator.setRepeatCount(-1);
        mBlackAnimator.setInterpolator(new DecelerateInterpolator());
        mBlackAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mBlackRadius = (Float) animation.getAnimatedValue();
            }
        });
    }


    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        //扫描按钮区域，取自扫描灰色背景图片区域即可
        mButtonArea.set(getMeasuredWidth() / 2 - mScanBackgroundBitmap.getWidth() / 2, getMeasuredHeight() / 2 - 
mScanBackgroundBitmap.getHeight() / 2, getMeasuredWidth() / 2 +

                mScanBackgroundBitmap
                        .getWidth() / 2, getMeasuredHeight() / 2 + mScanBackgroundBitmap.getHeight() / 2);
        //View半径,取自View宽高最小者
        mRadius = mScanBitmap.getWidth() / 2 > mScanBitmap.getHeight() / 2 ? mScanBitmap.getHeight() / 2 : mScanBitmap
.getWidth() / 2;

        //初始化动画
        initScaleMinAnimator();
        initScaleMaxAnimator();
        initRoateAnimator();
        initBlackAnimator();
        initInnerWhiteAnimator();
        initOutGrayAnimator();
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        float x=event.getX();
        float y = event.getY();

        switch (event.getAction()){
            case MotionEvent.ACTION_MOVE:
            case MotionEvent.ACTION_DOWN:
                break;
            case MotionEvent.ACTION_UP:
                int l,t;
                l = getMeasuredWidth() / 2 - getButtonBackgroundBitmap().getWidth() / 2;
                t = getMeasuredHeight() / 2 - getButtonBackgroundBitmap().getHeight() / 2;
                int w = mScanBitmap.getWidth();
                int h = mScanBitmap.getHeight();

                if(x > l && x < l+w && y > t && y < t+h)
                    onDeviceSearchListener.onTapCenterButton();

                break;
        }
        return super.onTouchEvent(event);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        //绘制波纹
        canvas.drawCircle(getMeasuredWidth() / 2, getMeasuredHeight() / 2, mBlackRadius, mBlackPaint);
        canvas.drawCircle(getMeasuredWidth() / 2, getMeasuredHeight() / 2, mInnerWhiteRadius, mInnerWhitePaint);
        canvas.drawCircle(getMeasuredWidth() / 2, getMeasuredHeight() / 2, mOutGrayRadius, mOutGrayPaint);

        //绘制背景
        Bitmap mScanBgBitmap = getScanBackgroundBitmap();
        if (mScanBgBitmap != null) {
            canvas.drawBitmap(mScanBgBitmap, getMeasuredWidth() / 2 - mScanBgBitmap.getWidth() / 2, getMeasuredHeight(
) / 2 - mScanBgBitmap.getHeight() / 2, new Paint(Paint

                    .ANTI_ALIAS_FLAG));
        }

        //绘制按钮背景
        Bitmap mButtonBgBitmap = getButtonBackgroundBitmap();
        canvas.drawBitmap(mButtonBgBitmap, getMeasuredWidth() / 2 - mButtonBgBitmap.getWidth() / 2, getMeasuredHeight(
) / 2 - mButtonBgBitmap.getHeight() / 2, new Paint(Paint.ANTI_ALIAS_FLAG));


        //绘制扫描图片
        Bitmap mScanBitmap = getScanBitmap();

        canvas.drawBitmap(mScanBitmap, getMeasuredWidth() / 2 - mScanBitmap.getWidth() / 2, getMeasuredHeight() / 2 - 
mScanBitmap.getHeight() / 2, new Paint(Paint.ANTI_ALIAS_FLAG));

        //绘制文本提示
        mTextPaint.getTextBounds(mTipText, 0, mTipText.length(), mTextBound);
        canvas.drawText(mTipText, getMeasuredWidth() / 2 - mTextBound.width() / 2, getMeasuredHeight() / 2 + 
mScanBackgroundBitmap.getHeight() / 2 + mTextBound.height() + 50, mTextPaint);


    }

    //
绘制白色按钮背景，根据缩放矩阵与缩放比例，复制图片达到手指点击与手指放开时按钮\E7\9A
\84缩小与放大效果

    private Bitmap getButtonBackgroundBitmap() {
        mScaleMatrix.reset();
        mScaleMatrix.postScale(mScaleRatio, mScaleRatio);
        return Bitmap.createBitmap(mScanBitmap, 0, 0, mScanBitmap.getWidth(), mScanBitmap.getHeight(), mScaleMatrix, 
true);

    }

    //判断是否正在执行旋转动画，如果正在执行动画，则取消灰色白净
    private Bitmap getScanBackgroundBitmap() {
        if (mRotateAnimator.isRunning()) {
            return null;
        }
        return mScanBackgroundBitmap;
    }

    //
判断是否正在执行动画，如果正在执行，根据旋转矩阵，与旋转的角度复制扫描图标，则\E5\AE
\9E现图标不断旋转，如果未执行，则返回未扫描图片

    private Bitmap getScanBitmap() {
        if (mRotateAnimator.isRunning()) {
            mRotateMatrix.reset();
            mRotateMatrix.postRotate(mRotateDegree, mIconScaningBitmap.getWidth() / 2, mIconScaningBitmap.getHeight() 
/ 2);

            return Bitmap.createBitmap(mIconScaningBitmap, 0, 0, mIconScaningBitmap.getWidth(), mIconScaningBitmap.
getHeight(), mRotateMatrix, true);

        }
        return mIconScanBitmap;
    }

    //刷新View
    public void invalidateView() {
        if (Looper.getMainLooper() == Looper.myLooper()) {
            invalidate();
        } else {
            postInvalidate();
        }
    }
}

    2、RadarScanView.java 里面的public boolean onTouchEvent(MotionEvent event)是用来做点击中间按键回调，用来暂停和开始搜索。OnDeviceSearchListener.java代码

package com.xxx.bluetooth_ble.view;


public interface OnDeviceSearchListener {
    void onTapCenterButton();
}

    3、在activity里面的 onWindowFocusChanged函数里面执行radar.startAnim()开始动画。

 

三、代码主要参考，github上面有有代码和相关资源。

Android 动画实战-仿微博雷达功能 - 掘金

参考里面的目录下的AndroidAnimationExercise-master\app\src\main\java\home\smart\fly\animations\customview\swipeanim\RadarScanView.java

四、其他相关参考文章：

模仿新浪微博雷达搜索动画效果_Chaek的博客-CSDN博客

Android自定义View之蓝牙搜索的涟漪雷达效果: 我在搜索呢，你在哪里呀？_半颗心脏的博客-CSDN博客

Android实现雷达View效果_CarsonWoo的博客-CSDN博客

Donald Linux
关注
Android开源经典项目
Tamic （大白）
09-13 5776
Android开源项目大全，包括经典个人博客，组织和开源项目
2017 github 上android 源码（适合工作中开发）
热门推荐
snake_son的博客
12-30 1万+
转载： http://blog.csdn.NET/a774057695/article/details/49889437 https://github.com/XinRan5312/Android-open-project 目前包括：Android 开源项目第一篇——个性化控件(View)篇 包括ListView、ActionBar、Menu、ViewPager、Gallery、GridV
Android雷达波纹动画(可做地图或者倒计时)
02-24
Android雷达波纹动画
Android 动画实战-仿微博雷达功能
weixin_33991727的博客
01-04 121
前言 在应用中使用动画，可以给用户带来良好的交互体验。通过之前对Android动画的分类总结，尝试了使用属性动画实现支付宝支付效果及购物车添加动画的效果，今天在这里模仿一下微博雷达页面效果。 对Android动画不太熟悉或遗忘的知识，可以通过下面两篇文章了解。 Android 动画总结，Android 动画实战 此次模仿新浪微博雷达页的功能，虽然只有一个Activity，但使用到了很多知识。包括...
android 雷达搜索动画,雷达动画android
weixin_31959079的博客
05-25 408
你试过这些例子吗？即Radar.javapublic class RadarView extends View {private final String LOG = "RadarView";private final int POINT_ARRAY_SIZE = 25;private int fps = 100;private boolean showCircles = true;float a...
模仿Android新浪微博雷达搜索旋转动画
05-19
模仿新浪微博雷达搜索动画效果 http://blog.csdn.net/shallcheek/article/details/45847209
android 雷达搜索动画,Android特效专辑（九）——仿微信雷达搜索好友特效，逻辑清晰实现简单...
weixin_33940031的博客
05-25 381
Android特效专辑(九)——仿微信雷达搜索好友特效，逻辑清晰实现简单不知不觉这个春节也已经过完了，遗憾家里没网，没能及时给大家送上祝福，今天回到深圳，明天就要上班了，小伙伴们是不是和我一样呢？今天讲的是一个大家都见过的动画，雷达搜索好友嘛，原理也十分的简单，你看完我的分析，也会觉得很简单了，国际惯例，无图无真相，我们先看看效果图，对了，真测试机送人了，所讲这段时间应该一直用模拟器显示吧！截图这...
整理的Android资源代码 源码 整理 Github开源项目下载地址
源码分享的博客
11-02 9246
主要介绍那些不错个性化的View，捡代码论坛整理提供。包括ListView、ActionBar、Menu、ViewPager、Gallery、GridView、ImageView、ProgressBar、TextView、ScrollView、TimeView、TipView、FlipView、ColorPickView、GraphView、UI Style等等。手机游戏源码,网站源码,棋牌游戏源码,IT视频教程,应用程序源码。整理的Android资源代码 源码 整理 Github开源项目下载地址
Android资源代码 源码 整理 Github开源项目下载地址
wengsheng147的专栏
03-26 5696
第一部分 个性化控件(View) 主要介绍那些不错个性化的View，包括ListView、ActionBar、Menu、ViewPager、Gallery、GridView、ImageView、ProgressBar、TextView、ScrollView、TimeView、TipView、FlipView、ColorPickView、GraphView、UI Style等等。 一、L
一个牛奔的Android开源大全
watertekhqx的博客
01-25 6909
leobert.lan的博客 一起学习目录视图 摘要视图 订阅 聚焦行业最佳实践，BDTC 2016完整议程公布 微信小程序实战项目——点餐系统 程序员11月书讯，评论得书啦 Get IT技能知识库，50个领域一键直达 github上的优秀android开源项目 2015-11-17 16:35 1219人阅读 评论(0) 收藏 举报目录(?)[+]酷
Android 仿真雷达搜索时的旋转动画.rar
07-10
Android 仿真雷达搜索时的旋转动画，打开界面，中心圆形的旋转动画，两个圆环动画，最外围环形动画，透明度变化等。
Android代码-一个炫酷的 SearchView 动画库
08-05
JJSearchViewAnim 中文版文档及相关文章 A cool search view animation library ,I hope you like it. look Design Demo Designer Class Nick JJDotGoPathController Oleg Frolov JJAroundCircleBornTailController sandeep virk JJBarWithErrorIconController Jurre Houtkamp JJScaleCircleAndTailController
android信号动画
11-05
信号动画，按钮向外扩散的动画
Android雷达扫描效果界面
09-04
代码IDE为AS，动画效果平滑，其中有自定义圆形ImageView控件，自定义了一个雷达View，适合新手学习自定义控件和估值器动画。
android 雷达扫描动画,Android仿微信雷达扫描效果的实现方法
weixin_33589626的博客
05-26 480
本文主要给大家介绍的是关于Android实现微信雷达扫描效果的相关内容，分享出来供大家参考学习，下面来看看详细的介绍：废话不多说 先上图(用AS录制的 转换工具不是很好 所以看得效果不是很好)效果图示例代码Activity 代码public class ShapeDrawableActivity extends AppCompatActivity {private ImageView ivLigh...
android 搜索动画,Android搜索动画
weixin_29200741的博客
05-25 498
SearchingAnimViewSearchingAnimView是一个比较美观的搜索动画，但是你不仅仅可以用它来表达搜索的属性，它还可以用与匹配用户、歌曲播放等场景。Demo你可以根据自己的需求设置动画的大小、颜色以及动画中间的文本或者图标。UsageGradledependencies{compile'com.sakuramomoko.searchinganimview:library:...
android 雷达坐标系,自定义view之雷达搜索扩散圆从无到有
weixin_39541600的博客
05-27 292
网上有很多类似的教程，这次只是从一个初学者的角度，进行一番自定义view的思路分析，以达到举一反三的效果。GIF4.gif一、构思步骤通过观察扩散圆的扩散动作，我们可以解析出三部分：(1)中心不变圆(2)向外扩散圆(3)雷达旋转扫描(1)中心不变圆可以绘制任意图标。(2)扩散圆波纹其实是由同样的一个扩散圆重复绘制出来的，只是在产生时间上的不一致，即先后出现时间不一致而形成的一种效果。(3)雷达旋转...
Android UI 之自定义RadarView——高仿微信雷达扫描
ITjianghuxiaoxiong的专栏
12-07 9792
最近看了一个视频讲了一种微信雷达扫描的实现方案，借鉴了一下，自己也写一个玩玩，与大家分享一下。基本想出来三种解决方案，根据不同需求情况选择即可。 方案一实现思路（通用）： 1.自定义view  2.重写onDraw()方法 3.画四个无锯齿空心圆 4.画以最大圆为半径的实心渐变圆 5.创建矩阵，旋转画布，重绘，并用Handler实现循环 package com.ml512.r
JDY-08蓝牙模块：Android/iOS SDK及APP源码下载
资源摘要信息:"JDY-08模块是一款结合了蓝牙技术的多功能通信模块，它通常用于实现电子设备之间的无线通信。该模块支持蓝牙低功耗（BLE）标准，能够提供稳定的短距离通信解决方案。JDY-08模块在物联网（IoT）设备、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值