使用MotionLayout实现模拟启动页动画和轮播图

源码在这里： 源码链接
本文是用java写的

效果图展示

下面是本博客我使用真机所实现的功能展现，方便大家根据自身需求自取

启动页效果

轮播图效果

MotionLayout详解

准备工作

想要实现MotionLayout，第一步就是使用ConstraintLayout布局，然后将其一键转换，就可以得到MotionLaout布局和其对应的scene文件

点击下图的Convert to MotionLayout就可以得到一个MotionLayout布局，
这里注意了，原先的ConstrainLayout布局中的组件的顺序是有意义的，在后续scene的文件中是根据这里面的顺序进行排布的。

转换完成后，你就会得到一个这样的MotionLayout布局的activity_main.xml

以及一个大致长这样的activity_main_scene.xml

正题

首先将你所要放入的组件先放入到你的MotionLaout中,下面是我的主页面的MotionLayout中的内容

<?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_main_scene">

    <pl.droidsonroids.gif.GifImageView
        android:id="@+id/gifImv1"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_weight="1"
        android:scaleType="fitXY"
        android:src="@drawable/d320c53c8d16cda0b7431627e897d2b2"
        app:layout_constraintBottom_toBottomOf="@id/g7"
        app:layout_constraintLeft_toLeftOf="@id/g3"
        app:layout_constraintRight_toRightOf="@id/g4"
        app:layout_constraintTop_toTopOf="@id/g7" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/g1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.2" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/g2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.4" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/g3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.6" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/g4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.8" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/g5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.5" />



    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/g6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="1" />
    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/g7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.8"/>
    <androidx.constraintlayout.utils.widget.ImageFilterView
        android:id="@+id/img1"
        android:layout_width="10dp"
        android:layout_height="10dp"
        android:src="@drawable/img1"
        android:visibility="invisible"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.utils.widget.ImageFilterView
        android:id="@+id/img2"
        android:layout_width="10dp"
        android:layout_height="10dp"
        android:src="@drawable/img2"
        android:visibility="invisible"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.utils.widget.ImageFilterView
        android:id="@+id/img3"
        android:layout_width="10dp"
        android:layout_height="10dp"
        android:src="@drawable/img3"
        android:visibility="invisible"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.utils.widget.ImageFilterView
        android:id="@+id/img4"</