MotionLayout roundPercent只工作一次 [英] MotionLayout roundPercent only works one time
问题描述
我有一个使用MotionLayout进行动画处理的ImageFilterView视图。它以小正方形视图开始，并将roundPercent设置为1.0（因此它也是一个圆形），该视图隐藏在一个圆形后面，然后动画显示为全屏正方形。
I have an ImageFilterView view that I am animating using a MotionLayout. It starts as a small square view with roundPercent set to 1.0 (so that it is also a circle) that hides behind a circle and then animates to a full screen square. It works great the very first time it animates but every other time just stays as a rectangle.
您可以在此处看到有关该问题的视频：视频
You can see a video of the issue here: VIDEO
我不确定这是ImageFilterView还是MotionLayout上的错误，还是我打错了电话。值得一提的是，我不是在过渡中使用onClick，而是在Activity中以编程方式调用它，例如
I'm not sure if it's a bug on the ImageFilterView or MotionLayout or if I'm calling something incorrectly. It's worth mentioning that instead of using an onClick in the Transition I am programatically calling it in the Activity like so
imageBorder.setOnClickListener {
if (motionContainer.progress > 0.75)
motionContainer.transitionToStart()
else
motionContainer.transitionToEnd()
}
我的motionScene代码如下所示
My motionScene code looks like the following
<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看起来像这样：
and my MotionLayout looks like this:
<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>
很烦人的是，它在第一次之后就停止工作了。很长时间以来，我一直在尝试解决这个圆平方问题，我以为我终于找到了解决方法，但似乎没有。
It's very annoying that it stops working after the first time. I have been trying to solve this circle to square problem for a very long time now and I thought I had finally found the solution but it appears not.
推荐答案
经过更多摆弄之后，这似乎是ImageFilterView中的错误，如果将roundPercent设置为0.0，则视图将保留其余时间为矩形。我想这是除以0或类似错误的问题。我已将此问题报告给Google Developers，希望很快会得到解决。
After more fiddling around, this appears to be a bug in ImageFilterView where if you set roundPercent to 0.0, the view will remain rectangle for the rest of the time. I imagine that it is an issue with dividing by 0 or some bug like that. I have reported the issue to Google Developers so hopefully that will get fixed soon.
同时，您可以通过将percentRound设置为0.000001来解决被零除的错误，从而解决该问题。
In the meantime, you can workaround the issue by setting percentRound to 0.000001 to get around the divide by zero bug.
这篇关于MotionLayout roundPercent只工作一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
