过渡动画原理

过渡动画指的是两个场景之间的过渡，⼀个「开始场景」⼀个「结束场景」

我们就要从场景上记录⾥⾯控件的各种参数
根据两个场景的各种参数，创建出属性动画，播放属性动画

layout中配置

  <androidx.constraintlayout.motion.widget.MotionLayout
        android:id="@+id/mMotionLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layoutDescription="@xml/motion_video_detail"
        app:showPaths="false"
        android:background="@color/color_ffffff"
        >
</androidx.constraintlayout.motion.widget.MotionLayout>

动画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:constraintSetStart="@id/start"
        motion:constraintSetEnd="@id/end"
        motion:duration="500"
        >

        <OnSwipe motion:dragDirection = "dragUp"
            motion:touchAnchorSide="top"
            motion:touchAnchorId="@+id/scroll"
            motion:onTouchUp="stop"
            />

         <OnClick
               app:clickAction="toggle"
               app:targetId="@id/toggle"/>

         <KeyAttribute
               app:framePosition="0"
               app:motionTarget="@id/image_film_cover"
               android:elevation="12dp"> 

                 <CustomAttribute
                       app:attributeName="BackgroundColor"
                      app:customColorValue="@color/colorAccent"/>

         </KeyAttribute>
    </Transition>

    <ConstraintSet android:id = "@+id/start">
        <Constraint
            android:id="@+id/image"
            android:layout_width="match_parent"
            android:layout_height="666dp"
            android:maxHeight="666dp"
            motion:layout_constraintTop_toTopOf="parent"
            motion:layout_constraintLeft_toLeftOf="parent"
            motion:layout_constraintLeft_toRightOf="parent"
            />

    </ConstraintSet>

    <ConstraintSet android:id = "@+id/end">
        <Constraint
            android:id="@+id/image"
            android:layout_width="match_parent"
            android:layout_height="250dp"
            android:maxHeight="666dp"
            motion:layout_constraintTop_toTopOf="parent"
            motion:layout_constraintLeft_toLeftOf="parent"
            motion:layout_constraintLeft_toRightOf="parent"
            />

    </ConstraintSet>
</MotionScene>

OnSwipe

<OnSwipe> 添加在 <Transtion> 节点中⽀持的参数：
1.touchAnchorId 指的是哪⼀个控件响应触摸事件。
2.autoComplete 默认的是 true ，会根据动画完成的百分⽐⾃动到最近的⼀个状态
3.dragDirection 拖拽的⽅向

OnClick

< OnClick > 添加在 <Transtion> 节点中⽀持的参数：
1.targetId 指定控件
2.clickAction
(1).toggle 反转状态
(2).transitionToEnd/Start 通过动画到结束/起始状态
(3).jumpToEnd/Start 没有动画直接到结束/起始状态

KeyPositionSet

1.app:motionTarget ⽬标对象 ID
2.app:framePosition 百分⽐ (0 ‑ 100)

KeyAttribute 属性关键字

可以设置位移，旋转，缩放等属性，同时还可以通过 CustomAttribute 添加定义属性

KeyPosition 位置关键帧

percentX/Y 在关键帧时，对应路径的对应百分⽐
percentWidth/Height 在关键帧时，控件⼤⼩改变的百分⽐
curveFit 运动路径的样式（直线，曲线等）
keyPositionType 坐标系 (结合课上的画图理解)
1.parentRelative
（0，0）为⽗容器左上⻆
（1，1）为⽗容器右下⻆
2.deltaRelative
（0，0）为起始控件中⼼
（1，1）为结束控件中⼼
3.pathRelative
（0，0）为起始控件中⼼
（1，0）为结束控件中⼼

KeyCycle 和 KeyTimeCycle

通过 3 个 KeyCycle 定义⼀个准确的循环关键帧

    <KeyFrameSet>
        <KeyCycle
            android:rotation="0"
            app:motionTarget="@id/fab_favourite"
            app:wavePeriod="0"
            app:framePosition="0"
            app:waveShape="sin"/>
        <KeyCycle
            android:rotation="180"
            app:motionTarget="@id/fab_favourite"
            app:wavePeriod="3"
            app:framePosition="50"
            app:waveShape="sin"/>
        <KeyCycle
            android:rotation="0"
            app:motionTarget="@id/fab_favourite"
            app:wavePeriod="0"
            app:framePosition="100"
            app:waveShape="sin"/>
    </KeyFrameSet>

wavePeriod 循环次数（KeyTimeCycle 表示的每秒循环次数）
waveShape 数学模型

MotionLayout 使⽤