使用 MotionLayout 簡單構建過渡

MotionLayout 構建過渡

本篇會介紹如何使用 MotionLayout 快速建立一個簡單的過渡效果。

構建過渡只須要三步

在開始以前請牢記，構建過渡，只需簡單的三步。

1. 建立起始場景 (StartScene)
2. 建立結束場景 (EndScene)
3. 調整起始場景到結束場景的方式

廢話很少說直接開始

構建開始場景

首先，咱們有一個起始場景

<ConstraintSet android:id="@+id/start">
        <Constraint android:layout_width="wrap_content" android:id="@id/guide" android:orientation="horizontal" motion:layout_constraintGuide_percent="0.5" android:layout_height="wrap_content"/>

        <Constraint android:id="@id/h" android:layout_width="30dp" android:layout_height="40dp" motion:layout_constraintTop_toTopOf="parent" motion:layout_constraintStart_toStartOf="parent"/>

         <!--E ... R 代碼略-->

    </ConstraintSet>

複製代碼

構建結束場景

而後，咱們有一個結束場景

<ConstraintSet android:id="@id/end">
        <Constraint android:layout_width="wrap_content" android:id="@id/guide" android:orientation="horizontal" motion:layout_constraintGuide_percent="0.5" android:layout_height="wrap_content"/>

        <Constraint android:layout_width="30dp" android:layout_height="40dp" motion:layout_constraintHorizontal_chainStyle="packed" motion:layout_constraintTop_toTopOf="@id/guide" motion:layout_constraintBottom_toBottomOf="@id/guide" motion:layout_constraintEnd_toStartOf="@id/e1" android:id="@id/h" motion:layout_constraintStart_toStartOf="parent"/>

          <!--E ... R 代碼略-->
    </ConstraintSet>
複製代碼

構建過渡

最後，調整起始場景到結束場景的方式

<Transition motion:constraintSetStart="@+id/start" motion:constraintSetEnd="@+id/end" motion:duration="1200">

        <!-- H 滑動修改過渡狀態-->
        <OnSwipe motion:dragDirection="dragRight" motion:touchAnchorSide="right" motion:touchAnchorId="@id/h"/>

        <KeyFrameSet>
            <!-- 位置關鍵幀 使用 path 座標系 -->
            <KeyPosition motion:target="@id/h" motion:framePosition="85" motion:percentX="0.8" motion:percentY="-0.15" motion:keyPositionType="pathRelative"/>

            <KeyPosition motion:target="@id/e1" motion:framePosition="85" motion:percentX="0.9" motion:percentY="0.25" motion:keyPositionType="pathRelative"/>

            <KeyPosition motion:target="@id/n" motion:framePosition="40" motion:percentX="0.7" motion:percentY="-0.25" motion:keyPositionType="pathRelative"/>

            <!--對 C 同時設置兩個關鍵幀-->
            <KeyPosition motion:target="@id/c" motion:framePosition="85" motion:percentX="0.95" motion:percentY="0.25" motion:keyPositionType="pathRelative"/>

            <KeyPosition motion:target="@id/c" motion:framePosition="35" motion:percentX="0.35" motion:percentY="-0.05" motion:keyPositionType="pathRelative"/>

            <KeyPosition motion:target="@id/o" motion:framePosition="35" motion:percentX="0.05" motion:percentY="0.2" motion:keyPositionType="pathRelative"/>

            <KeyPosition motion:target="@id/o" motion:framePosition="85" motion:percentX="0.85" motion:percentY="0.2" motion:keyPositionType="pathRelative"/>

            <KeyPosition motion:target="@id/d" motion:framePosition="15" motion:transitionEasing="accelerate" motion:keyPositionType="deltaRelative" motion:percentY="0.15"/>


            <KeyPosition motion:target="@id/d" motion:framePosition="85" motion:transitionEasing="decelerate" motion:percentX="1.1" motion:percentY="-0.45" motion:keyPositionType="pathRelative"/>


            <!-- 在 90% 的時候到達終點-->
            <KeyPosition motion:target="@id/e2" motion:framePosition="90" motion:percentX="1" motion:percentY="0" motion:keyPositionType="pathRelative"/>


            <!-- 差值座標系 -->
            <KeyPosition motion:target="@id/e2" motion:framePosition="95" motion:percentX="1" motion:percentY="1.2" motion:keyPositionType="deltaRelative"/>



        </KeyFrameSet>
    </Transition>
複製代碼

因而咱們獲得了整個過渡過程

觸發過渡

固然你也能夠對目標加點事件來啓動過渡

<Transition motion:constraintSetStart="@+id/start" motion:constraintSetEnd="@+id/end" motion:duration="1200">
     
        <!-- R 切換起始/結束狀態-->
        <OnClick motion:clickAction="toggle" motion:target="@id/r"/>

        <!--左側 E 過渡到起始狀態-->
        <OnClick motion:clickAction="transitionToStart" motion:target="@id/e1"/>

        <!--右側 E 過渡到結束狀態-->
        <OnClick motion:clickAction="transitionToEnd" motion:target="@id/e2"/>
     
     
     <KeyFrameSet>
         <!-- 略 -->
     </KeyFrameSet>
</Transition>
複製代碼

源碼

去 github 查看源碼