使用 MotionLayout 简单构建过渡

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

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

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

创建起始场景 (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>
复制代码

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

查看所有标签

猜你喜欢:

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

码农书籍

数据挖掘中的新方法：支持向量机

邓乃扬、田英杰 / 科学出版社 / 2004-6-10 / 53.00元

支持向量机是数据挖掘中的一个新方法。支持向量机能非常成功地处理回归问题(时间序列分析)和模式识别(分类问题、判别分析)等诸多问题，并可推广于预测和综合评价等领域，因此可应用于理科、工科和管理等多种学科。目前国际上支持向量机在理论研究和实际应用两方面都正处于飞速发展阶段。希望本书能促进它在我国的普及与提高。本书对象既包括关心理论的研究工作者，也包括关心应用的实际工作者。对于有关领域的具有高等......一起来看看《数据挖掘中的新方法：支持向量机》这本书的介绍吧!

码农工具