Android仿google now效果的呼吸按鈕

發(fā)布時間：2020-10-13 21:15:48 來源：腳本之家閱讀：207 作者：VitoZhangDeveloper 欄目：移動開發(fā)

呼吸按鈕是我最早接觸到為view添加動畫效果的需求，剛剛參加安卓開發(fā)工作，要求設(shè)計一個好看的語音按鈕效果，就有了這個成果，但是后來又改方案了，所以我也就沒有對該按鈕進行封裝為一個自定義按鈕，本文主要是展示一種合理組合利用animation來實現(xiàn)一些好看的動畫效果，只是一種思路。

先上圖：

實現(xiàn)該效果，重要的是我們要如何實現(xiàn)這種動態(tài)的呼吸效果，因為是一種非線性運動，直接實現(xiàn)起來有些麻煩，特別是對于像我剛剛?cè)胄械牟锁B來說。但是幸好，android的SDK提供了一種叫interpolator屬性，通過設(shè)置該屬性為accelerate_decelerate_interpolato可以實現(xiàn)加速效果，使動畫看起來更豐滿，更具活力。

首先，我們需要三個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中，對按鈕設(shè)置點擊事件，喚起開始動畫->執(zhí)行呼吸動畫->喚起結(jié)束對話。同時對開始和接收的動畫進行監(jiān)聽，執(zhí)行完畢后完成顯示和隱藏背景的設(shè)置。部分代碼：

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動畫相關(guān)部分代碼

 //動畫監(jiān)聽
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) {

      }
    });

好了，一個呼吸按鈕就成了，有興趣的可以把呼吸按鈕封裝一下，做成一個自定義按鈕來使用。最后附上github鏈接：BreathButton

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細節(jié)

Android仿google now效果的呼吸按鈕

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽