使用 MotionLayout 简单构建过渡

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

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

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

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

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

查看所有标签

猜你喜欢:

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

码农书籍

网络、群体与市场

大卫·伊斯利(David Esley)、乔恩·克莱因伯格(Jon Kleinberg) / 李晓明、王卫红、杨韫利 / 清华大学出版社 / 2011-10-1 / CNY 69.00

过去十年来，现代社会中复杂的连通性向公众展现出与日俱增的魅力。这种连通性在许多方面都有体现并发挥着强大的作用，包括互联网的快速成长、全球通信的便捷，以及新闻与信息（及传染病与金融危机）以惊人的速度与强度传播的能力。这种现象涉及网络、动机和人们的聚合行为。网络将人们的行为联系起来，使得每个人的决定可能对他人产生微妙的后果。本书是本科生的入门教材，同时也适合希望进入相关领域的高层次读者。它从交......一起来看看《网络、群体与市场》这本书的介绍吧!

码农工具

JSON 在线解析

在线 JSON 格式化工具

RGB CMYK 转换工具

RGB CMYK 互转工具