Android开发：View间渐变动画（实例）

叁歲伎倆 2022-05-04 08:28 644阅读 0赞

渐变动画（也叫消失）通常指渐渐的淡出某个UI组件，同时同步地淡入另一个。当App想切换内容或View的情况下，这种动画很有用。渐变简短不易察觉，同时又提供从一个界面到下一个之间流畅的转换。如果在需要转换的时候没有使用任何动画效果，这会使得转换看上去感到生硬而仓促。在这里我详细的讲解具体实现，并附上源代码。

这个实例实际上设计三个文件layout/activity\_crossfade.xml、menu/activity\_crossfade.xml、MainActivity

现在我附上三个文件的源码，在注释中讲解功能

layout/activity\_crossfade.xml

<?xml version="1.0" encoding="utf-8"?>
    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <ScrollView
            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>

menu/activity\_crossfade.xml

<?xml version="1.0" encoding="utf-8"?>
    <menu xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto">
        <item android:id="@+id/animation"
            android:title="@string/action_animation"
            app:showAsAction="ifRoom"/>
    </menu>

MainActivity.java

package com.example.power.mytest;
    
    import android.animation.Animator;
    import android.animation.AnimatorListenerAdapter;
    import android.support.v7.app.AppCompatActivity;
    import android.os.Bundle;
    import android.view.Menu;
    import android.view.MenuInflater;
    import android.view.MenuItem;
    import android.view.View;
    
    import java.util.zip.Inflater;
    
    
    public class MainActivity extends AppCompatActivity {
        private View mContentView;
        private View mLoadingView;
        private int mShortAnimationDuration;
        /*我们先定义两个View，一个int，其中mShortAnimationDuration用于保存
        * 动画的持续时间，时间我们定为android内置的值config_shortAnimTime，
        * 这个属性为动画定义了一个标准的“短”持续时间。对于细微或者快速发
        * 生的动画，这是个很理想的持续时段。也可以根据实际需求使用
        * config_longAnimTime或config_mediumAnimTime。*/
    
        @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);
    
            mContentView.setVisibility(View.GONE);
            /*首先设置TextView的可见性为View.GONE，这样防止view再占
            据布局的空间，而且也能在布局计算中将其忽略，加速处理过程。*/
    
            mShortAnimationDuration = getResources().getInteger(
                    android.R.integer.config_shortAnimTime
            );
    
            crossfade();
        }
    
        private void crossfade(){
            mContentView.setAlpha(0f);
            mContentView.setVisibility(View.VISIBLE);
            /*以上两步之后，TextView已经可见，并占据了布局空间，只是被
            * 设置为透明*/
    
            /*在mShortAnimationDuration时间内，TextView从0f变到1f*/
            mContentView.animate()
                    .alpha(1f)
                    .setDuration(mShortAnimationDuration)
                    .setListener(null);
    
            /*在mShortAnimationDuration时间内，ProgressBar从1f变到0f，但
            * 可能因为时间较短，progressbar还未来得及看清楚就已经消失，
            * 注意需要将Progressbar设置为View.GONE，以不占据布局空间*/
            mLoadingView.animate()
                    .alpha(0f)
                    .setDuration(mShortAnimationDuration)
                    .setListener(new AnimatorListenerAdapter() {
                        @Override
                        public void onAnimationEnd(Animator animation) {
                            mLoadingView.setVisibility(View.GONE);
                        }
                    });
        }
    
        @Override
        public boolean onCreateOptionsMenu(Menu menu) {
            MenuInflater menuInflater = getMenuInflater();
            menuInflater.inflate(R.menu.activity_crossfade, menu);
    
            return super.onCreateOptionsMenu(menu);
        }
    
        @Override
        public boolean onOptionsItemSelected(MenuItem item) {
            switch (item.getItemId()){
                case R.id.animation:
                    crossfade();
                    return true;
                default:
                    return super.onOptionsItemSelected(item);
            }
    
        }
    }

只需将上述源码黏贴与相应文件即可，查看具体效果，相关细节慢慢体会。