Android仿Google语音呼吸按钮效果-技术圈

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

先上图：

实现该效果，重要的是我们要如何实现这种动态的呼吸效果，因为是一种非线性运动，直接实现起来有些麻烦，但是幸好，android的SDK提供了一种叫interpolator属性，通过设置该属性为accelerate_decelerate_interpolato可以实现加速效果，使动画看起来更丰满，更具活力。

首先，我们需要三个anim文件。

进入效果anim：

            android:interpolator="@android:anim/decelerate_interpolator"        android:shareInterpolator="true">            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"/>

呼吸效果anim：

             android:interpolator="@android:anim/accelerate_decelerate_interpolator"        android:shareInterpolator="true">            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"/>

退出效果anim：

             android:interpolator="@android:anim/accelerate_interpolator"        android:shareInterpolator="true">            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"/>

然后是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) {
            }        });

好了，一个呼吸按钮就成了，有兴趣的可以把呼吸按钮封装一下，做成一个自定义按钮来使用。

源码地址：

https://github.com/Vi2Zhang/BreathButton

到这里就结束啦。