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"><ImageViewandroid: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"><ImageViewandroid: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"><ImageViewandroid:id="@+id/imageview1"android:layout_width="200dp"android:layout_height="wrap_content"android:adjustViewBounds="true"android:onClick="toSecond"android:src="@drawable/f" /><ImageViewandroid: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"><ImageViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:adjustViewBounds="true"android:src="@drawable/f"android:transitionName="@string/app_name" /><ImageViewandroid: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 - 为目标图像的大小与缩放变化添加动画--><changeImageTransformandroid:duration="1000"android:startDelay="0"/></transitionSet>

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

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

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

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

@Overrideprotected 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