Android动画之View间渐变

前言

渐变动画（也叫消失）通常指渐渐的淡出某个 UI 组件，同时同步地淡入另一个。在你 App 想切换内容或 view 的情况下，这种动画很有用。渐变简短不易察觉，它也能提供从一个界面到下一个之间流畅的转换。但当你不使用它们时，转换经常会感到生硬而仓促。
效果如下图所示：

实现步骤

1.创建view

创建两个你想相互渐变的 view。下面的例子创建了一个进度提示圈和可滑动文本 view。

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

2.设置动画

为设置动画，你需要：

• 1.为你想渐变的 view 创建成员变量。在之后动画应用途中修改 View 的时候你会需要这些引用的。
• 2.对于被淡入的 view，设置它的 visibility 为 GONE。这样防止 view 再占据布局的空间，而且也能在布局计算中将其忽略，加速处理过程。
• 3.将 config_shortAnimTime 系统属性暂存到一个成员变量里。这个属性为动画定义了一个标准的“短”持续时间。对于细微或者快速发生的动画，这是个很理想的持续时段。config_longAnimTime 和 config_mediumAnimTime 也行，如果你想用的话。

下面是个使用之前代码布局作为内容 view 的 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);
    }

3.渐变View

既然正确地设置了那些 view，做下面这些事情来渐变他们吧：

• 1.对于正在淡入的 view，设置它的 alpha 值为 0 并且设置 visibility 为 VISIBLE（记住他起初被设置成了 GONE）。这样就让 view 可见了但是它是透明的。
• 2.同样对于淡入的 view，把 alpha 值从 0 动态改变到 1。同时，对于淡出的 view，把 alpha 值从 1 动态变到 0。
• 3.使用 Animator.AnimatorListener 中的 onAnimationEnd()，设置淡出 view 的 visibility 为 GONE。即使 alpha 值为 0，也要把 view 的 visibility 设置成 GONE 来防止 view 占据布局空间，还能把它从布局计算中忽略，加速处理过程。

下面方法展示如何做这些：

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