模仿新浪微博雷达搜索动画效果

最新推荐文章于 2023-06-27 21:53:03 发布
最新推荐文章于 2023-06-27 21:53:03 发布
阅读量2.4k 收藏 5
点赞数
分类专栏： Android 文章标签： android android动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shallcheek/article/details/45847209
版权

模仿新浪微博雷达搜索动画效果

昨天更新的了新浪微博看到个好玩的玩意，雷达搜索，功能就不介绍了，当然作为安卓开发的第一眼看到的不是功能，而是搜索界面的雷达搜索动画效果，然后思绪了一下就模仿了写了一个，当然可能写的有点简单，这个见谅了，基本实现了该有的动画效果 怎么也有90%的相识度。
录制的gif略卡，PS有没有好点的gif生成软件推荐推荐

新浪微博效果

这里写图片描述

本软件的效果

这里写图片描述

一、首先来看我实现的布局文件
用的是RelativeLayout相对布局 其中动画分为几个中间的旋转为一个imageview 其它的形状各为一个Activity
看布局文件

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#F2F2F2" >

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_centerInParent="true" >

        <ImageView
            android:id="@+id/radar_img"
            android:layout_width="300dp"
            android:layout_height="300dp"
            android:layout_centerInParent="true"
            android:src="@drawable/main_bottom_selecl_item"
            android:visibility="gone" />

        <ImageView
            android:id="@+id/radar_bttom_img"
            android:layout_width="300dp"
            android:layout_height="300dp"
            android:layout_centerInParent="true"
            android:src="@drawable/amain_setting_bg" />

        <ImageView
            android:id="@+id/radar_top_img"
            android:layout_width="300dp"
            android:layout_height="300dp"
            android:layout_centerInParent="true"
            android:src="@drawable/main_setting_bg"
            android:visibility="gone" />

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_weight="1"
            android:background="@drawable/radar_button_scan" >

            <ImageView
                android:id="@+id/radar_imageing"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:src="@drawable/radar_button_icon_scaning" />
        </RelativeLayout>
    </RelativeLayout>

</RelativeLayout>

二、
动画效果了解动画的都知道Android的常用动画有哪几总类型
　Tweened Animations的分类
　　１、Alpha：淡入淡出效果
　　２、Scale：缩放效果
　　３、Rotate：旋转效果
　　４、Translate：移动效果
　至于这搜索中用到是只有Scale（缩放效果）和Alpha（淡入淡出效果）
圆中心放大的动画

AnimationSet animationSet = new AnimationSet(true);
        //居中位置形状由0.3倍变化到1.0倍
        ScaleAnimation sa = new ScaleAnimation(0.3f, 1.0f, 0.3f, 1.0f,
                ScaleAnimation.RELATIVE_TO_SELF, 0.5f,
                ScaleAnimation.RELATIVE_TO_SELF, 0.5f);
        sa.setDuration(900);//动画时间
        sa.setFillAfter(true);
        sa.setRepeatCount(0);
        sa.setInterpolator(new LinearInterpolator());//匀速变化
        animationSet.addAnimation(sa);

上面就是中间的圆形从小变大的动画效果

下面则是中心图标旋转动画下拍过
这个可以用来当作ProgressBar使用 只需要一张图片就可以旋转
调用方法

Animation operatingAnim = AnimationUtils
                .loadAnimation(this, R.anim.sss);
        LinearInterpolator lin = new LinearInterpolator();
        operatingAnim.setInterpolator(lin);
        findViewById(R.id.radar_imageing).startAnimation(operatingAnim);
   <rotate
        android:duration="1500"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="-1"
        android:repeatMode="restart"
        android:toDegrees="360" >
    </rotate>

其中最外层圆环实现效果雷同上面的放大缩放效果在加上一个渐变动画代码如下

   /**
     * 最外围环形动画
     * 
     * @return
     */
    private AnimationSet getAnimAnnular() {
        AnimationSet animationSet = new AnimationSet(true);
        ScaleAnimation sa = new ScaleAnimation(1.0f, 1.5f, 1.0f, 1.5f,
                ScaleAnimation.RELATIVE_TO_SELF, 0.5f,
                ScaleAnimation.RELATIVE_TO_SELF, 0.5f);
        // 透明度变化
        animationSet.addAnimation(new AlphaAnimation(1.0f, 0.1f));
        animationSet.setDuration(400);
        sa.setDuration(500);
        sa.setFillAfter(true);
        sa.setRepeatCount(0);
        sa.setInterpolator(new LinearInterpolator());
        animationSet.addAnimation(sa);
        return animationSet;
    }

动画效果就是上面了 只是要规划好动画展示的时间和持续时间就能实现完全的旋转
三、动画展现步骤

ps动画时间的我只是初略的估算了一下，请根据可以根据自己的理解规划动画的时间

Created with Raphaël 2.1.2 开始 播放灰色动画 播放白色动画 no

1:先是灰色形状圆形的动画 播放，延时400ms播放中间透明白色圆形的动画展现

private void startcircularAnima() {
        grayAnimal = playHeartbeatAnimation();
        radarbttom.startAnimation(grayAnimal);
        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                startwhiteAnimal();
            }
        }, 400);
        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                startannularAnimat();
            }
        }, 600);
    }

2:白色圆形动画播放完毕则重复

    private void startwhiteAnimal() {
        AnimationSet whiteAnimal = playHeartbeatAnimation();
        whiteAnimal.setRepeatCount(0);
        whiteAnimal.setDuration(700);
        radartop.setVisibility(View.VISIBLE);
        radartop.startAnimation(whiteAnimal);
        whiteAnimal.setAnimationListener(new AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
            }

            @Override
            public void onAnimationRepeat(Animation animation) {
            }

            @Override
            public void onAnimationEnd(Animation animation) {
                mAnnularImg.setVisibility(View.GONE);
                radartop.setVisibility(View.GONE);
                startcircularAnima();
            }
        });

    }
private void startannularAnimat() {
        mAnnularImg.setVisibility(View.VISIBLE);
        AnimationSet annularAnimat = getAnimAnnular();
        annularAnimat.setAnimationListener(new AnimationListener() {

            @Override
            public void onAnimationStart(Animation animation) {

            }

            @Override
            public void onAnimationRepeat(Animation animation) {
                // TODO Auto-generated method stub

            }

            @Override
            public void onAnimationEnd(Animation animation) {
                mAnnularImg.setVisibility(View.GONE);
            }
        });
        mAnnularImg.startAnimation(annularAnimat);
    }

这样重复播放动画类似的效果就实现了我写的比较初级，有什么改进的意见或者错误请指点指点

四
主要代码
MainActivity

package com.example.anima;

import android.os.Bundle;
import android.os.Handler;
import android.support.v7.app.ActionBarActivity;
import android.view.Menu;
import android.view.View;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.AnimationSet;
import android.view.animation.AnimationUtils;
import android.view.animation.LinearInterpolator;
import android.view.animation.ScaleAnimation;
import android.widget.ImageView;

public class MainActivity extends ActionBarActivity {
    private ImageView radarbttom;
    private ImageView radartop;
    private ImageView mAnnularImg;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mAnnularImg = (ImageView) findViewById(R.id.radar_img);
        radartop = (ImageView) findViewById(R.id.radar_top_img);
        radarbttom = (ImageView) findViewById(R.id.radar_bttom_img);

        startAnima();
        startcircularAnima();
    }

    AnimationSet grayAnimal;

    private void startannularAnimat() {
        mAnnularImg.setVisibility(View.VISIBLE);
        AnimationSet annularAnimat = getAnimAnnular();
        annularAnimat.setAnimationListener(new AnimationListener() {

            @Override
            public void onAnimationStart(Animation animation) {

            }

            @Override
            public void onAnimationRepeat(Animation animation) {
                // TODO Auto-generated method stub

            }

            @Override
            public void onAnimationEnd(Animation animation) {
                mAnnularImg.setVisibility(View.GONE);
            }
        });
        mAnnularImg.startAnimation(annularAnimat);
    }

    private void startwhiteAnimal() {
        AnimationSet whiteAnimal = playHeartbeatAnimation();
        whiteAnimal.setRepeatCount(0);
        whiteAnimal.setDuration(700);
        radartop.setVisibility(View.VISIBLE);
        radartop.startAnimation(whiteAnimal);
        whiteAnimal.setAnimationListener(new AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
            }

            @Override
            public void onAnimationRepeat(Animation animation) {
            }

            @Override
            public void onAnimationEnd(Animation animation) {
                mAnnularImg.setVisibility(View.GONE);
                radartop.setVisibility(View.GONE);
                startcircularAnima();
            }
        });

    }

    private void startcircularAnima() {
        grayAnimal = playHeartbeatAnimation();
        radarbttom.startAnimation(grayAnimal);
        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                startwhiteAnimal();
            }
        }, 400);
        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                startannularAnimat();
            }
        }, 600);
    }

    /**
     * 打开界面
     */
    private void startAnima() {
        // 中心圆形的旋转动画
        Animation operatingAnim = AnimationUtils
                .loadAnimation(this, R.anim.sss);
        LinearInterpolator lin = new LinearInterpolator();
        operatingAnim.setInterpolator(lin);
        findViewById(R.id.radar_imageing).startAnimation(operatingAnim);

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    /**
     * 两个圆环动画
     * 
     * @return
     */
    private AnimationSet playHeartbeatAnimation() {
        AnimationSet animationSet = new AnimationSet(true);
        ScaleAnimation sa = new ScaleAnimation(0.3f, 1.0f, 0.3f, 1.0f,
                ScaleAnimation.RELATIVE_TO_SELF, 0.5f,
                ScaleAnimation.RELATIVE_TO_SELF, 0.5f);
        // animationSet.addAnimation(new AlphaAnimation(1.0f, 0.9f));
        sa.setDuration(900);
        sa.setFillAfter(true);
        sa.setRepeatCount(0);
        sa.setInterpolator(new LinearInterpolator());
        animationSet.addAnimation(sa);
        return animationSet;
    }

    /**
     * 最外围环形动画
     * 
     * @return
     */
    private AnimationSet getAnimAnnular() {
        AnimationSet animationSet = new AnimationSet(true);
        ScaleAnimation sa = new ScaleAnimation(1.0f, 1.5f, 1.0f, 1.5f,
                ScaleAnimation.RELATIVE_TO_SELF, 0.5f,
                ScaleAnimation.RELATIVE_TO_SELF, 0.5f);
        // 透明度变化
        animationSet.addAnimation(new AlphaAnimation(1.0f, 0.1f));
        animationSet.setDuration(400);
        sa.setDuration(500);
        sa.setFillAfter(true);
        sa.setRepeatCount(0);
        sa.setInterpolator(new LinearInterpolator());
        animationSet.addAnimation(sa);
        return animationSet;
    }
}

布局文件

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#F2F2F2" >

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_centerInParent="true" >

        <ImageView
            android:id="@+id/radar_img"
            android:layout_width="300dp"
            android:layout_height="300dp"
            android:layout_centerInParent="true"
            android:src="@drawable/main_bottom_selecl_item"
            android:visibility="gone" />

        <ImageView
            android:id="@+id/radar_bttom_img"
            android:layout_width="300dp"
            android:layout_height="300dp"
            android:layout_centerInParent="true"
            android:src="@drawable/amain_setting_bg" />

        <ImageView
            android:id="@+id/radar_top_img"
            android:layout_width="300dp"
            android:layout_height="300dp"
            android:layout_centerInParent="true"
            android:src="@drawable/main_setting_bg"
            android:visibility="gone" />
        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_weight="1"
            android:background="@drawable/radar_button_scan" >

            <ImageView
                android:id="@+id/radar_imageing"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:src="@drawable/radar_button_icon_scaning" />
        </RelativeLayout>
    </RelativeLayout>

</RelativeLayout>

代码下载地址
http://download.csdn.net/detail/shallcheek/8717163
转载请注明出处http://blog.csdn.net/shallcheek/article/details/45847209

Chaek
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
模仿Android新浪微博雷达搜索旋转动画
05-19
模仿新浪微博雷达搜索动画效果 http://blog.csdn.net/shallcheek/article/details/45847209
android 雷达搜索动画,Android特效专辑（九）——仿微信雷达搜索好友特效，逻辑清晰实现简单...
weixin_33940031的博客
05-25 338
Android特效专辑(九)——仿微信雷达搜索好友特效，逻辑清晰实现简单不知不觉这个春节也已经过完了，遗憾家里没网，没能及时给大家送上祝福，今天回到深圳，明天就要上班了，小伙伴们是不是和我一样呢？今天讲的是一个大家都见过的动画，雷达搜索好友嘛，原理也十分的简单，你看完我的分析，也会觉得很简单了，国际惯例，无图无真相，我们先看看效果图，对了，真测试机送人了，所讲这段时间应该一直用模拟器显示吧！截图这...
2023-03-25 Android app 模仿新浪微博雷达搜索动画效果,我这里来用来做搜索蓝牙效果。
海月汐辰
03-25 593
2、RadarScanView.java 里面的public boolean onTouchEvent(MotionEvent event)是用来做点击中间按键回调，用来暂停和开始搜索。OnDeviceSearchListener.java代码。参考里面的目录下的AndroidAnimationExercise-master\app\src\main\java\home\smart\fly\animations\customview\swipeanim\RadarScanView.java。
android 雷达坐标系,自定义view之雷达搜索扩散圆从无到有
weixin_39541600的博客
05-27 230
网上有很多类似的教程，这次只是从一个初学者的角度，进行一番自定义view的思路分析，以达到举一反三的效果。GIF4.gif一、构思步骤通过观察扩散圆的扩散动作，我们可以解析出三部分：(1)中心不变圆(2)向外扩散圆(3)雷达旋转扫描(1)中心不变圆可以绘制任意图标。(2)扩散圆波纹其实是由同样的一个扩散圆重复绘制出来的，只是在产生时间上的不一致，即先后出现时间不一致而形成的一种效果。(3)雷达旋转...
【Android】实现雷达扫描效果，使用自定义View来绘制雷达扫描动画
资深全栈开发工程师
06-27 1019
接着，我们每次调用onDraw时增加radius的值，使圆圈半径逐渐增大，并通过invalidate()方法触发View的重绘。在onDraw方法中，我们首先获取View的中心坐标，然后使用画笔绘制一个圆圈，圆心为View的中心坐标，半径为radius。最后，我们在radius超过View宽度和高度的一半时，将radius重置为0，以实现循环的雷达扫描效果。在上述代码中，我们创建了一个RadarView类，继承自View，并在构造函数中初始化了画笔和半径。
Android仿新浪微博雷达扫描
08-31
Android仿新浪微博雷达扫描，属性动画
Android动画之雷达扫描效果
09-01
雷达扫描效果在我们日常会经常看到，比如在新浪微博上有一个雷达功能，感觉类似于微信附近的人。只是多了一个类似于雷达扫描效果的动画，某些知名安全软件也有这样的雷达效果，因此今天在这里小编带着大家学习一下。
css3模拟雷达波向外散发动画效果
06-12
描述： ... 所以呢，html5+css3效果离我们生活已经越来越近了 ... 今天给大家推荐一款非常舒适，且只使用css3实现的效果，无js 使用方法： 1、将附件index.html文件中的css代码以及html代码拷贝到你的网页中即可
Android自定义view--雷达扫描
王温暖的博客
04-26 652
雷达扫描view，先看下整体效果： 项目地址：https://github.com/buder-cp/CustomView/blob/master/buder_DN_view/buderdn03/src/main/java/com/test/buderdn03/RadarGradientView.java 准备两个画笔，一个是一圈圈的圆圈，另一个是扫描画笔； 动画实现 这里实现动画的...
android 雷达搜索动画,雷达动画android
weixin_31959079的博客
05-25 373
你试过这些例子吗？即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...
雷达扫描动画，旋转动画
07-18
纯代码编写雷达扫描旋转动画，分离程度很高，非常实用
雷达扫描动画特效.zip
05-23
这是一款基于HTML5 Canvas实现的雷达扫描动画特效源码，canvas是HTML5特有的画布工具，我们可以在canvas上绘制任意元素，包括3D元素。这款雷达扫描动画就是利用了canvas的灵活特性，利用js在canvas上绘制这些美丽的扫描线条。此外这款源码还提供了点击绘制的功能，用户可以根据自己的喜好绘制出新的类似雷达扫描特效的图形。
搜索框（弹出动效）
08-01
点击按钮弹出搜索，若无输入内容，再次点击就关闭
Android 动画实战-仿微博雷达功能
weixin_33991727的博客
01-04 114
前言 在应用中使用动画，可以给用户带来良好的交互体验。通过之前对Android动画的分类总结，尝试了使用属性动画实现支付宝支付效果及购物车添加动画的效果，今天在这里模仿一下微博雷达页面效果。 对Android动画不太熟悉或遗忘的知识，可以通过下面两篇文章了解。 Android 动画总结，Android 动画实战 此次模仿新浪微博雷达页的功能，虽然只有一个Activity，但使用到了很多知识。包括...
android 扫描动画效果图,RadarView之自定义雷达扫描动画效果。
weixin_31022521的博客
05-25 530
RadarViewRadarView for Android 是一个雷达扫描动画后，然后展示得分效果的控件。Gif 展示引入Maven：com.king.viewradarview1.0.2pomGradle:compile 'com.king.view:radarview:1.0.2'Lvy:如果Gradle出现compile失败的情况，可以在Project的build.gradle里面添加如下...
Android实现雷达View效果
CarsonWoo的博客
06-01 2077
样式效果 还是先来看效果： 这是一个仿雷达扫描的效果，是之前在做地图sdk接入时就想实现的效果，但之前由于赶着毕业设计，就没有亲手去实现，不过现在自己撸一个发现还是挺简单的。 这里主要分享一下我的做法。 目录 主体轮廓的实现（雷达的结构） 动画的实现（雷达扫描的效果） 目标点的加入（图片/点） 主体轮廓实现 不难分析得出，这个View主要由外部的一个圆，中间的锚点圆以及扇形旋转区域组成。而且每个部分理应由不同的Paint去绘制，以方便去定制各部分的样式。 ...
Css实现雷达扫描动画效果
蒲厷渶と戀的博客
07-23 5035
1、html代码： &lt;div class="radar"&gt;&lt;/div&gt; 2、css代码： * { box-sizing: border-box; } html, body { background-color: #000; } .radar { background: -webkit-radial-gradient(center, rgba(0, 0,...
【Axure教程】雷达扫描动态效果（航空信息可视化案例）
mushe93的博客
11-02 1266
今天教大家在Axure里制作雷达扫描的动态效果，我们会以航空信息可视化分析的案例来展开
Android 合并生成分享图片（View截图）
热门推荐
ShallCheek
07-22 4万+
用以前以前写过的自定义课表软件 ,Android 自定义View课程表表格 原生View截图合成分享的图片 看到的是图片只显示到11节处，下面的没有显示到 所以用到的 ScrollView 因此截图节截取ScrollView View的
TWaver动画之雷达扫描效果
最新发布
09-23
如果你想要实现雷达扫描效果，可以通过TWaver提供的动画效果来实现。 首先，你需要创建一个自定义的元素，并且在该元素上添加一个动画效果。代码示例如下： ``` public class RadarElement extends BasicShapeNode...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值