WHY?
我们先来看一张图
这是我们只用了 ChangeBounds 这一个 Transition 的情况。我们 focus 到色块字体处,可以看到,当两个场景进行切换的时候,位置和 bounds 的变化都有过渡效果,看起来很自然,但是色块背景颜色的变化以及色块内字体的变化,都有种闪现的感觉,视觉上效果并不是很好。其实这个效果是符合 ChangeBounds 的,查看 ChangeBounds 的源码就可以发现,它内部并没有对字体颜色及背景色做过渡动画。所以,要实现字体颜色和背景颜色能平滑过渡,我们就需要自定义 Transition。
如何自定义属于自己的 Transition
通过前面的介绍,我们已经知道了 Transition 有两个主要任务:
- 捕获前后想要跟踪的属性值,
- 根据属性值变化构建出自己的动画并执行。
所以自定义 Transition ,我们就围绕着两个方向去处理就可以了。其实自定义 Transition 也比较简单,大致上分为两步:
- 继承 Transition 并实现 captureStartValues 和 captureEndValues 两个方法。
- 重写 createAnimator ,根据 startValues 和 endValues 创建自己的 Animator
下面就以平滑改变背景色作为栗子
继承 Transition 并实现 captureStartValues 和 captureEndValues
class BackgroundColorTransition : Transition() {
private val PROPNAME_BACKGROUND ="com.wangguan.transitions.material.custom.BackgroundColorTransition:background"
override fun captureStartValues(transitionValues: TransitionValues?) {
captureValues(transitionValues)
}
override fun captureEndValues(transitionValues: TransitionValues?) {
captureValues(transitionValues)
}
private fun captureValues(transitionValues: TransitionValues?) {
// 将需要跟踪的属性塞到 values 里面
transitionValues?.also {
it.values[PROPNAME_BACKGROUND] = it.view.background
}
}
这里我们都实现了 ** captureStartValues** 和 ** captureEndValues** ,这两个方法都是捕获想要跟踪的属性,所以里面的具体实现,我们调用了 captureValues 方法来捕获属性。transitionValues 包含一个 view 和一个属性的 map,这里我们需要将我们要跟踪的属性塞进这个 map 里面。这里我们关心的是 view 的背景颜色,所以将 view 的 background 塞进 key 为 PROPNAME_BACKGROUND 的 map 里面。
为了保证 key 的唯一性,官方建议 key 的声明最好遵循以下格式:
package_name:transition_name:property_name
这里我们就将需要跟踪的属性告知 Transition 了,接下来就是创建相应动画了。
重写 createAnimator
override fun createAnimator(
sceneRoot: ViewGroup?,
startValues: TransitionValues?,
endValues: TransitionValues?
): Animator? {
startValues ?: return null
endValues ?: return null
val view: View = endValues.view
// 根据属性 key 取出前后的背景
val startBackground = startValues.values[PROPNAME_BACKGROUND] as Drawable?
val endBackground = endValues.values[PROPNAME_BACKGROUND] as Drawable?
// 格式判断
if (startBackground is ColorDrawable && endBackground is ColorDrawable) {
// 前后颜色发生改变才执行动画
if (startBackground.color != endBackground.color) {
val animator = ValueAnimator.ofObject(
ArgbEvaluator(),
startBackground.color, endBackground.color
)
animator.addUpdateListener { animation ->
val value = animation.animatedValue
if (null != value) {
// 不断更新背景以达到平滑过渡效果
view.setBackgroundColor(value as Int)
}
}
return animator
}
}
return null
}
当这个方法被 framework 调用的时候,它会给我们传场景的根视图和 startValues 和 endValues 。通过 key 就可以拿到我们关心的属性值了,拿到前后属性值,就可以通过前后的变化创建我们自己的 animator。至此,一个简单的 BackgroundColorTransition 就完成了。看下最终效果:
after.gif
One More Thing
那么在一次 Transition 变化中, createAnimator 会执行多少次呢?Transition 本来就是将前后 scene 做差异动画的,所以,createAnimator 的调用次数其实就和前后 scene 有关。
就拿本例来看
scene_first.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/layout_containers"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/image_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/text_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:background="@color/colorAccent"
android:text="头像"
android:textColor="@android:color/white"
android:textSize="28sp"
app:layout_constraintBottom_toBottomOf="@id/image_icon"
app:layout_constraintLeft_toRightOf="@id/image_icon"
app:layout_constraintTop_toTopOf="@id/image_icon" />
</androidx.constraintlayout.widget.ConstraintLayout>
scene_second.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/layout_containers"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/image_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:minWidth="200dp"
android:minHeight="200dp"
android:src="@mipmap/ic_launcher"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/text_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:background="@android:color/holo_orange_dark"
android:text="头像"
android:textColor="@android:color/black"
android:textSize="28sp"
app:layout_constraintLeft_toLeftOf="@id/image_icon"
app:layout_constraintRight_toRightOf="@id/image_icon"
app:layout_constraintTop_toBottomOf="@id/image_icon" />
<TextView
android:id="@+id/text_detail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:padding="16dp"
android:text="这是详情这是详情这是详情这是详情
这是详情这是详情这是详情这是详情这是详情这是详情
这是详情这是详情这是详情这是详情这是详情这是详情
这是详情这是详情这是详情这是详情这是详情这是详情
这是详情这是详情这是详情"
android:textSize="18sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/text_name" />
</androidx.constraintlayout.widget.ConstraintLayout>
从以上可以看到,场景二较场景一多了 id 为 text_detail 的 TextView,它在场景一中是找不到相对应 id 控件的,那么 createAnimator 会回调吗?答案是会的,它会从 null 变到 text_detail,所以,就本例来说,createAnimator 一共回调了3 次。
androidx.appcompat.widget.AppCompatImageView{aec2280 V.ED..... ......ID 0,0-216,216 #7f0800a5 app:id/image_icon}
androidx.appcompat.widget.AppCompatImageView{78b6a29 V.ED..... ......ID 0,0-216,216 #7f0800a5 app:id/image_icon}
createAnimator androidx.appcompat.widget.AppCompatTextView{80de0b9 V.ED..... ......ID 264,52-432,164 #7f080140 app:id/text_name}
androidx.appcompat.widget.AppCompatTextView{56ae1ae V.ED..... ......ID 264,52-432,164 #7f080140 app:id/text_name}
createAnimator null
androidx.appcompat.widget.AppCompatTextView{9d94b4f V.ED..... ......ID 0,880-1080,1427 #7f080138 app:id/text_detail}
最后
BackgroundColorTransition.kt
祝好
共勉
不喜勿喷
网友评论