快捷導(dǎo)航

Android用動(dòng)畫(huà)顯示或隱藏視圖

更新時(shí)間：2022年01月17日 10:37:18 作者：最萌小熊貓

大家好，本篇文章主要講的是Android用動(dòng)畫(huà)顯示或隱藏視圖，感興趣的同學(xué)趕快來(lái)看一看吧，對(duì)你有幫助的話記得收藏一下

一、需求背景

有時(shí)候，我們需要在屏幕上顯示新的信息，同時(shí)移除舊的信息，一般情況下我們通過(guò)VISIBILITY或者GONE來(lái)對(duì)需要顯示或者隱藏的視圖進(jìn)行設(shè)置，這樣做的壞處是顯示或者隱藏的動(dòng)作變化非常突兀，而且有時(shí)候變化很快導(dǎo)致用戶無(wú)法注意到這些變化。這時(shí)就可以使用動(dòng)畫(huà)顯示或者隱藏視圖，通常情況下使用圓形揭露動(dòng)畫(huà)，淡入淡出動(dòng)畫(huà)或者卡片反轉(zhuǎn)動(dòng)畫(huà)。

二、創(chuàng)建淡入淡出動(dòng)畫(huà)

淡入淡出動(dòng)畫(huà)會(huì)逐漸淡出一個(gè)View或者ViewGroup，同時(shí)淡入另一個(gè)。此動(dòng)畫(huà)適合在應(yīng)用中切換內(nèi)容或者視圖的情況。這里使用ViewPropertyAnimator來(lái)創(chuàng)建這種動(dòng)畫(huà)。

下面的動(dòng)畫(huà)是從進(jìn)度指示器切換到某些內(nèi)容文字的淡入淡出示例。

1.創(chuàng)建布局文件

<androidx.constraintlayout.widget.ConstraintLayout
          android:layout_width="match_parent"
          android:layout_height="wrap_content">

      <!--淡入淡出動(dòng)畫(huà)-->
      <Button
              android:id="@+id/btn_use_fade_in_fade_out_animator"
              android:layout_width="0dp"
              android:layout_height="wrap_content"
              android:layout_marginHorizontal="10dp"
              android:onClick="doClick"
              android:text="@string/use_fade_in_fade_out_animator"
              app:layout_constraintLeft_toLeftOf="parent"
              app:layout_constraintRight_toRightOf="parent"
              app:layout_constraintTop_toTopOf="parent" />

      <androidx.constraintlayout.widget.ConstraintLayout
              android:layout_width="0dp"
              android:layout_height="0dp"
              app:layout_constraintDimensionRatio="w,1:1"
              app:layout_constraintLeft_toLeftOf="parent"
              app:layout_constraintRight_toRightOf="parent"
              app:layout_constraintTop_toBottomOf="@id/btn_use_fade_in_fade_out_animator">

          <TextView
                  android:id="@+id/tv_content"
                  android:layout_width="0dp"
                  android:layout_height="0dp"
                  android:padding="16dp"
                  android:text="@string/test_use_fade_in_fade_out_animator_text"
                  android:visibility="gone"
                  app:layout_constraintBottom_toBottomOf="parent"
                  app:layout_constraintLeft_toLeftOf="parent"
                  app:layout_constraintRight_toRightOf="parent"
                  app:layout_constraintTop_toTopOf="parent" />

          <!--進(jìn)度條-->
          <ProgressBar
                  android:id="@+id/loading_progress"
                  style="?android:progressBarStyleLarge"
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  app:layout_constraintBottom_toBottomOf="parent"
                  app:layout_constraintLeft_toLeftOf="parent"
                  app:layout_constraintRight_toRightOf="parent"
                  app:layout_constraintTop_toTopOf="parent" />

      </androidx.constraintlayout.widget.ConstraintLayout>


  </androidx.constraintlayout.widget.ConstraintLayout>

2.設(shè)置淡入淡出動(dòng)畫(huà)

對(duì)于需要淡入的動(dòng)畫(huà)，首先將其可見(jiàn)性設(shè)置為GONE，這一點(diǎn)在布局文件中已經(jīng)設(shè)置。在需要顯示淡入的View的時(shí)候，首先將其alpha設(shè)置為0，這樣可以保證View已經(jīng)顯示但是不可見(jiàn)。分別設(shè)置淡入的動(dòng)畫(huà)和淡出的動(dòng)畫(huà)，淡入的動(dòng)畫(huà)將其所在的View的alpha屬性從0變化到1，淡出的動(dòng)畫(huà)將其所在的View的alpha屬性從1變化到0對(duì)于淡出動(dòng)畫(huà)，在動(dòng)畫(huà)執(zhí)行完成后，將其的可見(jiàn)性設(shè)置為GONE，從而加快處理速度。

3.代碼實(shí)現(xiàn)

//開(kāi)始執(zhí)行淡入淡出動(dòng)畫(huà)
    private fun crossFade() {
        //設(shè)置需要淡入的View的alpha為0，可見(jiàn)性為VISIBLE
        mBinding.tvContent.apply {
            alpha = 0f
            visibility = View.VISIBLE
            //通過(guò)動(dòng)畫(huà)將透明度變?yōu)?.0
            animate()
                .alpha(1.0f)
                .setDuration(mShortAnimationDuration.toLong())
                .start()
        }

        //設(shè)置需要淡出的動(dòng)畫(huà)，將其alpha從1變?yōu)?，并通過(guò)監(jiān)聽(tīng)動(dòng)畫(huà)執(zhí)行事件，在動(dòng)畫(huà)結(jié)束后將View的可見(jiàn)性設(shè)置為GONE
        mBinding.loadingProgress.animate()
            .alpha(0f)
            .setDuration(mShortAnimationDuration.toLong())
            .setListener(object : AnimatorListenerAdapter() {
                override fun onAnimationEnd(animation: Animator?) {
                    super.onAnimationEnd(animation)
                    mBinding.loadingProgress.visibility = View.GONE
                }
            })
            .start()
    }