MotionLayout roundPercent 只工作一次

Question

我有一个 ImageFilterView 视图，我正在使用 MotionLayout 制作动画。它开始时是一个小方形视图，roundPercent 设置为 1.0（因此它也是一个圆），隐藏在一个圆后面，然后动画到一个全屏正方形。它在第一次设置动画时效果很好，但每隔一段时间就只是一个矩形。

您可以在此处观看该问题的视频：VIDEO

我不确定这是否是 ImageFilterView 或 MotionLayout 上的错误，或者我是否调用不正确。值得一提的是，我没有在 Transition 中使用 onClick，而是在 Activity 中以编程方式调用它，就像这样

imageBorder.setOnClickListener {
        if (motionContainer.progress > 0.75)
            motionContainer.transitionToStart()
        else
            motionContainer.transitionToEnd()
    }

我的 motionScene 代码如下所示

<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:motion="http://schemas.android.com/apk/res-auto">
<Transition
    motion:constraintSetEnd="@+id/end"
    motion:constraintSetStart="@+id/start"
    motion:duration="1000"
    motion:motionInterpolator="easeInOut" />

<ConstraintSet android:id="@+id/start">
    <Constraint android:id="@id/translucentOverlay">
        <Layout
            android:layout_width="5dp"
            android:layout_height="5dp"
            motion:layout_constraintBottom_toBottomOf="@id/imageBorder"
            motion:layout_constraintEnd_toEndOf="@id/imageBorder"
            motion:layout_constraintStart_toStartOf="@id/imageBorder"
            motion:layout_constraintTop_toTopOf="@id/imageBorder" />
        <CustomAttribute
            motion:attributeName="roundPercent"
            motion:customFloatValue="1.0" />
        <Motion motion:motionStagger="2" />
    </Constraint>

    <Constraint android:id="@id/imageBorder">
        <Layout
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:layout_marginEnd="8dp"
            android:layout_marginBottom="8dp"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintTop_toTopOf="parent" />
        <CustomAttribute
            motion:attributeName="crossfade"
            motion:customFloatValue="0" />
        <Motion motion:motionStagger="2" />
    </Constraint>

    <Constraint android:id="@id/imageBackground">
        <Layout
            android:layout_width="32dp"
            android:layout_height="32dp"
            motion:layout_constraintBottom_toBottomOf="@id/imageBorder"
            motion:layout_constraintEnd_toEndOf="@id/imageBorder"
            motion:layout_constraintStart_toStartOf="@id/imageBorder"
            motion:layout_constraintTop_toTopOf="@id/imageBorder" />
        <Motion motion:motionStagger="2" />
    </Constraint>
 </ConstraintSet>

<ConstraintSet android:id="@+id/end">
    <Constraint android:id="@id/translucentOverlay">
        <Layout
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
        <CustomAttribute
            motion:attributeName="roundPercent"
            motion:customFloatValue="0.0" />
        <Motion motion:motionStagger="2" />
    </Constraint>

    <Constraint android:id="@id/imageBorder">
        <Layout
            android:layout_width="88dp"
            android:layout_height="88dp"
            motion:layout_constraintBottom_toBottomOf="@id/imageBackground"
            motion:layout_constraintEnd_toEndOf="@id/imageBackground"
            motion:layout_constraintStart_toStartOf="@id/imageBackground"
            motion:layout_constraintTop_toTopOf="@id/imageBackground" />
        <CustomAttribute
            motion:attributeName="crossfade"
            motion:customFloatValue="1" />
        <Motion motion:motionStagger="2" />
    </Constraint>

    <Constraint android:id="@id/imageBackground">
        <Layout
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:layout_marginTop="64dp"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent" />
        <Motion motion:motionStagger="2" />
    </Constraint>
</ConstraintSet>

我的 MotionLayout 看起来像这样：

<androidx.constraintlayout.motion.widget.MotionLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/motionContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
app:layoutDescription="@xml/motion_scene">

<androidx.constraintlayout.utils.widget.ImageFilterView
    android:id="@+id/translucentOverlay"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/translucent_background_square"/>

<androidx.constraintlayout.utils.widget.ImageFilterView
    android:id="@+id/imageBorder"
    android:layout_width="48dp"
    android:layout_height="48dp"
    android:layout_margin="8dp"
    android:padding="4dp"
    android:src="@drawable/circle_start"
    app:altSrc="@drawable/circle_end" />

<ImageView
    android:id="@+id/imageBackground"
    android:layout_width="32dp"
    android:layout_height="32dp"
    android:importantForAccessibility="no"
    android:tint="@color/primaryDarkColor"
    app:srcCompat="@drawable/circle_opaque" />
</androidx.constraintlayout.motion.widget.MotionLayout>

第一次后就停止工作了，这很烦人。很长一段时间以来，我一直在尝试解决这个从圆到方的问题，我以为我终于找到了解决方案，但似乎没有。

Answer 1

经过更多尝试后，这似乎是 ImageFilterView 中的一个错误，如果您将 roundPercent 设置为 0.0，则视图将在其余时间保持矩形。我想这是除以 0 或类似错误的问题。我已将此问题报告给 Google 开发人员，希望能尽快解决。

同时，您可以通过将 percentRound 设置为 0.000001 来绕过被零除错误来解决此问题。

MotionLayout roundPercent 只工作一次

MotionLayout roundPercent only works one time

android

android-animation

android-motionlayout