如何自定义属于自己的 Transition
2020-05-07 本文已影响0人
Wang_Guan
WHY?
我们先来看一张图
before.gif
这是我们只用了 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
祝好
共勉
不喜勿喷
