Activity跳转动画之Shared Element共享元素效果

一、一个共享元素的跳转动画

先看下效果：

实现：
第一个Activity布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">
    
    <ImageView
        android:id="@+id/iv_01"
        android:layout_width="0dp"
        android:layout_height="120dp"
        android:layout_weight="1"
        android:src="@drawable/pic01"
        android:scaleType="fitXY"
        android:transitionName="pic01"/>

    <ImageView
        android:id="@+id/iv_02"
        android:layout_width="0dp"
        android:layout_height="120dp"
        android:layout_weight="1"
        android:layout_marginStart="20dp"
        android:layout_marginEnd="20dp"
        android:src="@drawable/pic02"
        android:scaleType="fitXY"
        android:transitionName="pic02"/>

    <ImageView
        android:id="@+id/iv_03"
        android:layout_width="0dp"
        android:layout_height="120dp"
        android:layout_weight="1"
        android:src="@drawable/pic03"
        android:scaleType="fitXY"
        android:transitionName="pic03"/>


</LinearLayout>

第二个Activity的布局文件：

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

    <ImageView
        android:id="@+id/iv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        android:transitionName="pic02"/>

</LinearLayout>

第一个Activity布局中id为iv_02的ImageView和第二个Activity布局文件的ImageView的android:transitionName属性值必须一样，而且此属性只有在android版本21以上才有效。
当然android:transitionName属性也可以代码设置：

然后页面跳转：

如果使用ARouter跳转的话：

这里要注意一点的是，navigation()方法里必须要传入当前Activity，否则跳转失效。

可以看到，这里的关键点是：ActivityOptions，看看它的makeSceneTransitionAnimation方法：

其中，第二个参数是第一个页面的ImageView，第三个参数是两个Activity的ImageView的android:transitionName属性的值。
这样，一个Shared Element共享元素效果就实现了。

二、两个共享元素的跳转动画

同样先看下效果：

先看下后面包含2个大ImageView的Activity的布局文件：

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

    <ImageView
        android:id="@+id/iv_01"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:scaleType="fitXY"
        android:transitionName="pic01"/>

    <ImageView
        android:id="@+id/iv_03"
        android:layout_marginTop="20dp"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:scaleType="fitXY"
        android:transitionName="pic03"/>

</LinearLayout>

同样，前一个Activity的两个ImageView的android:transitionName属性值和后一个Activity的两个大ImageView的android:transitionName属性值必须一样。页面跳转：

看看ActivityOptions的makeSceneTransitionAnimation方法：

于是，要实现多个共享元素的话，在makeSceneTransitionAnimation方法后面再添加Pair对象即可。

另外，补充2点：
1、在第二个Activity页面，如果点击标题栏的返回按钮使用finish()方法返回时，回退到第一个Activity的动画效果会消失，解决：

2、上面的ActivityOptions可以用ActivityOptionsCompat替换，ActivityOptionsCompat的makeSceneTransitionAnimation方法里有判断android版本是否大于21，使用ActivityOptionsCompat的话，android版本就无需再判断了。

三、自定义 Shared Element切换动画
有空写。。

参考：https://blog.csdn.net/huachao1001/article/details/51659963