Android页面翻转动画（模仿CSDN账号登录的翻转效果）

昨天下载了CSDN的APP，进入多种方式选择登录的页面，然后我选择用CSDN账号登录，发现有页面翻转的效果进入登录页面。瞬时感觉好炫，自己感觉效果很好。平时别的APP登录的时候,就是直接进入登录页面，没有任何效果。这次看到旋转的效果，顿时眼前一亮，所以我就研究了一下，想做个类似的效果。这边我主要用了两个Fragment和自定义的动画效果。下面上几张图，按照CSDN登录UI做的，UI做的比较粗糙，可还能将就看。

                                               多种方式选择登录界面

点击CSDN账号登录后的旋转界面，（因为不会用动画展示，只能截图看看了）

                                                                        登录界面

接下来，我们开始这个Android程序的创建。

第一步，新建民名为RotationLoginDemo的Android项目，从图我们可以看到翻转前后有两个界面，那么这两个界面从用什么做的呢？我不知道他们是怎么实现的，这里我用了两个Fragment，分别为SelectLoginFragment和LoginFragment。接着就开始建这两个Fragment所对应的布局文件fragment_select_login和fragment_login，下面的就是这两个布局文件的代码。

fragment_select_login.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/layout_bottom" >

        <LinearLayout
            android:id="@+id/text_sdn"
            android:layout_width="match_parent"
            android:layout_height="80dip"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:orientation="horizontal" >

            <TextView
                android:id="@+id/text_c"
                android:layout_width="wrap_content"
                android:layout_height="80dip"
                android:gravity="center"
                android:text="C "
                android:textColor="#CC0000"
                android:textSize="60sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="80dip"
                android:gravity="center"
                android:text="S D N"
                android:textColor="#000000"
                android:textSize="60sp" />
        </LinearLayout>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="30dip"
            android:layout_below="@id/text_sdn"
            android:gravity="center"
            android:text="全 球 最 大 的 中 文 IT 社 区"
            android:textColor="#000000"
            android:textSize="20sp" />
    </RelativeLayout>

    <LinearLayout
        android:id="@+id/layout_bottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="vertical"
        android:paddingLeft="10dip"
        android:paddingRight="10dip" >

        <Button
            android:id="@+id/btn_csdn_login"
            style="?android:attr/buttonBarButtonStyle"
            android:layout_width="match_parent"
            android:layout_height="50dip"
            android:background="@drawable/bg_btn"
            android:text="CSDN账号登录"
            android:textColor="#666666"
            android:textSize="16sp" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dip"
            android:orientation="horizontal" >

            <Button
                style="?android:attr/buttonBarButtonStyle"
                android:layout_width="0dip"
                android:layout_height="40dip"
                android:layout_marginRight="10dip"
                android:layout_weight="1"
                android:background="@drawable/bg_btn"
                android:text="微博"
                android:textColor="#666666"
                android:textSize="16sp" />

            <Button
                style="?android:attr/buttonBarButtonStyle"
                android:layout_width="0dip"
                android:layout_height="40dip"
                android:layout_marginRight="10dip"
                android:layout_weight="1"
                android:background="@drawable/bg_btn"
                android:text="微信"
                android:textColor="#666666"
                android:textSize="16sp" />

            <Button
                style="?android:attr/buttonBarButtonStyle"
                android:layout_width="0dip"
                android:layout_height="40dip"
                android:layout_weight="1"
                android:background="@drawable/bg_btn"
                android:text="QQ"
                android:textColor="#666666"
                android:textSize="16sp" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="10dip"
                android:layout_marginTop="30dip"
                android:gravity="center"
                android:text="创建账号"
                android:textColor="#666666"
                android:textSize="16sp" />
        </LinearLayout>
    </LinearLayout>

</RelativeLayout>

fragment_login.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    android:orientation="vertical"
    android:padding="16dp" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/text_cancel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="取消"
            android:textColor="#000000"
            android:textSize="16sp"
            android:textStyle="bold" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_gravity="center_horizontal"
            android:lineSpacingMultiplier="1.2"
            android:text="登录"
            android:textColor="#000000"
            android:textSize="18sp"
            android:textStyle="bold" />
    </RelativeLayout>

    <EditText
        style="@android:style/Widget.TextView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dip"
        android:background="@null"
        android:hint="输入用户名"
        android:textSize="16sp" />

    <EditText
        style="@android:style/Widget.TextView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="30dip"
        android:layout_marginTop="10dip"
        android:background="@null"
        android:hint="输入密码"
        android:textSize="16sp" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/bg_btn"
        android:text="登 录" />

</LinearLayout>

第二步，自定义动画：

在res文件夹下新建文件名为animator,下面具体结构如下图：

下面为四个动画的xml的代码：

left_in.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Before rotating, immediately set the alpha to 0. -->
    <objectAnimator
        android:valueFrom="1.0"
        android:valueTo="0.0"
        android:propertyName="alpha"
        android:duration="0" />

    <!-- Rotate. -->
    <objectAnimator
        android:valueFrom="-180"
        android:valueTo="0"
        android:propertyName="rotationY"
        android:interpolator="@android:interpolator/accelerate_decelerate"
        android:duration="1000" />

    <!-- Half-way through the rotation (see startOffset), set the alpha to 1. -->
    <objectAnimator
        android:valueFrom="0.0"
        android:valueTo="1.0"
        android:propertyName="alpha"
        android:startOffset="500"
        android:duration="1" />
</set>

left_out.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Rotate. -->
    <objectAnimator
        android:valueFrom="0"
        android:valueTo="180"
        android:propertyName="rotationY"
        android:interpolator="@android:interpolator/accelerate_decelerate"
        android:duration="1000" />

    <!-- Half-way through the rotation (see startOffset), set the alpha to 0. -->
    <objectAnimator
        android:valueFrom="1.0"
        android:valueTo="0.0"
        android:propertyName="alpha"
        android:startOffset="500"
        android:duration="1" />
</set>

right_in.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Before rotating, immediately set the alpha to 0. -->
    <objectAnimator
        android:valueFrom="1.0"
        android:valueTo="0.0"
        android:propertyName="alpha"
        android:duration="0" />

    <!-- Rotate. -->
    <objectAnimator
        android:valueFrom="180"
        android:valueTo="0"
        android:propertyName="rotationY"
        android:interpolator="@android:interpolator/accelerate_decelerate"
        android:duration="1000" />

    <!-- Half-way through the rotation (see startOffset), set the alpha to 1. -->
    <objectAnimator
        android:valueFrom="0.0"
        android:valueTo="1.0"
        android:propertyName="alpha"
        android:startOffset="500"
        android:duration="1" />
</set>

right_out.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Rotate. -->
    <objectAnimator
        android:valueFrom="0"
        android:valueTo="-180"
        android:propertyName="rotationY"
        android:interpolator="@android:interpolator/accelerate_decelerate"
        android:duration="1000" />

    <!-- Half-way through the rotation (see startOffset), set the alpha to 0. -->
    <objectAnimator
        android:valueFrom="1.0"
        android:valueTo="0.0"
        android:propertyName="alpha"
        android:startOffset="500"
        android:duration="1" />
</set>

第三步，创建Activity

package com.example.rotationcarddemo;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.app.Fragment;
import android.app.FragmentManager;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.view.Window;

@SuppressLint("NewApi")
public class MainActivity extends Activity implements FragmentManager.OnBackStackChangedListener
{

    private boolean mShowingBack = false;
    private int left_in = R.animator.left_in;
    private int left_out = R.animator.left_out;
    private int right_in = R.animator.right_in;
    private int right_out = R.animator.right_out;

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        

        //判断<span style="font-family: Arial, Helvetica, sans-serif;">savedInstanceState 是否为null,如果为null,则说明这是创建的全新的对象，如果不为null,则是重建上一次销毁的对象</span>
        if (savedInstanceState == null)
        {
            getFragmentManager().beginTransaction().add(R.id.container, new SelectLoginFragment())
                    .commit();
        }
        else
        {
            mShowingBack = getFragmentManager().getBackStackEntryCount() > 0;
        }
        getFragmentManager().addOnBackStackChangedListener(this);
    }

    /**
     * 选择登录方式界面
     */
    public class SelectLoginFragment extends Fragment
    {

        public SelectLoginFragment()
        {
        }

        @Override
        public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container,
                @Nullable Bundle savedInstanceState)
        {
            View rootView = (View) inflater.inflate(R.layout.fragment_select_login, container,
                    false);

            rootView.findViewById(R.id.btn_csdn_login).setOnClickListener(new OnClickListener()
            {

                @Override
                public void onClick(View v)
                {
                    AnimationRotate(new LoginFragment(), left_in, left_out, right_in, right_out);
                }
            });
            return rootView;
        }
    }

    /**
     * 登录页面
     */
    public class LoginFragment extends Fragment
    {

        public LoginFragment()
        {
        }

        @Override
        public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container,
                @Nullable Bundle savedInstanceState)
        {
            View rootView = (View) inflater.inflate(R.layout.fragment_login, container, false);
            rootView.findViewById(R.id.text_cancel).setOnClickListener(new OnClickListener()
            {

                @Override
                public void onClick(View v)
                {
                    AnimationRotate(new SelectLoginFragment(), right_in, right_out, left_in,
                            left_out);
                }
            });
            return rootView;
        }
    }

    /**
     * 旋转动画
     */
    private void AnimationRotate(Fragment fragment, int x, int y, int z, int f)
    {
        if (mShowingBack)
        {
            getFragmentManager().popBackStack();
            return;
        }
        mShowingBack = true;

        getFragmentManager().beginTransaction().setCustomAnimations(x, y, z, f)
                .replace(R.id.container, fragment).addToBackStack(null).commit();
    }

    @Override
    public void onBackStackChanged()
    {
        mShowingBack = (getFragmentManager().getBackStackEntryCount() > 0);
    }
}