> 編寫:[XizhiXu](https://github.com/XizhiXu) - 原文:[http://developer.android.com/training/animation/crossfade.html](http://developer.android.com/training/animation/crossfade.html) 漸變動畫（也叫消失）通常指漸漸的淡出某個 UI 組件，同時同步地淡入另一個。在你 App 想切換內容或 view的情況下，這種動畫很有用。漸變簡短不易察覺，它也能提供從一個界面到下一個之間流暢的轉換。當你不使用它們，不管怎么樣轉換經常感到生硬而倉促。 下面是一個利用進度指示漸變到一些文本內容的例子。 如果你想跳過看整個例子，[下載](http://developer.android.com/shareables/training/Animations.zip) App 樣例然后運行漸變例子。查看下列文件中的代碼實現： - src/CrossfadeActivity.java - layout/activity_crossfade.xml - menu/activity_crossfade.xml ### 創建View 創建兩個你想相互漸變的 view。下面的例子創建了一個進度提示圈和可滑動文本 view。 ~~~ <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <ScrollView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/content" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView style="?android:textAppearanceMedium" android:lineSpacingMultiplier="1.2" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/lorem_ipsum" android:padding="16dp" /> </ScrollView> <ProgressBar android:id="@+id/loading_spinner" style="?android:progressBarStyleLarge" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" /> </FrameLayout> ~~~ ### 設置動畫 為設置動畫，你需要： 1. 為你想漸變的 view 創建成員變量。之后動畫應用途中修改 View 的時候你會需要這些引用的。 1. 對于被淡出的 view，設置它的 visibility 為 [GONE](http://developer.android.com/reference/android/view/View.html#GONE)。這樣防止 view 再占據布局的空間，而且也能在布局計算中將其忽略，加速處理過程。 1. 將 [config_shortAnimTime](http://developer.android.com/reference/android/R.integer.html#config_shortAnimTime) 系統屬性暫存到一個成員變量里。這個屬性為動畫定義了一個標準的“短”持續時間。對于微妙或者快速發生的動畫，這是個很理想的時間段。[config_longAnimTime](http://developer.android.com/reference/android/R.integer.html#config_longAnimTime) 和 [config_mediumAnimTime](http://developer.android.com/reference/android/R.integer.html#config_mediumAnimTime) 也行，如果你想用的話。 下面是個內容 view 的 [activity](# "An activity represents a single screen with a user interface.") 例子，它使用了前面所述代碼片段中的布局。 ~~~ public class CrossfadeActivity extends Activity { private View mContentView; private View mLoadingView; private int mShortAnimationDuration; ... @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_crossfade); mContentView = findViewById(R.id.content); mLoadingView = findViewById(R.id.loading_spinner); // 初始化隱藏這個View. mContentView.setVisibility(View.GONE); // 獲取并緩存系統默認的“短”時長 mShortAnimationDuration = getResources().getInteger( android.R.integer.config_shortAnimTime); } ~~~ ### 漸變View 既然正確地設置了那些 view，做下面這些事情來漸變他們吧： 1. 對于淡入的 view，設置 alpha 值為 0 并且設置 visibility 為 [VISIBLE](http://developer.android.com/reference/android/view/View.html#VISIBLE)（要記得他起初被設置成了 [GONE](http://developer.android.com/reference/android/view/View.html#GONE)）。這讓 view 可見了但是它是透明的。 1. 對于淡入的 view，把 alpha 值從 0 動態改變到 1。同時，對于淡出的 view，把 alpha 值從 1 動態變到 0。 1. 使用 [Animator.AnimatorListener](http://developer.android.com/reference/android/animation/Animator.AnimatorListener.html) 中的 [onAnimationEnd()](http://developer.android.com/reference/android/animation/Animator.AnimatorListener.html#onAnimationEnd(android.animation.Animator))，設置淡出 view 的 visibility 為 [GONE](http://developer.android.com/reference/android/view/View.html#GONE)。即使 alpha 值為 0，也要把 view 的 visibility 設置成 [GONE](http://developer.android.com/reference/android/view/View.html#GONE) 來防止 view 占據布局空間，還能把它從布局計算中忽略，加速處理過程。 下面方法展示如何去做： ~~~ private View mContentView; private View mLoadingView; private int mShortAnimationDuration; ... private void crossfade() { // 設置內容View為0%的不透明度，但是狀態為“可見”， // 因此在動畫過程中是一直可見的（但是為全透明）。 mContentView.setAlpha(0f); mContentView.setVisibility(View.VISIBLE); // 開始動畫內容View到100%的不透明度，然后清除所有設置在View上的動畫監聽器。 mContentView.animate() .alpha(1f) .setDuration(mShortAnimationDuration) .setListener(null); // 加載View開始動畫逐漸變為0%的不透明度， // 動畫結束后，設置可見性為GONE（消失）作為一個優化步驟 //（它將不再參與布局的傳遞等過程） mLoadingView.animate() .alpha(0f) .setDuration(mShortAnimationDuration) .setListener(new AnimatorListenerAdapter() { @Override public void onAnimationEnd(Animator animation) { mLoadingView.setVisibility(View.GONE); } }); } ~~~