快捷導(dǎo)航

Android仿google now效果的呼吸按鈕

更新時(shí)間：2019年08月22日 11:21:59 作者：VitoZhangDeveloper

這篇文章主要為大家詳細(xì)介紹了Android仿google now效果的呼吸按鈕簡(jiǎn)單實(shí)現(xiàn)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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

先上圖：

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

首先，我們需要三個(gè)anim文件。

進(jìn)入效果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代碼，代碼很簡(jiǎn)單，在MainActivity中，對(duì)按鈕設(shè)置點(diǎn)擊事件，喚起開始動(dòng)畫->執(zhí)行呼吸動(dòng)畫->喚起結(jié)束對(duì)話。同時(shí)對(duì)開始和接收的動(dòng)畫進(jìn)行監(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動(dòng)畫相關(guān)部分代碼

 //動(dòng)畫監(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);  //開始呼吸動(dòng)畫
        back.setVisibility(View.VISIBLE);
      }
    });

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

      }

      @Override
      public void onAnimationEnd(Animation animation) {
        back.clearAnimation(); //清除動(dòng)畫
        back.setVisibility(View.INVISIBLE);
      }

      @Override
      public void onAnimationRepeat(Animation animation) {

      }
    });

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: