30天学习笔记 -day 26-Motion Editor(上篇)

Motion Editor是自 Android Studio 4.0 版本开始为MotionLayout布局型别所构建的视觉化编辑气，用於建立动画效果。
MotionLayout是ConstraintLayout 的子类别，可以将任何的ConstraintLayout转换成MotionLayout。

将constraintlayout转换於motionLayout

转换结束会发现在res目录之下有xml资料夹

activity_motion_scene.xml

设定使用者与ui互动会显示的动画，
button(id为button)被我滑动的时候，会从开始的ConstraintSet至结束的ConstraintSet所进行的动画。

<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">
      
        <!-- 动画实现的样式 -->
       <OnSwipe motion:dragDirection="dragUp"
        motion:touchAnchorId="@id/button"
        motion:touchAnchorSide="top"/>
    </Transition>
    <!-- 动画开始 -->
    <ConstraintSet android:id="@+id/start">
        <Constraint
            motion:layout_constraintVertical_bias="0.877"
            android:layout_height="wrap_content"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            android:layout_width="wrap_content"
            android:id="@+id/button" />
    </ConstraintSet>
    <!-- 动画结束 -->
    <ConstraintSet android:id="@+id/end">
        <Constraint
            motion:layout_constraintVertical_bias="0.109"
            android:layout_height="wrap_content"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            android:layout_width="wrap_content"
            android:id="@+id/button" />
    </ConstraintSet>
</MotionScene>

在Transition里的:
motion:constraintSetEnd="@+id/end" :表示动画结束的布局id
motion:constraintSetStart="@id/start":表示动画开始的布局id
motion:duration="1000" //动画执行的时间
OnSwipe:使用者与ui互动的方法

• motion:dragDirection="" 控制元件拉的方向(有 dragUp (向上移动)/ dragDown(向下移动) / dragRight(向右移动) / dragLeft(向左移动) )这4种
• motion:touchAnchorId=""设定可互动的元件
• motion:touchAnchorSide=""设定滑动区域

成果
这样就可以完成简单的动画了~