依次播放动画 - Motion Layout

Question

迄今为止，我已经阅读了所有有关 MotionLayout 的可用文档，包括官方文档（这里），可用的示例，非常复杂的示例（这里）以及来自许多网站的其他示例。 到目前为止，我还没有弄清楚如何逐个播放/启动动画。 KeyPosition和KeyAttribute可能是答案，但我没有找到任何说明如何使用它们的示例/文档。 这是MotionScene布局：

<?xml version="1.0" encoding="utf-8"?>
<MotionScene
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:motion="http://schemas.android.com/apk/res-auto"
    >
    <Transition
        motion:constraintSetStart="@+id/start"
        motion:constraintSetEnd="@+id/end"
        motion:duration="500">
    </Transition>
    <ConstraintSet android:id="@+id/start">
        <Constraint
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            motion:layout_constraintTop_toBottomOf="parent"
            motion:layout_constraintLeft_toLeftOf="parent"
            motion:layout_constraintRight_toRightOf="parent"
            android:id="@+id/bottomText"
            />
    </ConstraintSet>
    <ConstraintSet android:id="@+id/end">
        <Constraint
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintLeft_toLeftOf="parent"
            motion:layout_constraintRight_toRightOf="parent"
            android:id="@+id/bottomText"
            />
    </ConstraintSet>
    <ConstraintSet android:id="@+id/start1">
        <Constraint
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            motion:layout_constraintBottom_toTopOf="parent"
            android:id="@+id/arcView"
            />
    </ConstraintSet>
    <ConstraintSet android:id="@+id/end1">
        <Constraint
            android:layout_width="match_parent"
            android:layout_height="0dp"
            motion:layout_constraintHeight_percent=".8"
            motion:layout_constraintTop_toTopOf="parent"
            android:id="@+id/arcView"
            />
    </ConstraintSet>
</MotionScene>

这是我的启动方式：（即使使用了 autoTransition，它也不会自动启动）

val motionContainer : MotionLayout = findViewById(R.id.motionContainer)
motionContainer.setTransition(R.id.start, R.id.end)
motionContainer.transitionToEnd()

上面的复杂示例使用了 motionLayout.doOnEnd() 来启动下一个转换，但这不是可用的功能，在他的代码中也没有找到这个函数。在进一步检查中，doOnEnd() 是 Animator() 的一个函数，但与 MotionScene/MotionLayout 没有关系。

我认为通过传递下一个过渡就可以像下面展示的那样工作，但那也没有帮助。

val motionContainer : MotionLayout = findViewById(R.id.motionContainer)
motionContainer.setTransition(R.id.start, R.id.end)
motionContainer.transitionToEnd()
motionContainer.setTransition(R.id.start1, R.id.end1)
motionContainer.transitionToEnd()

那么，如何逐个播放这些过渡效果呢？

- Lalit Fauzdar

---

我想以同样的方式使用我的动画，但看起来允许创建“超级复杂动画”的MotionLayout并不支持如此明显的用例。你最终解决了这个问题吗？ - prf

@prf 实际上，我没有找到任何答案，即使在我当时发现的类似的github问题中，他们也说这样的事情是不可能的。你实际上无法在代码中控制流程，但是您可以通过调整framePosition来使动画自动按顺序播放为一个完整的动画，有关此内容请参见下面的投票答案。 - Lalit Fauzdar

是的，我看到了关于关键帧的那个东西，但在我看来它并不是那么直观。无论如何，我会尝试一下。谢谢回答。 - prf

实际上，这并不符合我的目的，这就是为什么我没有使用它也没有选择答案的原因。这根本不是我想要的。另外，我在问题中分享的复杂动画媒介文章可能会非常有帮助，可以尝试一下。 - Lalit Fauzdar

Answer 1

您可以添加以下代码：

motion:autoTransition="animateToEnd"

在运行trans2后，此代码将自动运行trans3，将第一次转换的motion:constraintSetEnd设置为第二次转换的motion:constraintSetEnd

setForm -> setQuiz -> setQuizReady

    <Transition

        android:id="@+id/trans2"
        motion:constraintSetEnd="@+id/setQuiz"
        motion:constraintSetStart="@id/setForm"
        motion:duration="5000"
        motion:pathMotionArc="none">
        <KeyFrameSet>
        </KeyFrameSet>

    </Transition>
    <Transition
        motion:autoTransition="animateToEnd"
        android:id="@+id/trans3"
        motion:constraintSetEnd="@+id/setQuizReady"
        motion:constraintSetStart="@id/setQuiz"
        motion:duration="5000"
        motion:pathMotionArc="none">
        <KeyFrameSet>
        </KeyFrameSet>
    </Transition>

- Ma'tufful Ikhsani

Answer 2

您可以通过使用KeyFrameSet来实现。假设您希望首先动画化bottomText，然后是arcView，并且两者持续时间相等，则应该像这样：

<KeyFrameSet>
        <KeyPosition
            app:framePosition="50"
            app:motionTarget="@id/bottomText"
            app:keyPositionType="pathRelative"
            app:percentX="1"/>

        <KeyPosition
            app:framePosition="50"
            app:motionTarget="@id/arcView"
            app:keyPositionType="pathRelative"
            app:percentX="0"/>
    </KeyFrameSet>

这意味着，我希望第一个视图（bottomText）在总动画时间的一半完成其路径。并且我希望第二个视图（arcView）保持在相同的位置，直到总动画时间的一半，换句话说，直到第一个视图完成动画。

如果您想让它们中的一个更快或更慢地动画，可以尝试调整 framePosition 属性。

有关这些属性的更多解释，请参阅 此处 为官方文档。

- Oya Canli