Activity页面跳转动画？这里有你需要的！

使用系统默认效果实现activity页面跳转，有时候往往不能满足公司伟大设计师的审美要求，因此我们有必要了解一下怎么给activity页面跳转时增加一些动画，以提升我们app的逼格，增加用户体验。

我们知道，activity切换时，无非就是调用startActivity跳转到新的页面和关闭当前界面返回上一界面这两种场景，我们增加的动画也是围绕这两种情况展开的。下面是我总结的一些套路。

第一种，通过在startActivity或Finish时使用overridePendingTransition实现跳转动画。

首先，我们需要在res下新建一个anim文件夹，用于存放我们自定义的动画文件（这里的动画是属于补间动画）。

slide_bottom_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:interpolator="@android:anim/linear_interpolator"
     android:shareInterpolator="true">
    <translate
        android:duration="1000"
        android:fromXDelta="0"
        android:fromYDelta="150%p"
        android:toXDelta="0"
        android:toYDelta="0">
    </translate>

    <alpha
        android:duration="1000"
        android:fromAlpha="0"
        android:toAlpha="1"/>
</set>

slide_top_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:interpolator="@android:anim/linear_interpolator"
     android:shareInterpolator="true">
    <translate
        android:duration="1000"
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="0"
        android:toYDelta="-100%p"/>
    <alpha
        android:duration="1000"
        android:fromAlpha="1"
        android:toAlpha="0"/>
</set>

从名字我们就知道，slide_bottom_in.xml是代表从底部滑入，slide_top_out.xml是代表从顶部划出。

下面是startActivty处的代码

       startActivity(new Intent(this, FirstActivity.class));
       overridePendingTransition(R.anim.slide_bottom_in, R.anim.slide_top_out);

点击运行，效果如下：

第二种方式，通过给Application的style添加跳转动画实现（这是设置是全局的--对整个app的activty跳转都会起作用）

首先我们自定义一个style

ActivityInOutAnim

    <style name="ActivityInOutAnim">
        <item name="android:activityOpenEnterAnimation">@anim/fade_right_top_in</item>
        <item name="android:activityCloseExitAnimation">@anim/slide_top_out</item>
        <item name="android:activityCloseEnterAnimation">@anim/slide_bottom_in</item>
        <item name="android:activityOpenExitAnimation">@anim/fade_left_bottom_out</item>
    </style>

activityOpenEnterAnimation：startActivty跳转到新activty时，新activty执行的动画

activityCloseExitAnimation：finish activty时，被finish的activty执行的动画

activityCloseEnterAnimation：finish activty时，新进入的activty执行的动画

activityOpenExitAnimation：startActivty跳转到新activty时，旧activty执行的动画

然后在Application的style通过windowAnimationStyle属性引用上面定义ActivityInOutAnim

     <!--全局设置activity进入和退出动画-->
        <item name="android:windowAnimationStyle">@style/ActivityInOutAnim</item>

最后就是startActivty处的代码，正常调用startActivity即可，不需要增加额外代码

       //<item name="android:windowAnimationStyle">@style/ActivityInOutAnim</item>
                startActivity(new Intent(this, SecondActivity.class));

点击运行，效果如下：

第三种，我们可以在startActivity时结合Fade/Slide/Explode实现Activty跳转动画

startActivty处代码如下：

  Fade fade = new Fade();
                fade.setDuration(400);
                getWindow().setExitTransition(fade);//出来的动画
                getWindow().setEnterTransition(fade);//进去的动画
                Intent intent = new Intent(this, ThirdActivity.class);
                ActivityOptions activityOptions1 = ActivityOptions.makeSceneTransitionAnimation(MainActivity.this);
                startActivity(intent, activityOptions1.toBundle());

同时在ThirdActivty的onCreate方法中添加如下代码

        Explode fade = new Explode();
        fade.setDuration(1000);
        getWindow().setExitTransition(fade);//出去的动画
        getWindow().setEnterTransition(fade);//进来的动画

此外，使用转场动画，我们还需要在setContentView方法之前给activty增加如下属性

        //设置允许使用转场动画  api>=21
        getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);

或者在style中设置

      <item name="android:windowContentTransitions">true</item>

点击运行，效果如下：

注意：Fade/Slide/Explode这几种动画是谷歌在5.0中新加进来的，虽然更加契合MaterialDesign风格，但使用的时候需要对低于21的版本做兼容，如果你的minSdkVersion<21的话。

第四种，在Application的style中通过windowEnterTransition等属性设置全局的转场动画

        <!--使用系统自带的几种动画实现activity跳转，包括explode，fade,Slide ,使用该种动画需要api>=21-->
        <item name="android:windowEnterTransition">@transition/activity_slide</item>
        <item name="android:windowExitTransition">@transition/activity_slide</item>
        <item name="android:windowContentTransitions">true</item>

activty_slide.xml

<?xml version="1.0" encoding="utf-8"?>
<slide xmlns:android="http://schemas.android.com/apk/res/android"
       android:duration="1000">

</slide>

下面是startActivty处的代码：

            //ActivityOptions需要API>=21
                Intent intent2 = new Intent(this, FourthActivity.class);
                ActivityOptions activityOptions = ActivityOptions.makeSceneTransitionAnimation(MainActivity.this);
                startActivity(intent2, activityOptions.toBundle());

点击运行，效果如下：

第五种，设置某一控件为共享元素实现转场动画。

首先我们需要在xml中为相关控件设置transitionName属性

           <TextView
                android:id="@+id/way_five"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:background="@drawable/bg_btn"
                android:padding="10dp"
                android:text="方式五（ActivityOptions--共享元素）"
                android:textColor="#FFFFFF"
                android:transitionName="btn"/>

然后在和其对应的控件也需要设置transitionName属性，且它们transitionName的值必须是一样的

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_margin="20dp"
        android:background="@drawable/bg_btn"
        android:padding="10dp"
        android:text="我是FifthActivity"
        android:textColor="#FFFFFF"
        android:transitionName="btn"/>

下面是startActivty处的代码

     Intent intent1 = new Intent(this, FifthActivity.class);
                ActivityOptionsCompat optionsCompat = ActivityOptionsCompat.makeSceneTransitionAnimation(this, mWayFive, "btn");
                ActivityCompat.startActivity(this, intent1, optionsCompat.toBundle());

注意这里makeSceneTransitionAnimation的第三个参数也需要和前面transitionName的值一样

点击运行，效果如下：

第六种，拥有多个共享元素的转场动画来实现

这里我选择了两组元素来实现

这里是旧的activty中需要共享的元素

            <TextView
                android:id="@+id/way_six"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:background="@drawable/bg_btn"
                android:padding="10dp"
                android:text="方式六（ActivityOptions--多个共享元素）"
                android:textColor="#FFFFFF"
                android:transitionName="btn_six"/>

            <ImageView
                android:id="@+id/main_img"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:scaleType="centerCrop"
                android:src="@drawable/timg"
                android:transitionName="beauty_img"/>

这里是新的activty中需要共享的元素

    <ImageView
        android:id="@+id/iv1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/toolbar"
        android:scaleType="centerCrop"
        android:src="@drawable/timg"
        android:transitionName="beauty_img"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_margin="20dp"
        android:background="@drawable/bg_btn"
        android:padding="10dp"
        android:text="我是FifthActivity"
        android:textColor="#FFFFFF"
        android:transitionName="btn_six"/>

然后就是startActivity处的代码

            Intent intent4 = new Intent(this, SixActivity.class);
                ActivityOptionsCompat optionsCompat3 = ActivityOptionsCompat.makeSceneTransitionAnimation(MainActivity.this, Pair.create((View) mImg, "beauty_img"), Pair.create((View) mWaySix, "btn_six"));
                ActivityCompat.startActivity(this, intent4, optionsCompat3.toBundle());

点击运行，效果如下

以上就是我对actvity跳转动画的总结，主要用到传统的overridePendingTransition方式以及谷歌在5.0新增的转场动画方式实现activty的动画跳转，有疑问可以在评论去提出哦，当然如果感觉有用，给个赞。（这里吐槽一下csdn博客，我都全部写完了，然后点击发布且提示成功，然后我到个人主页去查看文章，发现除了第一种方式的相关内容被保留外，其余的内容莫名不见了，现在的内容是第二次重新写进来的）

最后把源码贴上

github地址：SceneTransitionAnimation

Activity页面跳转动画？这里有你需要的！

猜你喜欢