使用 MotionLayout 简单构建过渡

栏目: IOS · Android · 发布时间: 6年前

内容简介：在开始之前请牢记，构建过渡，只需简单的三步。废话不多说直接开始首先，我们有一个起始场景

在开始之前请牢记，构建过渡，只需简单的三步。

创建起始场景 (StartScene)
创建结束场景 (EndScene)
调整起始场景到结束场景的方式

废话不多说直接开始

构建开始场景

首先，我们有一个起始场景

<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>
复制代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

统计思维：程序员数学之概率统计

Allen B.Downey / 张建锋、陈钢 / 人民邮电出版社 / 2013-5 / 29.00元

代码跑出来的概率统计问题；程序员的概率统计开心辞典；开放数据集，全代码攻略。现实工作中，人们常被要求用数据说话。可是，数据自己是不能说话的，只有对它进行可靠分析和深入挖掘才能找到有价值的信息。概率统计是数据分析的通用语言，是大数据时代预测未来的根基。站在时代浪尖上的程序员只有具备统计思维才能掌握数据分析的必杀技。本书正是一本概率统计方面的入门图书，但视角极为独特，折......一起来看看《统计思维：程序员数学之概率统计》这本书的介绍吧!

码农工具