您的位置:首页 > 移动开发 > Android开发

两个view间淡入淡出 Crossfading Two Views——翻译自developer.android.com Training

2016-06-27 13:56 501 查看
淡入淡出动画,也叫作溶解,他可以逐渐地隐藏一个ui组件,同时逐渐地显示另一个。这个动画适合于你在app中想要切换两个view的内容的时候。淡入淡出动画十分的精巧和短小,但是有一个流畅的从一个屏幕变换的另一个屏幕的效果。如果你不适用它的话你的变换会感觉到生硬和唐突。

下面是一个进入指示器到文字的淡入淡出的例子。
https://developer.android.com/training/animation/anim_crossfade.mp4
如果你想进一步查看这个例子,可以下载并运行这个示例程序,选择淡入淡出的例子。关注下面几个文件。

src/CrossfadeActivity.java

layout/activity_crossfade.xml

menu/activity_crossfade.xml

创建Views

创建两个你想要淡入淡出的view。下面的代码创建了一个进度条和一个滚动的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.给你想要淡入淡出的views创建成员变量。在动画过程中改变views的时候,你需要这些参考变量。

2.对于已经隐藏的view,要设置可见性为GONE。这可以防止view占用布局控件,使它忽略布局计算,从而加快运行速度。

3.在一个成员变量里面缓存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);
    }

淡入淡出view

现在view都合理的构造完成了,通过下面的方法来实现淡入淡出。

1.对于要淡入的view,设置它的透明度alpha值为0,并设置可见性为VISIBLE。(注意,这个view在初始化的时候别设置成了GONE),这使得这个view可见但是是彻底透明的。

2.对于要淡入的view,设置使之的透明度的值从0变化到1。与此同时,对于要淡出的view,将其透明度从1变化到0。

3.使用Animator.AnimatorListener中的onAnimationEnd()方法,把要淡出的view的可见性设置为GONE。尽管透明度已经是0了,但是把可见性设置为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);
                }
            });
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: