android - 顺序播放动画 - 运动布局

Question

到目前为止，我已经阅读了所有关于 MotionLayout 的可用文档。 here (官方文档)，上面有例子，一个非常复杂的例子here以及来自许多网站的其他示例。
到目前为止我没有得到的是如何一个一个地播放/启动动画。
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()

所以，如何一一播放这些过渡？

Answer 1

您可以使用 来实现它关键帧集 .假设你想先动画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>

这意味着，我希望第一个 View (底部文本)在总动画持续时间的一半处完成其路径。我希望第二个 View (arcView)保持在同一位置，直到总动画持续时间的一半，换句话说，直到第一个 View 完成动画。
如果您希望其中一个动画更快或更慢，请使用 framePosition 属性。
有关这些属性的更多说明，here是官方文档。