Android动画之淡入淡出

2016-05-29 本文已影响2782人 keith666

以下内容来自Android Training，本人在此基础上作一些个人实践和记录，以便参考

效果

带crossfading：

crossfade_yes by keith

无crossfading下：

crossfade_no by keith

适用场景

当有两个视图需要交叉显示的时候，比如加载的progressbar和显示的内容，如果直接通过setVisibility来切换显示，会让人觉得过于生硬，此时用crossfading就会让操作变得顺滑自然

如何实现

用到知识点比较简单，就是用属性动画改变view的alpha值来实现，多写写代码也无妨，步骤如下:

创建Views
设置Animation
启动

详细:
1. 创建Views

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

2. 设置Animation

// src/CrossfadeActivity.java
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);
                }
            });
}

3. 启动

// src/CrossfadeActivity.java
@Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
        ...
        case R.id.action_toggle:
            // Toggle whether content is loaded.
            mContentLoaded = !mContentLoaded;
            // 启动动画
            showContentOrLoadingIndicator(mContentLoaded);
            return true;
        }

Notice

初始化时，对于要fade in的View，将它的visibility设成GONE,这样做不仅可以防止它占据layout的空间还可以省去layout的计算时间，加快layout的处理
可以使用系统提供的config_shortAnimTime属性,这个属性的时间对于需要频繁出现的动画来说是一个非常理想的值，同时系统还提供了其他的两个属性 config_longAnimTime和config_mediumAnimTime，使用如下：

mShortAnimationDuration = getResources().getInteger(android.R.integer.config_shortAnimTime);

对于fade out的View，将它的visibility设成GONE，虽然alpha值已经设为0了，但还是将它还是会占用layout的空间和影响layout的计算，所以要设成GONE

Reference

Crossfading Two Views