android - 如何在 MotionLayout 过渡期间平滑更改可绘制资源？

Question

我想在转换期间更改 fab 按钮中的图像，但我还没有找到如何使用 xml 来执行此操作，因为 CustomAttribute 标记仅支持可绘制颜色作为值。我的解决方案是将 TransitionAdapter 设置为 MotionLayout 并在 onTransitionChange 函数中更改可绘制对象。

motionLayout.setTransitionListener(object : TransitionAdapter() {
            var fromStart = true
            var wasChanged = false

            override fun onTransitionChange(
                motionLayout: MotionLayout?,
                startId: Int,
                endId: Int,
                progress: Float
            ) {
                if (!wasChanged) {
                    if (fromStart && progress >= 0.5f) {
                        fab.setImageResource(R.drawable.ic_done_black_24dp)
                        wasChanged = true
                    }
                    if (!fromStart && progress <= 0.5f) {
                        fab.setImageResource(R.drawable.ic_add_black_24dp)
                        wasChanged = true
                    }
                }
            }

            override fun onTransitionCompleted(motionLayout: MotionLayout?, currentId: Int) {
                wasChanged = false
                fromStart = !fromStart
            }

        })

但在这种情况下，图像会立即改变。有什么方法可以像 MotionLayout 中的常规过渡一样使过渡平滑？

Answer 1

有一种很好的方法可以在 MotionLayout 中为两个图像之间的变化设置动画。但是，与 Fab 交互可能有点棘手。如图this blog post ，您可以使用 ImageFilterView 并设置源和备用源，然后在它们之间交叉淡入淡出。直接从上面链接的博客文章中获取代码，这是一个 ImageFilterView 在您的 MotionLayout 中的示例

<android.support.constraint.utils.ImageFilterView
        android:id="@+id/image"
        android:background="@color/colorAccent"
        android:src="@drawable/roard"
        app:altSrc="@drawable/hoford"
        android:layout_width="64dp"
        android:layout_height="64dp"/>

在哪里 android:src是您想要的第一张图片， app:altSrc是您想要交叉淡入淡出的第二张图像。
下面，也是直接从博客文章中获取的，是你的motionScene中的约束。

<ConstraintSet android:id="@+id/start">
        <Constraint
            android:id="@+id/image"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_marginStart="8dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent">
            <CustomAttribute
                motion:attributeName="crossfade"
                motion:customFloatValue="0" />
        </Constraint>
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <Constraint
            android:id="@+id/image"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_marginEnd="8dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintTop_toTopOf="parent">
            <CustomAttribute
                motion:attributeName="crossfade"
                motion:customFloatValue="1" />
        </Constraint>
    </ConstraintSet>

您将交叉淡入淡出值设置为自定义属性的位置。不确定这将如何与 Fab 一起使用，但这是我知道如何在两个图像之间制作动画的最佳方式。