MotionLayout第三篇使用篇1Android 最丝滑的动画--(后面陆续更新)(带效果图)

介绍一下MotionLayout和相关的元素

MotionLayout以及元素描述
MotionLayout使用运动场景文件定义运动序列,运动场景文件是用来指定运动的动画的XML文件,场景文件是放在MotionLayout布局的app:layoutDescription 属性当中
MotionLayout布局以及场景文件等相关元素
<MotionScene
运动场景文件的根元素。
<ConstraintSet
指定所有视图在运动序列中某一点处的位置和属性。
<Constraint
指定运动序列中其中一个元素的位置和属性。
<Transition
指定运动序列的开始和结束状态、任何所需的中间状态以及触发该序列的用户交互。
<onClick
指定当用户点按特定视图时要执行的操作。
<onSwipe
指定当用户在布局上滑动时要执行的操作。
<KeyFrameSet
指定运动序列过程中视图的位置和属性。
<KeyPosition
指定视图在运动序列中特定时刻的位置。
<KeyAttribute
指定视图在运动序列中特定时刻的属性。
运动场景文件<MotionScene
场景文件是在res/xml下面创建的xml文件
<MotionScene包含一个或多个 <Transition 元素，每个元素用于定义运动序列的开始和结束状态，以及这两种状态之间的转换。

语法

<MotionScene xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:android="http://schemas.android.com/apk/res/android">
        ...
    </MotionScene>

必须包含的元素

<Transition
指定需要执行的运动序列。如果 <MotionScene 包含多个 <Transition 元素，MotionLayout 会根据用户的互动选择最合适的元素。例如，<MotionScene 可能有四个 <Transition 子元素，每个元素都包含一个 <onSwipe，用于供用户向不同方向滑动。当用户在屏幕上滑动时，MotionLayout 会使用适当的 <Transition 以便沿该方向滑动。

可以包含的元素

<ConstraintSet
为一个或多个 <Transition 节点指定开始或结束状态。<MotionLayout 可以有零个 <ConstraintSet 子元素，因为 <Transition 可指向 XML 布局，而不是指向约束布局集。

属性

defaultDuration
所有过渡的默认持续时间（以毫秒为单位）。默认持续时间用于未指定自己的持续时间的任何运动序列。例如，在设置了 defaultDuration=“300” 的情况下，如果所有运动序列都没有明确指定自己的持续时间，则默认持续时间为 300 毫秒。

一、MotionLayout的基础使用

MotionLayout是基于ConstraintLayout 2.0,需要升级依赖

dependencies {
implementation 'com.android.support.constraint:constraint-layout:2.0.0-alpha2'
}

在布局中直接将

<android.support.constraint.ConstraintLayout .../>替换为MotionLayout

首先来写一个基本的运动布局

<androidx.constraintlayout.motion.widget.MotionLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/motionLayout"
    app:layoutDescription="@xml/scene_02"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <View
        android:id="@+id/button"
        android:background="@color/colorAccent"
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:text="Button"
        tools:layout_editor_absoluteX="147dp"
        tools:layout_editor_absoluteY="230dp" />

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

再写一个运动文件,在res下面的xml中创建scene_02.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">

<!--  动画过度,从开始到结束的动画  根据id来绑定动画   duration动画持续时长-->
    <Transition
        motion:constraintSetEnd="@+id/end"
        motion:constraintSetStart="@+id/start"
        motion:duration="1000">

<!--  动画的滑动操作  -->
        <OnSwipe
            motion:dragDirection="dragRight"
            motion:touchAnchorId="@id/button"
            motion:touchAnchorSide="right" />

<!--  动画的点击操作 -->
<!--        motion:clickAction="jumpToEnd"    直接跳过动画到动画结尾-->
<!--        motion:clickAction="jumpToStart"-->
<!--        motion:clickAction="toggle"   执行动画的开始结束动画,反复播放-->
<!--        motion:clickAction="transitionToEnd"    执行动画效果到结尾-->
<!--        motion:clickAction="transitionToStart"-->
        
        <!--    targetId绑定布局页面的id-->
        <OnClick
            motion:clickAction="toggle"
            motion:targetId="@id/button" />

    </Transition>

<!--    动画开始的位置  通过id来执行动画的开始和结束-->
<!--    <Constraint android:id="@id/button">绑定布局页面的id-->
    <ConstraintSet android:id="@+id/start">
        <Constraint android:id="@id/button">
<!--    布局控件起始的宽高和位置    -->
            <Layout
                android:layout_width="64dp"
                android:layout_height="64dp"
                android:layout_marginStart="8dp"
                motion:layout_constraintBottom_toBottomOf="parent"
                motion:layout_constraintStart_toStartOf="parent"
                motion:layout_constraintTop_toTopOf="parent" />
        </Constraint>
    </ConstraintSet>

    <ConstraintSet
        android:id="@+id/end"
        motion:deriveConstraintsFrom="@id/start">
        <!--    布局控件执行完的的宽高和位置    -->
        <Constraint android:id="@id/button">
            <Layout
                android:layout_width="64dp"
                android:layout_height="64dp"
                android:layout_marginEnd="8dp"
                motion:layout_constraintEnd_toEndOf="parent" />
        </Constraint>
    </ConstraintSet>

</MotionScene>

控件可以通过滑动和点击的方式来执行动画

总结

这个就是MotionLayout 的基本动画的使用,