Android breath button imitating Google now effect

The breath button was the first one that I came into contact with the need to add animation effects to the view. I just participated in Android development and asked to design a good-looking voice button effect. This achievement was achieved, but the scheme was changed later, so I didn't package the button as a user-defined button, This paper mainly shows a reasonable combination of using animation to achieve some good-looking animation effects, which is just an idea.

Start with the above figure:

To achieve this effect, the important thing is how to achieve this dynamic breathing effect. Because it is a nonlinear motion, it is troublesome to realize it directly, especially for rookies like me. Fortunately, the Android SDK provides a property called interpolator, which is set to accelerate_ decelerate_ Interpolato can achieve acceleration effect and make the animation look fuller and more dynamic.

First, we need three anim files.

Enter effect 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>

Breathing effect 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>

Exit effect 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>

Then there is the Java code. The code is very simple. In mainactivity, set the click event for the button, evoke the start animation - > execute the breath animation - > evoke the end of the conversation. At the same time, monitor the start and received animation, and complete the setting of displaying and hiding the background after execution. Part code:

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;
        }

      }
    });

}

Animation animation related part code

 //动画监听
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) {

      }
    });

Well, a breath button is enough. If you are interested, you can encapsulate the breath button and make it into a custom button to use. Finally, attach GitHub link: breathbutton

The above is the whole content of this article. I hope it will help you in your study, and I hope you will support us a lot.