<kbd id="afajh"><form id="afajh"></form></kbd>
<strong id="afajh"><dl id="afajh"></dl></strong>
    <del id="afajh"><form id="afajh"></form></del>
        1. <th id="afajh"><progress id="afajh"></progress></th>
          <b id="afajh"><abbr id="afajh"></abbr></b>
          <th id="afajh"><progress id="afajh"></progress></th>

          Android仿Google語音呼吸按鈕效果

          共 2110字,需瀏覽 5分鐘

           ·

          2022-03-18 16:06

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


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


          首先,我們需要三個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中,對按鈕設(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) {
          } });


          好了,一個呼吸按鈕就成了,有興趣的可以把呼吸按鈕封裝一下,做成一個自定義按鈕來使用。


          源碼地址:
          https://github.com/Vi2Zhang/BreathButton

          到這里就結(jié)束啦。
          瀏覽 104
          點贊
          評論
          收藏
          分享

          手機掃一掃分享

          分享
          舉報
          評論
          圖片
          表情
          推薦
          點贊
          評論
          收藏
          分享

          手機掃一掃分享

          分享
          舉報
          <kbd id="afajh"><form id="afajh"></form></kbd>
          <strong id="afajh"><dl id="afajh"></dl></strong>
            <del id="afajh"><form id="afajh"></form></del>
                1. <th id="afajh"><progress id="afajh"></progress></th>
                  <b id="afajh"><abbr id="afajh"></abbr></b>
                  <th id="afajh"><progress id="afajh"></progress></th>
                  俺来也俺去www色情网 | аⅴ资源中文在线天堂 | 免费国产黄色电影 | 91狠狠综合 | 97色干 |