Android开发学习笔记——左右屏切换动画

如果想使一个App使用起来更加友好，适当的动画是少不了的。比如屏幕左右的切换，就可以给用户一个寓意是这两个屏幕之间是上下级的关系。

Android中有比较丰富的关于动画的API。左右屏幕切换就可以只用自带的API。

完成左右屏幕切换需要做以下三件事：

1. 写出需要跳转的Activity及它的布局文件；
2. 写出动画布局文件；
3. 在Acitivity中调用布局文件。

第一件事非常简单了，我们只写两个界面，每个界面上有一个按钮示意点击它可以跳转到另一个界面。具体代码略。

第二件事是实现左右屏切换动画的核心。我们试想若要完成两个屏幕的左右切换，即b在a的右侧进入，a在b的左侧滑出，然后a在b的左侧进入，b在a的右侧滑出，这实际上包含了四个动作：左进，右出，右进，左出。那么相对应的，我们需要四个控制动画的布局文件。我们将其命名如下，并创建这几个文件。注意动画文件应该放在res下面的anim文件夹里。

四个文件的目录结构如下：

然后我们以控制从左侧进入的enterfromleft.xml文件为例，具体看下左右移动的动画应该怎么来写。

Android中有很多动画效果，比如以下几个，Alpha：淡入淡出，Scale：缩放，Rotate：旋转，Translate：移动。我们要实现左右屏的移动，需要用到translate标签。

translate标签实现简单的左右移动需要以下几个主要属性：

1. duration: 动画持续时间，整数值单位微秒
2. fromXDelta: 起始点的位置，可以用百分比也可以用像素值
3. toXDelta: 终止点的位置
4. interpolator: 动画方式，通常调用android系统属性，比如我们使用的accelerate_interpolator，表示动画逐渐加速
5. startOffset: 起始延迟时间，整数值，单位微秒

在这里需要搞清楚XDelta的值：

xDelta记录的是一个activity左下角的位置。坐标示意图如下：

以我们要做的从左侧进入为例，一个屏幕要从左侧进入，那么它的左下角一开始的坐标应该是-100%，进入到屏幕以后，它的左下角坐标变为0%。所以它的fromXDelta=-100%，toXDelta=0%。

这样一个从左侧进入的布局文件就可以写出来了：

animation_enterfromleft.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 从屏幕左边进入 -->
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fromXDelta="-100%p"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:startOffset="0"
    android:toXDelta="0%p" />

同样方法我们可以写出其他三个动画的布局文件：

animation_enterfromright.xml

<?xml version="1.0" encoding="utf-8"?>
<!--从屏幕右边进入-->
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fromXDelta="100%p"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:startOffset="0"
    android:toXDelta="0%p" />

animation_fadefromleft.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 从屏幕左边退出 -->
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fromXDelta="0%p"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:startOffset="0"
    android:toXDelta="-100%p" />

animation_fadefromright.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 从屏幕右侧退出 -->
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fromXDelta="0%p"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:startOffset="0"
    android:toXDelta="100%p" />

这些都做好之后，我们可以进入到最后一步，在activity中调用这些动画。

我们想让第二个屏幕在第一个屏幕右侧进入，第一个屏幕在第二个屏幕左侧退出，那么可以在第一个屏幕的按钮上写入如下响应函数：

//page2 enter from right
	public void goTo2(View v)
	{
		Intent intent = new Intent();
		intent.setClass(Activity1.this, Activity2.class);
		startActivity(intent);
		overridePendingTransition(R.anim.animation_enterfromright,R.anim.animation_fadefromleft);
	}

这里我们应用了一个重写动画的函数叫做：overridePendingTransition，它是Activity中的一个方法，定义如下：

overridePendingTransition(int enterAnim, int exitAnim)

Call immediately after one of the flavors of  startActivity(Intent) or  finish() to specify an explicit transition animation to perform next.

也就是说当它写在startActivity(Intent)或者finish()后面的时候，可以给跳转或退出指定一种移动动画。

同样我们在第二个activity中也加入这个响应函数，注意将动画更换为2从1的右侧退出，1从2的左侧进入。

三件事都做完，我们可以来看下效果：

完整源码下载：http://download.csdn.net/detail/smoooothly/5213694

注意：有些手机屏蔽了动画渲染，所以可能看不出效果，测试可用模拟器。