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
4000
: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);
}
}