Android--MaterialDesign动画之转场动画（Activity transitions）

以前的Activity之间跳转比较生硬，用户很明显的会感觉到跳转，MaterialDesign推出了新的转场动画，可以实现两个界面之间的共享元素，使跳转带来的体验感如德芙般丝滑

1.基本使用

效果如下：

转场动画.gif

我在上面效果中做了两个操作，点击小的图片，跳转到另一个Activity，然后按了后退键返回上一个Activity，接下来介绍使用方法

首先我们需要开启支持转场动画，有两种方式

1.在Activity的OnCreate方法中，在setContentView之前调用

getWindow().requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS);

2.在style的AppTheme中增加item

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

下面是第一个Activity的布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".FristActivity">

    <ImageView
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:src="@drawable/f"
        android:onClick="toSecond" />

</LinearLayout>

第二个Activity的布局文件中，需要为共享元素的android:transitionName设置值

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:src="@drawable/f"
        android:transitionName="@string/app_name" />

</LinearLayout>

接下来就是跳转的代码

public void toSecond(View view) {
        ActivityOptionsCompat compat = ActivityOptionsCompat.makeSceneTransitionAnimation(this, view, getString(R.string.app_name));
        ActivityCompat.startActivity(this, new Intent(this, SecondActivity.class), compat.toBundle());
    }

调用ActivityOptionsCompat的makeSceneTransitionAnimation方法，将需要共享的元素还有共享元素的transitionName传入，并最终调用ActivityCompat的startActivity方法

2.多个共享元素

如果想要共享多个元素，可以使用第二个makeSceneTransitionAnimation方法，需要传入Pair对象

下面是第一个Activity的布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".FristActivity">

    <ImageView
        android:id="@+id/imageview1"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:onClick="toSecond"
        android:src="@drawable/f" />

    <ImageView
        android:id="@+id/imageview2"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:adjustViewBounds="true"
        android:onClick="toSecond"
        android:src="@drawable/f" />

</LinearLayout>

第二个Activity的布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:src="@drawable/f"
        android:transitionName="@string/app_name" />

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:adjustViewBounds="true"
        android:src="@drawable/f"
        android:transitionName="@string/transition2" />

</LinearLayout>

跳转代码

public void toSecond(View view) {
        Pair pair1 = new Pair(imageview1, getString(R.string.app_name));
        Pair pair2 = new Pair(imageview2, getString(R.string.transition2));
        ActivityOptionsCompat compat = ActivityOptionsCompat.makeSceneTransitionAnimation(this, pair1, pair2);
        ActivityCompat.startActivity(this, new Intent(this, SecondActivity.class), compat.toBundle());
    }

效果：

多个共享元素转场.gif

3.自定义共享元素跳转效果

如果觉得系统提供的共享元素转场动画不够酷炫，我们还可以自定义动画

首先需要新建transition目录，自定义共享元素动画xml

<?xml version="1.0" encoding="utf-8"?>
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
    <!--changeBounds - 为目标视图的布局布局边界的变化添加动画-->

    <!--changeClipBounds - 为目标视图的裁剪边界的变化添加动画-->

    <!--changeTransform - 为目标视图的缩放与旋转变化添加动画-->

    <!--changeImageTransform - 为目标图像的大小与缩放变化添加动画-->

    <changeImageTransform
        android:duration="1000"
        android:startDelay="0"
        />

</transitionSet>

设置自定义共享元素转场动画，两种方式

1.在style的主题中设置自定义共享元素转场动画

<item name="android:windowSharedElementEnterTransition">@transition/enter</item>
        <item name="android:windowSharedElementExitTransition">@transition/enter</item>

2.在代码中设置自定义共享元素转场动画

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getWindow().setSharedElementEnterTransition(TransitionInflater.from(this).inflateTransition(R.transition.enter));
    }

效果如下：

自定义共享元素转场动画.gif

4.除了元素共享外，还可以使用内容过渡动画

首先开启支持内容过渡动画，两种方式

1.主题中新增

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

2.代码调用

getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);

指定过渡动画，两种方式

1.主题中设置

<item name="android:windowEnterTransition">@android:transition/slide_left</item>
        <item name="android:windowExitTransition">@android:transition/slide_left</item>

2.代码调用

getWindow().setEnterTransition(TransitionInflater.from(this).inflateTransition(android.R.transition.fade));

效果：

过渡动画.gif