如何在MotionLayout过渡期间平滑更改可绘制资源? [英] How to smoothly change drawable resource during MotionLayout transition?

问题描述

我想在过渡期间更改fab按钮中的图像，但是我还没有找到如何使用xml进行更改的方法，因为CustomAttribute标记仅支持将可绘制颜色用作值.我的解决方案是将TransitionAdapter设置为MotionLayout并在onTransitionChange函数中更改drawable.

I want to change image in fab button during transition, but i haven't found how to do it with xml because CustomAttribute tag supports only drawable colors as values. My solution is to set TransitionAdapter to MotionLayout and change drawable in onTransitionChange function.

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中进行常规过渡一样使过渡平滑吗?

But in this case image changes immediately. Is there any way to make the transition smooth like in regular transition in MotionLayout?

推荐答案

有一种很棒的方法可以使MotionLayout中的两个图像之间的变化动起来.但是，与Fab交互可能会有些棘手.如此博客文章所示，您可以使用ImageFilterView并设置源和替代源，然后在它们之间进行淡入淡出.直接从上面链接的博客文章中获取代码，这是ImageFilterView在MotionLayout中的外观示例

There is a great way to animate the change between two images in MotionLayout. However, it may be a little tricky with the Fab interaction. As shown in this blog post, you can use an ImageFilterView and set the source and alternate source, then crossfade between them. Grabbing code directly from the blog post linked above, here's an example of what an ImageFilterView looks like in your 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中的约束条件.

Where android:src is your first image that you want and the app:altSrc is the second image that you want to crossfade to. Below, also grabbed directly from the blog post, is what the constraints will look like in your 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上播放，但这是我知道如何在两个图像之间进行动画处理的最好方法.

Where you set the crossfade value as a custom attribute. Not sure how this will play with the Fab but this is the best way I know how to animate between two images.

这篇关于如何在MotionLayout过渡期间平滑更改可绘制资源?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！