Использование MotionLayout для анимации разных элементов в разное время

Question

Я пытаюсь оживить раздачу карт в моей игре в блэкджек.

Похоже, что я могу запустить только одну «сцену» за раз, и попытка изменить движение на отдельный начальный / конечный переход сбросит первый переход. Я загрузил видео этой проблемы здесь: https://streamable.com/7o7lvg

Я хотел создать другой файл motion_scene. xml, но этот файл связан с root фрагмента (приложение: layoutDescription = "@ XML / motion_scene"). Затем я попытался изменить переход с помощью motion.SetTransition (constraint1, constraint2), но это привело к повторной настройке, которую вы видите в видео. Может ли кто-нибудь помочь мне убедиться, что анимации остались в их окончательном состоянии?

Вот мой файл макета фрагмента_движения. Обратите внимание, что я имею в виду motion_scene. xml.

<androidx.constraintlayout.motion.widget.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/MotionFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:paddingStart="10dp"
    android:paddingEnd="10dp"
    app:layoutDescription="@xml/motion_scene"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintEnd_toStartOf="parent"
    tools:context=".MotionFragment"
    tools:showPaths="true">

    <ImageView
        android:id="@+id/cardView"
        android:layout_width="@dimen/card_width_start"
        android:layout_height="@dimen/card_height_start"
        android:contentDescription="@string/CardMove"
        android:src="@drawable/card_ah"
        app:layout_constraintTop_toTopOf="parent"
        tools:layout_editor_absoluteX="287dp" />

    <ImageView
        android:id="@+id/cardView2"
        android:layout_width="@dimen/card_width_start"
        android:layout_height="@dimen/card_height_start"
        android:src="@drawable/card_2c"
         />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_begin="498dp" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toEndOf="@+id/button2" />

</androidx.constraintlayout.motion.widget.MotionLayout>

Вот мой файл motion_scene. xml. Обратите внимание, что у меня есть два отдельных перехода, каждый из которых анимирует различные изображения.

<?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
        android:id="@+id/transition_one"
        motion:constraintSetEnd="@id/end"
        motion:constraintSetStart="@id/start"
        motion:duration="500">

        <KeyFrameSet>
            <KeyAttribute
                android:alpha="0"
                motion:framePosition="0"
                motion:motionTarget="@+id/cardView" />

            <KeyAttribute
                android:rotation="-80"
                motion:framePosition="0"
                motion:motionTarget="@+id/cardView" />

        </KeyFrameSet>
    </Transition>

    <Transition
        android:id="@+id/transition_two"
        motion:constraintSetEnd="@id/end2"
        motion:constraintSetStart="@id/start2"
        motion:duration="500">

        <KeyFrameSet>
            <KeyAttribute
                android:alpha="0"
                motion:framePosition="0"
                motion:motionTarget="@+id/cardView2" />

            <KeyAttribute
                android:rotation="-80"
                motion:framePosition="0"
                motion:motionTarget="@+id/cardView2" />

        </KeyFrameSet>
    </Transition>


    <ConstraintSet android:id="@+id/start">
        <Constraint
            android:id="@+id/cardView"
            android:layout_width="100dp"
            android:layout_height="140dp"
            motion:layout_constraintBottom_toTopOf="parent"
            motion:layout_constraintRight_toLeftOf="@+id/guideline2" />

    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <Constraint
            android:id="@+id/cardView"
            android:layout_width="@dimen/card_width_finish"
            android:layout_height="@dimen/card_height_finish"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintHorizontal_bias="0.24"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent" />
    </ConstraintSet>

    <ConstraintSet android:id="@+id/start2">
        <Constraint
            android:id="@+id/cardView2"
            android:layout_width="100dp"
            android:layout_height="140dp"
            motion:layout_constraintBottom_toTopOf="parent"
            motion:layout_constraintRight_toLeftOf="@+id/guideline2" />

    </ConstraintSet>

    <ConstraintSet android:id="@+id/end2">
        <Constraint
            android:id="@+id/cardView2"
            android:layout_width="@dimen/card_width_finish"
            android:layout_height="@dimen/card_height_finish"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintHorizontal_bias="0.8"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent"
            motion:layout_constraintVertical_bias="0.38" />
    </ConstraintSet>


</MotionScene>

И, наконец, вот мой код MotionFragment.kt, который настраивает кнопки для запуска каждой анимации.

class MotionFragment : Fragment() {
override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_motion, container, false)
    }
    

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        val button = view.findViewById<Button>(R.id.button2)
        val button2 = view.findViewById<Button>(R.id.button3)
        val motion = view.findViewById<MotionLayout>(R.id.MotionFragment)

        button.setOnClickListener { _ ->
            ///First transition with image 1
            motion.setTransition(R.id.start2, R.id.end2)
            motion.transitionToEnd()
        }

        button2.setOnClickListener { _ ->
            ///Second transition with image 2
            motion.setTransition(R.id.start, R.id.end)
            motion.transitionToEnd()
        }