Motion Editor (四) 文字，图片，复杂

1. 基于 Motion Editor (三) 旋转，摆荡，过渡 添加

Motion Editor (三) 旋转，摆荡，过渡https://blog.csdn.net/u011193452/article/details/127486237

2. 文字动画

  2.1 布局转换为 MotionLayout 布局，文件 fragment_text.xml

<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layoutDescription="@xml/fragment_text_scene"
    tools:context=".ui.TextFragment"
    tools:ignore="HardcodedText">

    <TextView
        android:id="@+id/textView12"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="H"
        android:textSize="36sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.29"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.12" />

    <TextView
        android:id="@+id/textView13"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="E"
        android:textSize="36sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.3"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.238" />

    <TextView
        android:id="@+id/textView14"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="L"
        android:textSize="36sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.3"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.349" />

    <TextView
        android:id="@+id/textView15"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="L"
        android:textSize="36sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.3"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.467" />

    <TextView
        android:id="@+id/textView16"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="O"
        android:textSize="36sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.3"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.594" />

    <TextView
        android:id="@+id/textView17"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="W"
        android:textSize="36sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.7"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.2" />

    <TextView
        android:id="@+id/textView18"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="O"
        android:textSize="36sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.7"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.32" />

    <TextView
        android:id="@+id/textView19"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="R"
        android:textSize="36sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.7"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.44" />

    <TextView
        android:id="@+id/textView20"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="L"
        android:textSize="36sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.7"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.56" />

    <TextView
        android:id="@+id/textView21"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="D"
        android:textSize="36sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.7"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.68" />

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

  2.2 自动生成动画场景文件，fragment_text_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">

    <ConstraintSet android:id="@+id/begin">
        <Constraint
            android:id="@+id/textView12"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintHorizontal_bias="0.29"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent"
            motion:layout_constraintVertical_bias="0.12">
            <CustomAttribute
                motion:attributeName="textColor"
                motion:customColorValue="@android:color/white" />
        </Constraint>
        <Constraint
            android:id="@+id/textView13"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintHorizontal_bias="0.3"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent"
            motion:layout_constraintVertical_bias="0.238">
            <CustomAttribute
                motion:attributeName="textColor"
                motion:customColorValue="@android:color/white" />
        </Constraint>
        <Constraint
            android:id="@+id/textView14"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintHorizontal_bias="0.3"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent"
            motion:layout_constraintVertical_bias="0.349">
            <CustomAttribute
                motion:attributeName="textColor"
                motion:customColorValue="@android:color/white" />
        </Constraint>
        <Constraint
            android:id="@+id/textView15"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintHorizontal_bias="0.3"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent"
            motion:layout_constraintVertical_bias="0.467">
            <CustomAttribute
                motion:attributeName="textColor"
                motion:customColorValue="@android:color/white" />
        </Constraint>
        <Constraint
            android:id="@+id/textView16"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintHorizontal_bias="0.3"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent"
            motion:layout_constraintVertical_bias="0.594">
            <CustomAttribute
                motion:attributeName="textColor"
                motion:customColorValue="@android:color/white" />
        </Constraint>
        <Constraint
            android:id="@+id/textView17"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintHorizontal_bias="0.7"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent"
            motion:layout_constraintVertical_bias="0.2">
            <CustomAttribute
                motion:attributeName="textColor"
                motion:customColorValue="@android:color/white" />
            <CustomAttribute
                motion:attributeName="scaleY"
                motion:customFloatValue="1" />
        </Constraint>
        <Constraint
            android:id="@+id/textView21"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintHorizontal_bias="0.7"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent"
            motion:layout_constraintVertical_bias="0.68">
            <CustomAttribute
                motion:attributeName="scaleY"
                motion:customFloatValue="1" />
            <CustomAttribute
                motion:attributeName="scaleX"
                motion:customFloatValue="1" />
            <CustomAttribute
                motion:attributeName="textColor"
                motion:customColorValue="@android:color/white" />
            <CustomAttribute
                motion:attributeName="alpha"
                motion:customFloatValue="1" />
        </Constraint>
        <Constraint
            android:id="@+id/textView18"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintHorizontal_bias="0.7"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent"
            motion:layout_constraintVertical_bias="0.32">
            <CustomAttribute
                motion:attributeName="textColor"
                motion:customColorValue="@android:color/white" />
        </Constraint>
        <Constraint
            android:id="@+id/textView19"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintHorizontal_bias="0.7"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent"
            motion:layout_constraintVertical_bias="0.44">
            <CustomAttribute
                motion:attributeName="textColor"
                motion:customColorValue="@android:color/white" />
        </Constraint>
        <Constraint
            android:id="@+id/textView20"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintHorizontal_bias="0.7"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent"
            motion:layout_constraintVertical_bias="0.56">
            <CustomAttribute
                motion:attributeName="textColor"
                motion:customColorValue="@android:color/white" />
        </Constraint>
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <Constraint
            android:id="@+id/textView12"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintHorizontal_bias="0.153"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent"
            motion:layout_constraintVertical_bias="0.266">
            <CustomAttribute
                motion:attributeName="textColor"
                motion:customColorValue="@android:color/holo_red_light" />
        </Constraint>
        <Constraint
            android:id="@+id/textView13"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintHorizontal_bias="0.33"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent"
            motion:layout_constraintVertical_bias="0.294">
            <CustomAttribute
                motion:attributeName="textColor"
                motion:customColorValue="@android:color/holo_purple" />
        </Constraint>
        <Constraint
            android:id="@+id/textView14"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintHorizontal_bias="0.507"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent"
            motion:layout_constraintVertical_bias="0.267">
            <CustomAttribute
                motion:attributeName="textColor"
                motion:customColorValue="@android:color/holo_blue_bright" />
        </Constraint>
        <Constraint
            android:id="@+id/textView15"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintHorizontal_bias="0.719"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent"
            motion:layout_constraintVertical_bias="0.499">
            <CustomAttribute
                motion:attributeName="textColor"
                motion:customColorValue="@android:color/holo_orange_dark" />
        </Constraint>
        <Constraint
            android:id="@+id/textView16"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintHorizontal_bias="0.849"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent"
            motion:layout_constraintVertical_bias="0.266">
            <CustomAttribute
                motion:attributeName="textColor"
                motion:customColorValue="@android:color/holo_green_light" />
        </Constraint>
        <Constraint
            android:id="@+id/textView17"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintHorizontal_bias="0.311"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent"
            motion:layout_constraintVertical_bias="0.499">
            <CustomAttribute
                motion:attributeName="textColor"
                motion:customColorValue="@android:color/holo_orange_light" />
            <CustomAttribute
                motion:attributeName="scaleY"
                motion:customFloatValue="1.5" />
        </Constraint>
        <Constraint
            android:id="@+id/textView18"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintHorizontal_bias="0.45"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent"
            motion:layout_constraintVertical_bias="0.499">
            <CustomAttribute
                motion:attributeName="textColor"
                motion:customColorValue="@android:color/holo_blue_light" />
        </Constraint>
        <Constraint
            android:id="@+id/textView19"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintHorizontal_bias="0.586"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent"
            motion:layout_constraintVertical_bias="0.499">
            <CustomAttribute
                motion:attributeName="textColor"
                motion:customColorValue="@android:color/holo_green_dark" />
        </Constraint>
        <Constraint
            android:id="@+id/textView20"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintHorizontal_bias="0.688"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent"
            motion:layout_constraintVertical_bias="0.294">
            <CustomAttribute
                motion:attributeName="textColor"
                motion:customColorValue="@android:color/holo_purple" />
        </Constraint>
        <Constraint
            android:id="@+id/textView21"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintHorizontal_bias="0.847"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent"
            motion:layout_constraintVertical_bias="0.499">
            <CustomAttribute
                motion:attributeName="scaleY"
                motion:customFloatValue="1.5" />
            <CustomAttribute
                motion:attributeName="textColor"
                motion:customColorValue="@android:color/holo_red_light" />
            <CustomAttribute
                motion:attributeName="alpha"
                motion:customFloatValue="1" />
        </Constraint>
    </ConstraintSet>

    <Transition
        motion:constraintSetEnd="@+id/end"
        motion:constraintSetStart="@+id/begin"
        motion:duration="2000"
        motion:motionInterpolator="cubic(0.4,0,0.4,1)"
        motion:staggered="0.6">
        <KeyFrameSet>
            <KeyCycle
                android:rotationY="60"
                motion:framePosition="100"
                motion:motionTarget="@+id/textView21"
                motion:waveOffset="0"
                motion:wavePeriod="1" />
            <KeyCycle
                android:rotation="60"
                motion:framePosition="100"
                motion:motionTarget="@+id/textView19"
                motion:waveOffset="0"
                motion:wavePeriod="1" />
            <KeyAttribute
                android:rotation="360"
                motion:framePosition="100"
                motion:motionTarget="@+id/textView20" />
            <KeyAttribute
                android:rotationY="360"
                motion:framePosition="100"
                motion:motionTarget="@+id/textView17" />
        </KeyFrameSet>
        <OnClick />
    </Transition>
</MotionScene>

3. 图片动画

  3.1 布局文件转换为 MotionLayout 布局，fragment_image.xml

<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layoutDescription="@xml/fragment_image_scene"
    tools:context=".ui.ImageFragment"
    tools:ignore="SpeakableTextPresentCheck">

    <androidx.constraintlayout.utils.widget.ImageFilterView
        android:id="@+id/imageFilterView"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:src="@drawable/ic_java"
        app:altSrc="@drawable/ic_kotlin"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:roundPercent="0.2" />
</androidx.constraintlayout.motion.widget.MotionLayout>

  3.2 自动生成动画场景文件，fragment_image_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
        motion:constraintSetEnd="@+id/end"
        motion:constraintSetStart="@id/start"
        motion:duration="1000">
        <KeyFrameSet />
        <OnClick />
    </Transition>

    <ConstraintSet android:id="@+id/start">
        <Constraint
            android:id="@+id/imageFilterView"
            android:layout_width="120dp"
            android:layout_height="120dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintHorizontal_bias="0.05"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent">
            <CustomAttribute
                motion:attributeName="roundPercent"
                motion:customFloatValue="0.1" />
            <CustomAttribute
                motion:attributeName="crossfade"
                motion:customDimension="0px" />
        </Constraint>
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <Constraint
            android:id="@+id/imageFilterView"
            android:layout_width="120dp"
            android:layout_height="120dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintHorizontal_bias="0.945"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent">
            <CustomAttribute
                motion:attributeName="roundPercent"
                motion:customFloatValue="1" />
            <CustomAttribute
                motion:attributeName="crossfade"
                motion:customDimension="1px" />
        </Constraint>
    </ConstraintSet>
</MotionScene>

4. 复杂的动画

  4.1 布局转换为 MotionLayout 布局，文件 fragment_complex.xml

<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layoutDescription="@xml/fragment_complex_scene"
    tools:context=".ui.ComplexFragment"
    tools:ignore="ContentDescription">

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginBottom="300dp"
        android:src="@drawable/ic_baseline_sailing"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginBottom="300dp"
        android:src="@drawable/ic_baseline_flight"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginBottom="300dp"
        android:src="@drawable/ic_baseline_toys"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/imageView4"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginBottom="300dp"
        android:src="@drawable/ic_baseline_two_wheeler"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.motion.widget.MotionLayout>

  4.2 自动生成动画场景文件，fragment_complex_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
        motion:constraintSetEnd="@+id/end"
        motion:constraintSetStart="@id/start"
        motion:duration="5000"
        motion:motionInterpolator="easeInOut"
        motion:pathMotionArc="startVertical"
        motion:staggered="0.1">
        <KeyFrameSet>
            <KeyAttribute
                android:scaleX="1"
                motion:framePosition="90"
                motion:motionTarget="@+id/imageView1" />
            <KeyAttribute
                android:scaleY="1"
                motion:framePosition="90"
                motion:motionTarget="@+id/imageView1" />
            <KeyAttribute
                android:scaleX="0"
                motion:framePosition="0"
                motion:motionTarget="@+id/imageView1" />
            <KeyAttribute
                android:scaleY="0"
                motion:framePosition="0"
                motion:motionTarget="@+id/imageView1" />
            <KeyPosition
                motion:framePosition="15"
                motion:keyPositionType="parentRelative"
                motion:motionTarget="@+id/imageView1"
                motion:pathMotionArc="startHorizontal"
                motion:percentX="0.225"
                motion:percentY="0.658" />
            <KeyPosition
                motion:framePosition="30"
                motion:keyPositionType="parentRelative"
                motion:motionTarget="@+id/imageView1"
                motion:pathMotionArc="startVertical"
                motion:percentX="-0.063"
                motion:percentY="0.461" />
            <KeyPosition
                motion:framePosition="45"
                motion:keyPositionType="parentRelative"
                motion:motionTarget="@+id/imageView1"
                motion:pathMotionArc="startHorizontal"
                motion:percentX="0.495"
                motion:percentY="0.05" />
            <KeyPosition
                motion:framePosition="60"
                motion:keyPositionType="parentRelative"
                motion:motionTarget="@+id/imageView1"
                motion:pathMotionArc="startVertical"
                motion:percentX="1.071"
                motion:percentY="0.426" />
            <KeyPosition
                motion:framePosition="75"
                motion:keyPositionType="parentRelative"
                motion:motionTarget="@+id/imageView1"
                motion:pathMotionArc="startHorizontal"
                motion:percentX="0.486"
                motion:percentY="0.727" />
            <KeyPosition
                motion:framePosition="90"
                motion:keyPositionType="parentRelative"
                motion:motionTarget="@+id/imageView1"
                motion:pathMotionArc="none"
                motion:percentX="0.495"
                motion:percentY="0.871" />
        </KeyFrameSet>

        <KeyFrameSet>
            <KeyAttribute
                android:scaleX="1"
                motion:framePosition="90"
                motion:motionTarget="@+id/imageView2" />
            <KeyAttribute
                android:scaleY="1"
                motion:framePosition="90"
                motion:motionTarget="@+id/imageView2" />
            <KeyAttribute
                android:scaleX="0"
                motion:framePosition="0"
                motion:motionTarget="@+id/imageView2" />
            <KeyAttribute
                android:scaleY="0"
                motion:framePosition="0"
                motion:motionTarget="@+id/imageView2" />
            <KeyPosition
                motion:framePosition="15"
                motion:keyPositionType="parentRelative"
                motion:motionTarget="@+id/imageView2"
                motion:pathMotionArc="startHorizontal"
                motion:percentX="0.225"
                motion:percentY="0.658" />
            <KeyPosition
                motion:framePosition="30"
                motion:keyPositionType="parentRelative"
                motion:motionTarget="@+id/imageView2"
                motion:pathMotionArc="startVertical"
                motion:percentX="-0.063"
                motion:percentY="0.461" />
            <KeyPosition
                motion:framePosition="45"
                motion:keyPositionType="parentRelative"
                motion:motionTarget="@+id/imageView2"
                motion:pathMotionArc="startHorizontal"
                motion:percentX="0.495"
                motion:percentY="0.05" />
            <KeyPosition
                motion:framePosition="60"
                motion:keyPositionType="parentRelative"
                motion:motionTarget="@+id/imageView2"
                motion:pathMotionArc="startVertical"
                motion:percentX="1.071"
                motion:percentY="0.426" />
            <KeyPosition
                motion:framePosition="75"
                motion:keyPositionType="parentRelative"
                motion:motionTarget="@+id/imageView2"
                motion:pathMotionArc="startHorizontal"
                motion:percentX="0.486"
                motion:percentY="0.727" />
            <KeyPosition
                motion:framePosition="90"
                motion:keyPositionType="parentRelative"
                motion:motionTarget="@+id/imageView2"
                motion:pathMotionArc="none"
                motion:percentX="0.495"
                motion:percentY="0.871" />
        </KeyFrameSet>

        <KeyFrameSet>
            <KeyAttribute
                android:scaleX="1"
                motion:framePosition="90"
                motion:motionTarget="@+id/imageView3" />
            <KeyAttribute
                android:scaleY="1"
                motion:framePosition="90"
                motion:motionTarget="@+id/imageView3" />
            <KeyAttribute
                android:scaleX="0"
                motion:framePosition="0"
                motion:motionTarget="@+id/imageView3" />
            <KeyAttribute
                android:scaleY="0"
                motion:framePosition="0"
                motion:motionTarget="@+id/imageView3" />
            <KeyPosition
                motion:framePosition="15"
                motion:keyPositionType="parentRelative"
                motion:motionTarget="@+id/imageView3"
                motion:pathMotionArc="startHorizontal"
                motion:percentX="0.225"
                motion:percentY="0.658" />
            <KeyPosition
                motion:framePosition="30"
                motion:keyPositionType="parentRelative"
                motion:motionTarget="@+id/imageView3"
                motion:pathMotionArc="startVertical"
                motion:percentX="-0.063"
                motion:percentY="0.461" />
            <KeyPosition
                motion:framePosition="45"
                motion:keyPositionType="parentRelative"
                motion:motionTarget="@+id/imageView3"
                motion:pathMotionArc="startHorizontal"
                motion:percentX="0.495"
                motion:percentY="0.05" />
            <KeyPosition
                motion:framePosition="60"
                motion:keyPositionType="parentRelative"
                motion:motionTarget="@+id/imageView3"
                motion:pathMotionArc="startVertical"
                motion:percentX="1.071"
                motion:percentY="0.426" />
            <KeyPosition
                motion:framePosition="75"
                motion:keyPositionType="parentRelative"
                motion:motionTarget="@+id/imageView3"
                motion:pathMotionArc="startHorizontal"
                motion:percentX="0.486"
                motion:percentY="0.727" />
            <KeyPosition
                motion:framePosition="90"
                motion:keyPositionType="parentRelative"
                motion:motionTarget="@+id/imageView3"
                motion:pathMotionArc="none"
                motion:percentX="0.495"
                motion:percentY="0.871" />
        </KeyFrameSet>

        <KeyFrameSet>
            <KeyAttribute
                android:scaleX="1"
                motion:framePosition="90"
                motion:motionTarget="@+id/imageView4" />
            <KeyAttribute
                android:scaleY="1"
                motion:framePosition="90"
                motion:motionTarget="@+id/imageView4" />
            <KeyAttribute
                android:scaleX="0"
                motion:framePosition="0"
                motion:motionTarget="@+id/imageView4" />
            <KeyAttribute
                android:scaleY="0"
                motion:framePosition="0"
                motion:motionTarget="@+id/imageView4" />
            <KeyPosition
                motion:framePosition="15"
                motion:keyPositionType="parentRelative"
                motion:motionTarget="@+id/imageView4"
                motion:pathMotionArc="startHorizontal"
                motion:percentX="0.225"
                motion:percentY="0.658" />
            <KeyPosition
                motion:framePosition="30"
                motion:keyPositionType="parentRelative"
                motion:motionTarget="@+id/imageView4"
                motion:pathMotionArc="startVertical"
                motion:percentX="-0.063"
                motion:percentY="0.461" />
            <KeyPosition
                motion:framePosition="45"
                motion:keyPositionType="parentRelative"
                motion:motionTarget="@+id/imageView4"
                motion:pathMotionArc="startHorizontal"
                motion:percentX="0.495"
                motion:percentY="0.05" />
            <KeyPosition
                motion:framePosition="60"
                motion:keyPositionType="parentRelative"
                motion:motionTarget="@+id/imageView4"
                motion:pathMotionArc="startVertical"
                motion:percentX="1.071"
                motion:percentY="0.426" />
            <KeyPosition
                motion:framePosition="75"
                motion:keyPositionType="parentRelative"
                motion:motionTarget="@+id/imageView4"
                motion:pathMotionArc="startHorizontal"
                motion:percentX="0.486"
                motion:percentY="0.727" />
            <KeyPosition
                motion:framePosition="90"
                motion:keyPositionType="parentRelative"
                motion:motionTarget="@+id/imageView4"
                motion:pathMotionArc="none"
                motion:percentX="0.495"
                motion:percentY="0.871" />
        </KeyFrameSet>
        <OnClick />
    </Transition>

    <ConstraintSet android:id="@+id/start" />

    <ConstraintSet android:id="@+id/end">
        <Constraint
            android:id="@+id/imageView1"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_marginBottom="32dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toStartOf="@+id/imageView2"
            motion:layout_constraintStart_toStartOf="parent" />
        <Constraint
            android:id="@+id/imageView2"
            android:layout_width="100dp"
            android:layout_height="100dp"
            motion:layout_constraintBottom_toBottomOf="@+id/imageView1"
            motion:layout_constraintEnd_toStartOf="@+id/imageView3"
            motion:layout_constraintStart_toEndOf="@+id/imageView1"
            motion:layout_constraintTop_toTopOf="@+id/imageView1" />
        <Constraint
            android:id="@+id/imageView3"
            android:layout_width="100dp"
            android:layout_height="100dp"
            motion:layout_constraintBottom_toBottomOf="@+id/imageView2"
            motion:layout_constraintEnd_toStartOf="@+id/imageView4"
            motion:layout_constraintStart_toEndOf="@+id/imageView2"
            motion:layout_constraintTop_toTopOf="@+id/imageView2" />
        <Constraint
            android:id="@+id/imageView4"
            android:layout_width="100dp"
            android:layout_height="100dp"
            motion:layout_constraintBottom_toBottomOf="@+id/imageView3"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintStart_toEndOf="@+id/imageView3"
            motion:layout_constraintTop_toTopOf="@+id/imageView3" />
    </ConstraintSet>
</MotionScene>

5. 效果图