高仿google now效果的呼吸按钮简单实现

最新推荐文章于 2021-06-21 15:57:05 发布

VitoZhangDeveloper

最新推荐文章于 2021-06-21 15:57:05 发布

阅读量4.2k

点赞数 2

分类专栏： Android 文章标签：呼吸按钮 android动画仿googlenow

本文链接：https://blog.csdn.net/Vi2Zhang/article/details/50359770

版权

Android 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

该按钮是我最早接触到为view添加动画效果的需求，刚刚参加安卓开发工作，要求设计一个好看的语音按钮效果，就有了这个成果，但是后来又改方案了，所以我也就没有对该按钮进行封装为一个自定义按钮，本文主要是展示一种合理组合利用animation来实现一些好看的动画效果，只是一种思路。
先上图：

实现该效果，重要的是我们要如何实现这种动态的呼吸效果，因为是一种非线性运动，直接实现起来有些麻烦，特别是对于像我刚刚入行的菜鸟来说。但是幸好，android的SDK提供了一种叫interpolator属性，通过设置该属性为accelerate_decelerate_interpolato可以实现加速效果，使动画看起来更丰满，更具活力。
首先，我们需要三个anim文件。
进入效果anim：

    <?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/decelerate_interpolator"
    android:shareInterpolator="true">
    <scale 
        android:fromXScale="0.0"
        android:toXScale="0.9"
        android:fromYScale="0.0"
        android:toYScale="0.9"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="1000"/>
    </set>

呼吸效果anim：

    <?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:shareInterpolator="true">
    <scale
        android:fromXScale="0.9"
        android:toXScale="1.0"
        android:fromYScale="0.9"
        android:toYScale="1.0"
        android:duration="1500"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="infinite"
        android:repeatMode="reverse"/>
    </set>

退出效果anim：

    <?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:shareInterpolator="true">
    <scale 
        android:fromXScale="0.95"
        android:toXScale="0.0"
        android:fromYScale="0.95"
        android:toYScale="0.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="1000"/>
    </set>

然后是Java代码，代码很简单，在MainActivity中，对按钮设置点击事件，唤起开始动画->执行呼吸动画->唤起结束对话。同时对开始和接收的动画进行监听，执行完毕后完成显示和隐藏背景的设置。部分代码：

    private void initView() {
        voice.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (!isVisible) {
                    back.startAnimation(animationIn);
                    isVisible = true;
                } else {
                    back.startAnimation(animationExit);
                    isVisible = false;
                }

            }
        });

    }

Animtion动画相关部分代码

    //动画监听
    animationIn.setAnimationListener(new Animation.AnimationListener() {

            @Override
            public void onAnimationStart(Animation animation) {

            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }

            @Override
            public void onAnimationEnd(Animation animation) {
                back.startAnimation(animationVoice);    //开始呼吸动画
                back.setVisibility(View.VISIBLE);
            }
        });

        animationExit.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {

            }

            @Override
            public void onAnimationEnd(Animation animation) {
                back.clearAnimation();  //清除动画
                back.setVisibility(View.INVISIBLE);
            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });