Material Design - 页面切换动画

bryan-minear

项目中为了页面就切换能够更加友好，通常会给切换过程添加上动画。页面切换动画的方法最早是在 api 2.0 的时候加入的。今天我们来了解，目前所有可以实现页面切换的方法。

首先还是先说明一下设置动画的 xml 文件怎么写，虽然多数人都已经对这个熟记于心，但是对于不怎么用动画的人而言，实在是很容易遗忘。

用于页面切换的动画文件需要写在 res/anim 中，这个目录新工程是需要手动创建的。之后我们需要在这个目录下创建页面划入和滑出的动画文件。我们暂时以左进右出为例来说明代码。

在 anim 文件下创建的 xml 文件是以<set/>为根节点的，在这个节点下，我们可以添加<translate/>、<alpha/>、<scale/>、<rotate/>等常见的动画。对于页面而言的话，其实有前两种就够了。如果需要更详细的内容，不妨看看官网的介绍：链接

总之，这里是我的 xml 文件：

<!-- in_from_left.xml 从屏幕左边进入 -->
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="@integer/anim_activity_duration"
        android:fromXDelta="-100%"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:toXDelta="0" />
    <alpha
        android:duration="@integer/anim_activity_duration"
        android:fromAlpha="1"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:toAlpha="1" />
</set>
<!-- out_to_right.xml 从屏幕右边退出 -->
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <translate
        android:duration="@integer/anim_activity_duration"
        android:fromXDelta="0%p"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:toXDelta="100%p" />
    <alpha
        android:duration="@integer/anim_activity_duration"
        android:fromAlpha="1"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:toAlpha="1" />
</set>

下面，我们来看看切换的实现方法。

方法一

这应该是目前适配了安卓 4.0 的最常见的方法：Activity#overridePendingTransition(int enterAnim, int exitAnim)。文档中对于这个方法的说明十分简单，只需要在Activity#startActivity或者Activity.finish之后调用就可以了。

那么不如就来试试。在 MainActivity 中添加按钮，跳转到 TargetActivity 中去。

MainActivity:
@Override
public void onClick(View view){
    switch (view.getId()) {
        case R.id.main_btn_1:
            startActivity(new Intent(MainActivity.this,TargetActivity.class));
            MainActivity.this.overridePendingTransition(R.anim.in_from_left, R.anim.out_to_right);
            break;
    }
}

TargetActivity:
@Override
public void onBackPressed() {
    super.onBackPressed();
    overridePendingTransition(R.anim.in_from_right,R.anim.out_to_left);
}

可以看到，最简单的切换动画就实现了，一点也不复杂。如果是项目中使用，只要封装到 BaseActivity 中，就可以应用到所有页面上。

GIF.gif

需要注意的是，如果没有在 onBackPressed() 或者页面其他调用 finish() 的地方调用 overridePendingTransition，页面销毁的时候是没有动画的，可以参考下面的效果：

GIF.gif

方法二

在 AppTheme 中做文章。Android 的内部属性太多，如果不是特别需要一般也不会去找这样一条属性来实现相应效果。而对于 Activity 而言，这里确实有这样一个属性可以使用。

<!-- Application theme. -->
<style name="AppTheme" parent="AppBaseTheme">

    <!-- All customizations that are NOT specific to a particular API-level can go here. -->
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowAnimationStyle">@style/ActivityAnim</item>
</style>

<style name="ActivityAnim">
    <item name="android:activityOpenEnterAnimation">@anim/in_from_right</item>
    <item name="android:activityOpenExitAnimation">@anim/out_to_left</item>
    <item name="android:activityCloseEnterAnimation">@anim/in_from_left</item>
    <item name="android:activityCloseExitAnimation">@anim/out_to_right</item>
</style>

这样设置好之后，所有页面的切换效果就都变成了@style/ActivityAnim设置的样子，如果有特殊页面需要其他的动画，可以利用方法一调用方法跳转，这样的页面最好把入口方法统一起来，以免之后开发的人忘记这个页面的动画是不一样的。

方法三

上面介绍的都是可以支持 android 4.0 以上机型的方法，但是之后这种是 5.0 以上版本的方法。如果应用需要在 5.0 以下版本也实现动画，就不建议使用这种方法。
** 3.1 动画说明
Transition API 主要描述了页面四种状态的动画，分别为：退出（exit），进入（enter），返回（return）和再次进入（reenter）。我们以 A 页面跳转到 B 页面为例说明上面的动画：

Activity A的退出变换（exit transition）决定了在A调用B的时候，A中的View是如何播放动画的。
Activity B的进入变换（enter transition）决定了在A调用B的时候，B中的View是如何播放动画的。
Activity B的返回变换（return transition）决定了在B返回A的时候，B中的View是如何播放动画的。
Activity A的再次进入变换（reenter transition）决定了在B返回A的时候，A中的View是如何播放动画的。

** 3.2 动画使用
要在应用中使用 Transition API 需要在应用动画的两个 Activity 中设定 Window.FEATURE_ACTIVITY_TRANSITIONS
和 Window.FEATURE_CONTENT_TRANSITIONS。

//通过主题设定
<item name="android:windowContentTransitions">true</item>
//通过代码设定，需要在 setContentView 之前调用
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);

然后，我们可以通过下面的方法使用动画(这些代码需要在 setContentView 之前调用)：

Activity.getWindow().setExitTransition(Transition transition)
Activity.getWindow().setEnterTransition(Transition transition)
Activity.getWindow().setReturnTransition(Transition transition)
Activity.getWindow().setReenterTransition(Transition transition)

在 TargetActivity 中我添加了下面的动画：

getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
Slide slide = new Slide();
slide.setDuration(1000);
getWindow().setReturnTransition(slide);
getWindow().setEnterTransition(slide);

setContentView(R.layout.activity_target);

可以看到效果：

GIF.gif

上面的效果中，ActionBar 和 NavigationBar 都有了动画，一般情况下我们是不需要的，这里我们可以在 Transition 中去除这两个 View，使它们不执行动画。

slide.excludeTarget(android.R.id.statusBarBackground,true);
slide.excludeTarget(android.R.id.navigationBarBackground,true);

上面的方法对于导航栏已经生效了，但是不知道为什么，对于顶部的菜单栏并没有失效，经过一番搜索也没有找到其他可以用的属性，不过对于开发影响也不是很大，毕竟现在没什么应用会用这个默认的顶部菜单栏。但是如果有人知道这里应该如何屏蔽这个布局的动画，请务必私信我，感恩。

Fragment 的切换动画

对于 Fragment 而言，就比较简单了，在 FragmentTransaction 类中有这样的方法：

    /**
     * Set specific animation resources to run for the fragments that are
     * entering and exiting in this transaction. These animations will not be
     * played when popping the back stack.
     */
    public abstract FragmentTransaction setCustomAnimations(@AnimRes int enter,
            @AnimRes int exit);

    /**
     * Set specific animation resources to run for the fragments that are
     * entering and exiting in this transaction. The <code>popEnter</code>
     * and <code>popExit</code> animations will be played for enter/exit
     * operations specifically when popping the back stack.
     */
    public abstract FragmentTransaction setCustomAnimations(@AnimRes int enter,
            @AnimRes int exit, @AnimRes int popEnter, @AnimRes int popExit);

在调用 commit() 方法提交事务之前，设置自定义的动画就可以了，具体的细节操作这里就不再说明了，基本和 Activity.overridePendingTransition 是一样的。

同时，对于 API 21 以上，我们可以直接在 Fragment 中找到这样的方法：

setExitTransition(Transition transition)
setEnterTransition(Transition transition)
setReturnTransition(Transition transition)
setReenterTransition(Transition transition)

用法同 Activity。

以上。

感谢：
Fragment 文档
 Transition 文档