Android的View間漸變

編寫(xiě):XizhiXu - 原文:http://developer.android.com/training/animation/crossfade.html

漸變動(dòng)畫(huà)（也叫消失）通常指漸漸的淡出某個(gè)UI組件，同時(shí)同步地淡入另一個(gè)。當(dāng)App想切換內(nèi)容或View的情況下，這種動(dòng)畫(huà)很有用。漸變簡(jiǎn)短不易察覺(jué)，同時(shí)又提供從一個(gè)界面到下一個(gè)之間流暢的轉(zhuǎn)換。如果在需要轉(zhuǎn)換的時(shí)候沒(méi)有使用任何動(dòng)畫(huà)效果，這會(huì)使得轉(zhuǎn)換看上去感到生硬而倉(cāng)促。

下面是一個(gè)利用進(jìn)度指示漸變到一些文本內(nèi)容的例子。

如果你想跳過(guò)這部分介紹直接查看樣例，下載并運(yùn)行樣例App然后選擇漸變例子。查看下列文件中的代碼實(shí)現(xiàn)：

• src/CrossfadeActivity.java
• layout/activity_crossfade.xml
• menu/activity_crossfade.xml

創(chuàng)建View

創(chuàng)建兩個(gè)我們想相互漸變的View。下面的例子創(chuàng)建了一個(gè)進(jìn)度提示圈和可滑動(dòng)文本View。

<FrameLayout xmlns:android="/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ScrollView xmlns:android="/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>

設(shè)置動(dòng)畫(huà)

為設(shè)置動(dòng)畫(huà)，我們需要按照如下步驟來(lái)做：

1. 為我們想漸變的View 創(chuàng)建成員變量。在之后動(dòng)畫(huà)應(yīng)用途中修改View的時(shí)候我們會(huì)需要這些引用。

2. 對(duì)于被淡入的View，設(shè)置它的visibility為GONE。這樣防止view再占據(jù)布局的空間，而且也能在布局計(jì)算中將其忽略，加速處理過(guò)程。

3. 將config_shortAnimTime系統(tǒng)屬性暫存到一個(gè)成員變量里。這個(gè)屬性為動(dòng)畫(huà)定義了一個(gè)標(biāo)準(zhǔn)的“短”持續(xù)時(shí)間。對(duì)于細(xì)微或者快速發(fā)生的動(dòng)畫(huà)，這是個(gè)很理想的持續(xù)時(shí)段。也可以根據(jù)實(shí)際需求使用config_longAnimTime或config_mediumAnimTime。

下面的例子使用了前文提到的布局文件：

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);

        // Initially hide the content view.
        mContentView.setVisibility(View.GONE);

        // Retrieve and cache the system's default "short" animation time.
        mShortAnimationDuration = getResources().getInteger(
                android.R.integer.config_shortAnimTime);
    }

漸變View

進(jìn)行了上述配置之后，接下來(lái)就讓我們實(shí)現(xiàn)漸變動(dòng)畫(huà)吧：

1. 對(duì)于正在淡入的View，設(shè)置它的alpha值為0并且設(shè)置visibility為 VISIBLE（記住他起初被設(shè)置成了 GONE）。這樣View就變成可見(jiàn)的了，但是此時(shí)它是透明的。

2. 對(duì)于正在淡入的View，把a(bǔ)lpha值從0動(dòng)態(tài)改變到1。同時(shí)，對(duì)于淡出的View，把a(bǔ)lpha值從1動(dòng)態(tài)變到0。

3. 使用Animator.AnimatorListener中的 onAnimationEnd()，設(shè)置淡出View的visibility為GONE。即使alpha值為0，也要把View的visibility設(shè)置成GONE來(lái)防止 view 占據(jù)布局空間，還能把它從布局計(jì)算中忽略，加速處理過(guò)程。

詳見(jiàn)下面的例子：

private View mContentView;
private View mLoadingView;
private int mShortAnimationDuration;

...

private void crossfade() {

    // Set the content view to 0% opacity but visible, so that it is visible
    // (but fully transparent) during the animation.
    mContentView.setAlpha(0f);
    mContentView.setVisibility(View.VISIBLE);

    // Animate the content view to 100% opacity, and clear any animation
    // listener set on the view.
    mContentView.animate()
            .alpha(1f)
            .setDuration(mShortAnimationDuration)
            .setListener(null);

    // Animate the loading view to 0% opacity. After the animation ends,
    // set its visibility to GONE as an optimization step (it won't
    // participate in layout passes, etc.)
    mLoadingView.animate()
            .alpha(0f)
            .setDuration(mShortAnimationDuration)
            .setListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                    mLoadingView.setVisibility(View.GONE);
                }
            });
}