登录页的图片切换

不知道大家有没有发现，好多App在登录页都有图片的切换效果，增加视觉上的效果，让用户觉得这款App不会很单调。我记得QQ有一个版本就有。还是先上图，

其实这个直接放Gif就行。而我直接用属性动画也是可以的，这样能够减少App的体积。不多说直接上代码：

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" tools:context="com.youyu.loginanimation.MainActivity">

    <ImageView
        android:id="@+id/login4"
        android:scaleType="centerCrop"
        android:src="@drawable/img3"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <ImageView
        android:id="@+id/login3"
        android:scaleType="centerCrop"
        android:src="@drawable/img2"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <ImageView
        android:id="@+id/login2"
        android:scaleType="centerCrop"
        android:src="@drawable/img1"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <ImageView
        android:id="@+id/login1"
        android:scaleType="centerCrop"
        android:src="@drawable/img4"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <TextView
        android:gravity="center"
        android:background="@drawable/button_circle"
        android:layout_marginBottom="50dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:textSize="20sp"
        android:text="登录"
        android:layout_width="100dp"
        android:layout_height="wrap_content" />
</RelativeLayout>

然后用属性动画来实现：缩放、淡出的效果：

public class MainActivity extends AppCompatActivity {
    private ImageView mLogin4;
    private ImageView mLogin3;
    private ImageView mLogin2;
    private ImageView mLogin1;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            //透明状态栏
            getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            //透明导航栏
            getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
        }

        setContentView(R.layout.activity_main);

        mLogin4 = (ImageView) findViewById(R.id.login4);
        mLogin3 = (ImageView) findViewById(R.id.login3);
        mLogin2 = (ImageView) findViewById(R.id.login2);
        mLogin1 = (ImageView) findViewById(R.id.login1);

        //设置动画
        initAniamtion();
    }

    private void initAniamtion() {
        /***
         * 第一张切换到第二张
         */
        //透明动画
        ObjectAnimator animatorAlpha1 = ObjectAnimator.ofFloat(mLogin1, "alpha", 1.0f, 0f);
        ObjectAnimator animatorAlpha2 = ObjectAnimator.ofFloat(mLogin2, "alpha", 0f, 1.0f);
        //缩放动画
        ObjectAnimator animatorScale1 = ObjectAnimator.ofFloat(mLogin1, "scaleX", 1.0f, 1.3f);
        ObjectAnimator animatorScale2 = ObjectAnimator.ofFloat(mLogin1, "scaleY", 1.0f, 1.3f);
        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.setDuration(3000);
        animatorSet.play(animatorAlpha1).with(animatorAlpha2).with(animatorScale1).with(animatorScale2);

        /***
         * 第二张切换到第三张
         */
        //透明动画
        ObjectAnimator animatorAlpha3 = ObjectAnimator.ofFloat(mLogin2, "alpha", 1.0f, 0f);
        ObjectAnimator animatorAlpha4 = ObjectAnimator.ofFloat(mLogin3, "alpha", 0f, 1.0f);
        //缩放动画
        ObjectAnimator animatorScale3 = ObjectAnimator.ofFloat(mLogin2, "scaleX", 1.0f, 1.3f);
        ObjectAnimator animatorScale4 = ObjectAnimator.ofFloat(mLogin2, "scaleY", 1.0f, 1.3f);
        AnimatorSet animatorSet2 = new AnimatorSet();
        animatorSet2.setDuration(3000);
        animatorSet2.play(animatorAlpha3).with(animatorAlpha4).with(animatorScale3).with(animatorScale4);

        /***
         * 第三张切换到第四张
         */
        //透明动画
        ObjectAnimator animatorAlpha5 = ObjectAnimator.ofFloat(mLogin3, "alpha", 1.0f, 0f);
        ObjectAnimator animatorAlpha6 = ObjectAnimator.ofFloat(mLogin4, "alpha", 0f, 1.0f);
        //缩放动画
        ObjectAnimator animatorScale5 = ObjectAnimator.ofFloat(mLogin3, "scaleX", 1.0f, 1.3f);
        ObjectAnimator animatorScale6 = ObjectAnimator.ofFloat(mLogin3, "scaleY", 1.0f, 1.3f);
        AnimatorSet animatorSet3 = new AnimatorSet();
        animatorSet3.setDuration(3000);
        animatorSet3.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animator) {

            }

            @Override
            public void onAnimationEnd(Animator animator) {

                //把图片一复位
                mLogin1.setScaleX(1.0f);
                mLogin1.setScaleY(1.0f);

            }

            @Override
            public void onAnimationCancel(Animator animator) {

            }

            @Override
            public void onAnimationRepeat(Animator animator) {

            }
        });
        animatorSet3.play(animatorAlpha5).with(animatorAlpha6).with(animatorScale5).with(animatorScale6);

        /***
         * 第四张切换到第一张
         */
        //透明动画
        ObjectAnimator animatorAlpha7 = ObjectAnimator.ofFloat(mLogin4, "alpha", 1.0f, 0f);
        ObjectAnimator animatorAlpha8 = ObjectAnimator.ofFloat(mLogin1, "alpha", 0f, 1.0f);
        //缩放动画
        ObjectAnimator animatorScale7 = ObjectAnimator.ofFloat(mLogin4, "scaleX", 1.0f, 1.3f);
        ObjectAnimator animatorScale8 = ObjectAnimator.ofFloat(mLogin4, "scaleY", 1.0f, 1.3f);
        AnimatorSet animatorSet4 = new AnimatorSet();
        animatorSet4.setDuration(3000);
        animatorSet4.play(animatorAlpha7).with(animatorAlpha8).with(animatorScale7).with(animatorScale8);


        AnimatorSet animatorSetT = new AnimatorSet();
        animatorSetT.playSequentially(animatorSet, animatorSet2, animatorSet3, animatorSet4);
        animatorSetT.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animator) {

            }

            @Override
            public void onAnimationEnd(Animator animator) {
                //把其他的图片复位
                mLogin2.setScaleX(1.0f);
                mLogin2.setScaleY(1.0f);
                mLogin3.setScaleX(1.0f);
                mLogin3.setScaleY(1.0f);
                mLogin4.setScaleX(1.0f);
                mLogin4.setScaleY(1.0f);

                animator.start();

            }

            @Override
            public void onAnimationCancel(Animator animator) {

            }

            @Override
            public void onAnimationRepeat(Animator animator) {

            }
        });


        animatorSetT.start();


    }

}

OK，这样就搞定了。