渐变动画(也叫消失)通常指渐渐的淡出某个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"/>
<!--android:textAppearanceMedium以及?android:progressBarStyleLarge均为android相关的
内置样式,具体参见android官方参考手册-->
</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);
        }

    }
}

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

Logo

瓜分20万奖金 获得内推名额 丰厚实物奖励 易参与易上手

更多推荐