Android动画系列---转场动画详解

前言

本文是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

anim_out.xml

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开启

第二种是在使用过渡动画的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")
)

效果图

common_share_anim.gif

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 的边界容器。

container_tranform.gif

示例代码

Fragment之间的跳转

FragmentA展示一个两列的Grid列表，每个Item中使用CardView布局，点击列表Item触发跳转到FragmentB。

item_recycler_list.xml

MyAdapter - onBindViewHolder(holder:Myholder,position:Int)

holder.cardView.transitionName = "shared_image$position"

设置cardview的transitionName，这里使用position来保证transiotionName的唯一性。这个CardView作为startView。

fragment_b.xml

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轴上的共享转换来加强元素之间的关系。

shared_axis.gif

示例代码

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.gif

Fade Through的使用方式和Shared axis是一样的，可以通过MaterialFadeThrough来实现。

Fade

淡出模式用于在屏幕范围内进入或退出的UI元素，例如在屏幕中心淡出的对话框。

fade.gif

示例代码

showButton.setOnClickListener {
   val materialFade = MaterialFade().apply {
     duration = 150L
   }
   TransitionManager.beginDelayedTransition(container, materialFade)
   fab.visibility = View.VISIBLE
}

淡出模式可以用于Dialog、menu等控件的显示。

总结

转场动画可以赋给一个应用活力，增加流畅性和可交互性，让用户在使用应用中不那么生硬，这也是我们需要掌握的。在实际需求中可以根据场景来采用不同的转场动画实现策略。如果觉得文章对您有帮助，请帮忙点个赞(#^.#)。

Android动画系列---转场动画详解

前言

最初的转场动画

Material Design转场动画

如何启用

示例代码

共享元素

Android Material Motion

导入和使用

过渡模式

Container transform

Shared axis

Fade Through

Fade

总结

你可能感兴趣的:(Android动画系列---转场动画详解)