Crossfading （淡入淡出）动画

最新推荐文章于 2022-05-03 15:29:10 发布

原创最新推荐文章于 2022-05-03 15:29:10 发布 · 895 阅读

0 ·

CC 4.0 BY-SA版权

【Android开发进阶】专栏收录该内容

21 篇文章

订阅专栏

本文介绍如何在Android应用中实现Crossfading动画效果，即从一个视图平滑过渡到另一个视图的过程。通过调整视图的alpha值并配合使用Animator监听器，可以使视图切换更加流畅。

Crossfading ，中文翻译叫做淡入淡出（电影拍摄中又叫做dissolve，即叠化，从一个镜头淡入另一个镜头）。Android中该动画效果主要在某个UI组件逐渐消失，同时另外一个组件逐渐显现时使用。当你的App需要切换视图或者切换内容时，这个动画效果非常实用。Crossfading精妙短小，但是可以非常流畅的从一个视图过渡到另外一个视图。如果不使用它，过渡过程将显得非常生硬和突然。

具体使用如下：

####1、创建布局文件 activity_crossfade.xml
Crossfading是从一个视图过渡到另一个视图，所以你需要创建两个视图。下面使用RecycleView作为ContentView实现淡入，ProgressBar作为LoadingView实现淡出,代码如下：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RecycleView 
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <ProgressBar android:id="@+id/loading"
        style="?android:progressBarStyleLarge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center" />

</FrameLayout>

对于需要淡入的视图，将其的visibility 设置为GONE 。这样可以阻止该视图占据布局空间并且在计算布局时将其忽略，可以加速该过程。

2、实现淡入淡出效果

对于淡入的视图，将其alpha值设置为0，并且将其visibility 设置为VISIBLE。使其可见，但是完全透明。
对于淡入的视图，其alpha 从0过渡到1 ，与此同时，将淡出的视图的alpha值从1 过渡到0。
对于淡出的视图，设置Animator.AnimatorListener监听器，实现onAnimationEnd()方法，当动画结束时，将其visibility设置为GONE。

CrossfadeActivity.java主要代码如下：

public class CrossfadeActivity extends Activity {

    private View mContentView;
    private View mLoadingView;
    private int mShortAnimationDuration=400;
    ...
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_crossfade);

        mContentView = findViewById(R.id.content);
        mLoadingView = findViewById(R.id.loading);

        // 初始化隐藏内容View
        mContentView.setVisibility(View.GONE);
        ...
    }
   ...
   ...
   private void crossfade() {

    // 将内容视图设置为0％不透明度但可见，以便在动画期间完全透明
    mContentView.setAlpha(0f);
    mContentView.setVisibility(View.VISIBLE);
    //通过动画化将内容视图设置为100％不透明度，并清除所有动画监听器
    mContentView.animate()
            .alpha(1f)
            .setDuration(mShortAnimationDuration)
            .setListener(null);

    //将加载视图设为0％不透明度。动画结束后，将加载视图可见性设置为GONE
    mLoadingView.animate()
            .alpha(0f)
            .setDuration(mShortAnimationDuration)
            .setListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                    mLoadingView.setVisibility(View.GONE);
                }
            });
}

通过上述步骤就可实现Crossfading,下面两张图就是使用和未使用情况下的效果图：