一、一个共享元素的跳转动画
先看下效果:
实现:
第一个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