Material Design - 页面切换动画

作者: Arnold_J | 来源:发表于2018-01-15 10:45 被阅读0次
    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 文档

    相关文章

      网友评论

        本文标题:Material Design - 页面切换动画

        本文链接:https://www.haomeiwen.com/subject/jtjrnxtx.html