【Android Developers Training】 69. 视图切换的淡入淡出效果

时间：2022-11-21 00:14:18

注：本文翻译自Google官方的Android Developers Training文档，译者技术一般，由于喜爱安卓而产生了翻译的念头，纯属个人兴趣爱好。

原文链接：http://developer.android.com/training/animation/crossfade.html

淡入淡出动画（也称作溶解效果）：淡出一个组件并将另一个UI组件淡入的效果。淡入淡出效果一般来说都非常的短小，但是能提供一种屏幕切换的流畅转换。如果你不使用淡入淡出效果，屏幕切换回显得很突兀。

这里是一个淡入淡出的例子，它从一个进程指示器过度到文本内容。

淡入淡出动画

如果你希望略过这部分内容直接看代码样例，可以直接下载样例代码，然后选择淡入淡出动画的例子。下面的文件是实现代码：

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

一）. 创建视图

创建两个你希望实现淡入淡出的视图。下面的例子创建了一个进度指示器和一个可滑动的文本框：

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

二）. 设置动画

要设置动画的话：

创建你希望实现淡入淡出的视图的成员变量。当在执行动画期间改变视图时，你需要这些引用。

对于淡入的视图，将它的可视性（visibility）设置为GONE。这回阻止这个视图占据布局空间，然后再计算布局时将它省略，加速处理的速度。

缓存config_shortAnimTime这一系统属性到一个成员变量中。这个属性定义了一个标准的动画持续的一个较短的时间。这个持续的时间对于细微的动画效果或者那些频繁出现的动画是比较合适的。你也可以使用config_longAnimTime和config_mediumAnimTime。

这里的一个例子使用了上述的布局文件作为activity的布局：

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

    }

三）. 淡入淡出视图

现在视图已经配置好了，根据下面的步骤实现淡入淡出：

  • 对于淡入的视图，将alpha值设置为0，将可视性设置为VISIBLE（记住在之前它被预设为GONE），这样就使得这个视图边的可见但是是完全透明的。
  • 对于淡入的视图，将它的alpha动态地从0变化到1。同时，对于淡出的视图，将它的alpha动态地从1变化到0。
  • 在一个Animator.AnimatorListener中使用onAnimationEnd()，将淡出的视图的可视性设置为GONE。虽然它的alpha的值已经变成0了，但是将视图的可视性设置为GONE可以阻止它占据布局空间，并将它略出布局的计算过程，以此来提高程序的执行性能。

下面的代码是一个例子：

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

                }

            });

}

相关文章