Android---两个视图间的淡入淡出

时间:2022-03-20 23:43:51

本文译自:http://developer.android.com/training/animation/crossfade.html

淡入淡出动画(也可以作为溶解动画)是指在渐渐的淡出一个UI组件的同时,淡入另外一个UI组件。这种动画适用于应用程序中内容或View之间的切换。淡入淡出虽然非常细微和短暂,但却给屏幕间切换提供了连续平滑的变换。如果不使用它们,屏幕间的切换经常会让人感到突然或匆忙。

创建淡入淡出视图

创建两个要淡入淡出的视图,以下示例创建了一个进度指示和一个可滚动的文本视图:

<FrameLayoutxmlns: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时,要使用这些变量。

2. 对于要淡入的View,把它的可见性设置为GONE。这会防止这个View占据布局空间,并在布局计算中忽略它,这样会加快处理进度。

3. 在一个成员变量中缓存config_shortAnimTime系统属性。这个属性定义动画持续时间为”short”。对于细微的动画或频繁发生的动画,使用这个设置是一个理想的选择。还可以使用的设置有config_longAnimTimeconfig_mediumAnimTime.

下例代码使用了上面的布局文件作为Activity的内容视图:

publicclassCrossfadeActivityextendsActivity{

private View mContentView;
    private View mLoadingView;
    private intmShortAnimationDuration;

...

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

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

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

淡入淡出视图

至此,视图被正确的建立了,以下是淡入淡出它们的步骤:

1. 对于要淡入的View,把它的透明度设置为0,并且要把可见性设置为VISIBLE(记住:它的初始设置是GONE),这会让该View可见,但完全透明。

2. 对于要淡入的View,把动画透明度设置为从0到1。同时,对于要淡出的View,要把动画的透明度设置为从1到0。

3. 在Animator.AnimatorListener中使用onAnimationEnd()方法中,把要淡出的View的可见性设置为GONE。即使透明度设置为0,也要把它的可见性设置为GONE,这会防止对布局空间的占用,并且会忽略对它的布局计算,从而提高处理速度。

以下示例展示如何完成淡入淡出操作:

privateViewmContentView;
private View mLoadingView;
private int mShortAnimationDuration;

...

private void crossfade() {

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

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

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