如何自定义属于自己的 Transition

作者: Wang_Guan | 来源:发表于2020-05-07 17:14 被阅读0次

    WHY?

    我们先来看一张图

    before.gif
    这是我们只用了 ChangeBounds 这一个 Transition 的情况。我们 focus 到色块字体处,可以看到,当两个场景进行切换的时候,位置和 bounds 的变化都有过渡效果,看起来很自然,但是色块背景颜色的变化以及色块内字体的变化,都有种闪现的感觉,视觉上效果并不是很好。其实这个效果是符合 ChangeBounds 的,查看 ChangeBounds 的源码就可以发现,它内部并没有对字体颜色及背景色做过渡动画。所以,要实现字体颜色和背景颜色能平滑过渡,我们就需要自定义 Transition。

    如何自定义属于自己的 Transition

    通过前面的介绍,我们已经知道了 Transition 有两个主要任务:

    1. 捕获前后想要跟踪的属性值,
    2. 根据属性值变化构建出自己的动画并执行。

    所以自定义 Transition ,我们就围绕着两个方向去处理就可以了。其实自定义 Transition 也比较简单,大致上分为两步:

    1. 继承 Transition 并实现 captureStartValuescaptureEndValues 两个方法。
    2. 重写 createAnimator ,根据 startValues 和 endValues 创建自己的 Animator

    下面就以平滑改变背景色作为栗子

    继承 Transition 并实现 captureStartValuescaptureEndValues

    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
    祝好
    共勉
    不喜勿喷

    相关文章

      网友评论

        本文标题:如何自定义属于自己的 Transition

        本文链接:https://www.haomeiwen.com/subject/djjoghtx.html