JetPack中MotionLayout的简单使用

1.MotionLayout是ConstraintLayout的子类，所以它是一种布局类型，但是它能够为布局属性添加动画效果，让我们来简单的实现看看吧！

（一）首先我们看看效果：向上滑动效果 不会搞gif （主要麻烦哈哈） 

Start

end

 （二）页面布局以及MotionLayout的属性设置

activity_motionlayout.xml（在布局中我们可以看到MotionLayout作为父类有一个这样的app:layoutDescription属性 将ConstraintLayout转换成MotionLayout后，我们会发现在res -> xml 下面多了一个MotionScene文件，动画的相关配置都是储存在这个文件中）

<?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/activity_motionlayout_scene"
    tools:context=".ui.activity.MotionLayoutActivity">
    <ImageView
        android:id="@+id/iv_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/black75"
        android:src="@drawable/customactivityoncrash_error_image" />
    <ImageView
        android:id="@+id/iv_start"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="@dimen/dp_20"
        android:layout_marginBottom="@dimen/dp_20"
        android:src="@mipmap/leak_canary_icon"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent" />
    <ImageView
        android:id="@+id/iv_content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="@dimen/dp_20"
        android:src="@mipmap/leak_canary_icon"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />
    <ImageView
        android:id="@+id/iv_end"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="@dimen/dp_20"
        android:layout_marginBottom="@dimen/dp_20"
        android:src="@mipmap/leak_canary_icon"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    
</androidx.constraintlayout.motion.widget.MotionLayout>

（三 ）MotionScene设置

activity_motionlayout_scene

<?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/start">
        <Constraint
            android:id="@+id/iv_main"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
        <Constraint
            android:id="@+id/recyclerView"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:alpha="0.0"
            motion:layout_constraintBottom_toTopOf="@+id/iv_content"
            motion:layout_constraintTop_toBottomOf="@+id/iv_main" />
        <Constraint
            android:id="@+id/iv_end"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="@dimen/dp_20"
            android:alpha="1.0"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintStart_toStartOf="parent" />
        <Constraint
            android:id="@+id/iv_content"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="@dimen/dp_20"
            android:alpha="1.0"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintStart_toStartOf="parent" />
        <Constraint
            android:id="@+id/iv_start"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="@dimen/dp_20"
            android:alpha="1.0"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintStart_toStartOf="parent" />
    </ConstraintSet>
    <ConstraintSet android:id="@+id/end">
        <Constraint
            android:id="@+id/iv_main"
            android:layout_width="match_parent"
            android:layout_height="220dp"
            motion:layout_constraintTop_toTopOf="parent" />
        <Constraint
            android:id="@+id/recyclerView"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:alpha="1.0"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintTop_toBottomOf="@+id/iv_content" />
        <Constraint
            android:id="@+id/iv_end"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/dp_20"
            android:layout_marginEnd="@dimen/dp_20"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintTop_toBottomOf="@+id/iv_main" />
        <Constraint
            android:id="@+id/iv_content"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/dp_20"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toBottomOf="@+id/iv_main" />
        <Constraint
            android:id="@+id/iv_start"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="@dimen/dp_20"
            android:layout_marginTop="@dimen/dp_20"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toBottomOf="@+id/iv_main" />
    </ConstraintSet>
    <Transition
        motion:constraintSetEnd="@+id/end"
        motion:constraintSetStart="@id/start"
        motion:duration="1000" />
    <Transition
        motion:constraintSetEnd="@id/end"
        motion:constraintSetStart="@id/start"
        motion:duration="1000">
        <KeyFrameSet>
            <KeyPosition
                motion:framePosition="50"
                motion:keyPositionType="parentRelative"
                motion:motionTarget="@id/iv_main"
                motion:percentY="0.5" />
            <!--apply other animation attributes-->
            <!--前半段的动画效果：逆时针旋转一圈，同时放大一倍-->
            <KeyAttribute
                android:rotation="-360"
                android:scaleX="2.0"
                android:scaleY="2.0"
                motion:framePosition="50"
                motion:motionTarget="@id/iv_start" />
            <!--          <KeyAttribute           android:rotation="-360"-->
            <!--                android:scaleX="2.0"-->
            <!--                android:scaleY="2.0"-->
            <!--                motion:framePosition="50"-->
            <!--                motion:motionTarget="@id/iv_content" />-->
            <KeyAttribute
                android:rotation="360"
                android:scaleX="2.0"
                android:scaleY="2.0"
                motion:framePosition="50"
                motion:motionTarget="@id/iv_end" />
            <!--后半段的动画效果：逆时针旋转一圈，同时变回原样-->
            <KeyAttribute
                android:rotation="-720"
                motion:framePosition="100"
                motion:motionTarget="@id/iv_start" />
            <!--            <KeyAttribute-->
            <!--                android:rotation="-720"-->
            <!--                motion:framePosition="100"-->
            <!--                motion:motionTarget="@id/iv_content" />-->
            <KeyAttribute
                android:rotation="720"
                motion:framePosition="100"
                motion:motionTarget="@id/iv_end" />
        </KeyFrameSet>
        <OnSwipe
            motion:dragDirection="dragUp"
            motion:touchAnchorId="@id/iv_main"
            motion:touchAnchorSide="bottom" />
    </Transition>
</MotionScene>

看不懂的直接复制代码看效果吧！还有MotionLayout是constraintlayout2.0以后才有的功能我们要添加依赖也是2.0+哦：

implementation 'androidx.constraintlayout:constraintlayout:2.0.2'