前言
本文是Android动画系列的最后一篇--转场动画，转场动画在大部分APP中都或多或少的有用到，例如两个Activity之间的过渡动画、Fragment切换时的过渡动画等都属于转场动画的范畴。
最初的转场动画
overridePendingTransition(int enterAnim，int exitAnim)
用来处理Activity之间的转场动画，常在 startActivity 或者 finsh操作之后调用。
只支持平移、缩放、透明度、旋转四种动画效果。
示例从MainActivity跳转到ImageActivity，声明两个动画 anim_in.xml 和 anim_out.xml分别对应图中的 in 和 out部分
anim_in.xml
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="500">
<translate
android:fromXDelta="100%p"
android:toXDelta="0" />
<alpha
android:fromAlpha="0"
android:toAlpha="1.0" />
</set>
anim_out.xml
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="500">
<translate
android:fromXDelta="0"
android:toXDelta="-100%p" />
<alpha
android:fromAlpha="1.0"
android:toAlpha="0" />
</set>
MainActivity中startActivity之后调用overridePendingTransition方法
binding.btn.setOnClickListener {
val intent = Intent(this, ImageActivity::class.java)
startActivity(intent)
overridePendingTransition(R.anim.anim_in, R.anim.anim_out)
}
overridePendingTransition实现的过渡动画相比较而言是有些限制的，动画效果往往也不是那么的丝滑。
Material Design转场动画
支持Android5.0 (API 21)以上使用
支持三种进入和退出过渡动画效果:
- 爆炸式(Explode) - 将视图移入场景中心或从中移出
- 滑动式(Slide) - 将视图从场景的其中一个边缘移入或移出
- 淡入淡出式(Fade) - 通过更改视图的不透明度，在场景中添加视图或从中移除视图
如何启用
Materia转场过渡或者共享元素过渡都需要开启有两种方式:
第一种是通过在应用theme中通过 android:windowActivityTransitions开启
<style name="Theme.MyTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
<item name="android:windowActivityTransitions">true</item>
</style>
第二种是在使用过渡动画的Activity中通过代码开启
with(window) {
requestFeature(Window.FEATURE_CONTENT_TRANSITIONS)
}
示例代码
假设我们从MainActivity跳转到ImageActivity ，使用Material的过渡动画可以分为三步
步骤一 在MainActivity中声明退出动画效果
with(window) {
requestFeature(Window.FEATURE_CONTENT_TRANSITIONS)
//使用淡入淡出效果
exitTransition = Fade()
}
步骤二在ImageActivity中声明进入动画效果
with(window) {
requestFeature(Window.FEATURE_CONTENT_TRANSITIONS)
//使用淡入淡出效果
enterTransition = Fade()
}
最后呢在MainActivity中执行跳转
val intent = Intent(this, FadeActivity::class.java)
startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle())
共享元素
Material Design除了支持Activity之间的转场动画，还支持两个Activity之间共享元素的动画设置。比如我们查看一个图片，可以通过使用 changeImageTransform共享元素过渡来给图片尺寸和缩放方面的变化添加动画效果。除了 changeImageTransform之外呢，还有另外三种共享元素过渡方式
- changeBounds - 为目标视图布局边界的变化添加动画效果。
- changeClipBounds - 为目标视图裁剪边界的变化添加动画效果。
- changeTransform - 为目标视图缩放和旋转方面的变化添加动画效果。
共享元素过渡效果的实现需要两个Activity之间的‘共享’视图指定同一个名称，例如从MainActivity 中的 ImageView 到 ImageActivity 中的ImageView 可以这样去设置：
MainActivity
binding.shareImage1.setOnClickListener {
val intent = Intent(this, ImageActivity::class.java)
//只有一个共享元素视图
val options = ActivityOptionsCompat.makeSceneTransitionAnimation(
this,
binding.shareImage1,
"shareImage"
)
startActivity(intent, options.toBundle())
}
ImageActivity
override fun onCreate(savedInstanceState: Bundle?) {
...
ViewCompat.setTransitionName(binding.shareImage, "shareImage")
}
MainActivity中的 ActivityOptionsCompat.makeSceneTransitionAnimation(Activity activity,View shareElement,String sharedElementName) 方法接收一个需要共享的视图以及名称，sharedElementName和ImageActivity中的共享视图设置的transitionName保持一致。
如果需要设置多个共享元素动画，可以使用Pair
val options = ActivityOptionsCompat.makeSceneTransitionAnimation(
this, Pair(binding.shareImage1, "shareImage"),
Pair(binding.shareText, "shareText")
)
效果图
Android Material Motion
导入和使用
Material Components for Android 库版本 1.4.0-alpha01及以上
该库有两种实现，一种是基于AndroidX Transition Library ，另外一种是基于Android Transition Framework，两者之前的区别如下
AndroidX
在 com.google.android.material.transition 包下
支持 API Level 14+
支持 Fragments 和 Views，不支持 Activities 和 Windows
Platform
在 com.google.android.material.transition.platform 包下
支持 API Level 21+
支持 Fragments、 Views,、Activities 和 Windows
从对比上来看，两者兼容的最低版本不同分别是Android 3.0和Android 5.0 ，但是AndroidX不支持Activities和Windows，对于需要实现Activity之间过渡效果的需求不太友好，相对而讲Platform支持的更全面，而且现在市场上Android 5.0最为最低版本可以覆盖大部分机型，Platform 就可以作为首选实现。
过渡模式
Material Components for Android 库提供了四种motion模式，可以根据需求灵活选择实现：
Container transform
Shared axis
Fade through
Fade
Container transform
容器转换模式设计用于包含容器的UI元素之间的转换。此模式在两个UI元素之间创建可见连接。不同于传统的共享元素动画，它并不围绕 单一的共享内容而设计的，相反，这里的共享元素可以是包含 View 或者 ViewGroup 的边界容器。
示例代码
Fragment之间的跳转
FragmentA展示一个两列的Grid列表，每个Item中使用CardView布局，点击列表Item触发跳转到FragmentB。
item_recycler_list.xml
<androidx.cardview.widget.CardView
android:id="@+id/card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content">
MyAdapter - onBindViewHolder(holder:Myholder,position:Int)
holder.cardView.transitionName = "shared_image$position"
设置cardview的transitionName，这里使用position来保证transiotionName的唯一性。这个CardView作为startView。
fragment_b.xml
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="@color/white"
android:transitionName="shared_image">
fragment布局中声明endView，这里使用LinearLayout来作为endView，使用android:transitionName属性来进行设置。
Tips: android:transitionName是API 21才支持的，低于API 21请使用setTransitionName方法进行设置。
FragmentA.kt
adapter.clickListener = { holder, _ ->
(activity as ContainerTransformActivity).replace(holder.cardView, "shared_image")
}
ContainerTransformActivity.kt
fun replace(view: View, name: String) {
val fragmentB = FragmentB()
supportFragmentManager.beginTransaction()
.addSharedElement(view, name)
.replace(R.id.fragment_container, fragmentB, "fragmentB")
.addToBackStack("fragmentB")
.commit()
}
addSharedElement两个参数一个是startView，在本示例中是item中的CardView，另外一个参数是endView的transitionName，设置完成后切换到FragmentB。
最后一步需要设置过渡模式
FragmentA
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
exitTransition = MaterialElevationScale(false).apply {
duration = 250
}
reenterTransition = MaterialElevationScale(true).apply {
duration = 250
}
}
FragmentA中的过渡效果可以在replace FragmentB之前任意位置设置。
FragmentB
//第一种
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
sharedElementEnterTransition = MaterialContainerTransform()
}
//第二种
val fragmentB = FragmentB()
fragmentB.sharedElementEnterTransition = MaterialContainerTransform()
FragmentB中进入过渡效果有两种设置方式。
设置完成后就可以看到效果了。
Shared axis
共享轴模式用于具有空间或导航关系的UI元素之间的转换。此模式使用x、y或z轴上的共享转换来加强元素之间的关系。
示例代码
Activity之间使用
ActivityA中设置退出动画
window.requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS)
val exit = MaterialSharedAxis(MaterialSharedAxis.Z, true)
window.exitTransition = exit
默认是整个视图参与转换，包括状态栏和导航栏，如果需要排除的话，可以使用如下代码设置：
val exit = MaterialSharedAxis(MaterialSharedAxis.Z, true).apply {
//1.指定转换视图
addTarget(R.id.root)
//2.排除状态栏和导航啦参与转换
excludeTarget(android.R.id.statusBarBackground, true)
excludeTarget(android.R.id.navigationBarBackground, true)
}
ActivityB中设置进入动画
window.requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS)
val enter = MaterialSharedAxis(MaterialSharedAxis.Z, true)
window.enterTransition = enter
最后在ActivityA中进行跳转
val intent = Intent(this, ActivityB::class.java)
val scene = ActivityOptions.makeSceneTransitionAnimation(this).toBundle()
startActivity(intent, scene)
View之间使用
val sharedTransition = MaterialSharedAxis(MaterialSharedAxis.Z, true)
//该方法会将root视图进行监控，root内部视图可见性变化之后触发动画
android.transition.TransitionManager.beginDelayedTransition(root, sharedTransition)
image1.visibility = View.GONE
image2.visibility = View.VISIBLE
image1和image2是 root的内部子视图，通过TransitionManager.beginDelayedTransition(root, sharedTransition)将root进行监控后，image1和image2视图可见度变化后会直接触发动画效果。
Fade Through
淡入模式用于相互之间没有很强关系的UI元素之间的转换。
Fade Through的使用方式和Shared axis是一样的，可以通过
MaterialFadeThrough来实现。
Fade
淡出模式用于在屏幕范围内进入或退出的UI元素，例如在屏幕中心淡出的对话框。
示例代码
showButton.setOnClickListener {
val materialFade = MaterialFade().apply {
duration = 150L
}
TransitionManager.beginDelayedTransition(container, materialFade)
fab.visibility = View.VISIBLE
}
淡出模式可以用于Dialog、menu等控件的显示。
总结
转场动画可以赋给一个应用活力，增加流畅性和可交互性，让用户在使用应用中不那么生硬，这也是我们需要掌握的。在实际需求中可以根据场景来采用不同的转场动画实现策略。如果觉得文章对您有帮助，请帮忙点个赞(#.#)。
