Android Animations（一）：Crossfading（淡入淡出）

Crossfading 淡入淡出动画

原文链接

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

下面是一个Crossfading 实例，从进度指示器 过渡到文本内容 。

• 
  
• 创建新项目，并且创建下面三个文件
  

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

创建视图

Crossfading是从一个视图过渡到另一个视图，所以你需要创建两个视图。我们所做的例子包含一个Progress Indicator 和 可以滚动的TextView 。

<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. 为需要淡入淡出 的视图创建局部变量。在动画播放期间，需要对其进行修改。
2. 对于需要淡入 的视图，将其的visibility 设置为GONE 。这样可以阻止该视图占据布局空间并且在计算布局时将其忽略，可以加速该过程。
3. 将系统中的config_shortAnimTime 保存为局部变量，config_shortAnimTime 即标准的短动画周期，对于比较精小的动画或者使用非常频繁的动画，其过渡时间比较理想。你也可以使用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);
    }

实现淡入淡出效果

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

...

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