Android动画之淡入淡出

作者: keith666 | 来源:发表于2016-05-29 11:05 被阅读2782次

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

    效果

    带crossfading

    crossfade_yes by keith

    无crossfading下:

    crossfade_no by keith

    适用场景

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

    如何实现

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

    1. 创建Views
    2. 设置Animation
    3. 启动

    详细:
    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

    1. 初始化时,对于要fade in的View,将它的visibility设成GONE,这样做不仅可以防止它占据layout的空间还可以省去layout的计算时间,加快layout的处理
    2. 可以使用系统提供的config_shortAnimTime属性,这个属性的时间对于需要频繁出现的动画来说是一个非常理想的值,同时系统还提供了其他的两个属性 config_longAnimTimeconfig_mediumAnimTime,使用如下:
    mShortAnimationDuration = getResources().getInteger(android.R.integer.config_shortAnimTime);
    
    1. 对于fade out的View,将它的visibility设成GONE,虽然alpha值已经设为0了,但还是将它还是会占用layout的空间和影响layout的计算,所以要设成GONE

    Reference

    1. Crossfading Two Views

    相关文章

      网友评论

        本文标题:Android动画之淡入淡出

        本文链接:https://www.haomeiwen.com/subject/bahqdttx.html