那些遇到过的问题

Android MotionLayout 运动交错

kja*_*on2 2 layout animation android motion

我试图让我的视图使用 MotionLayout 进行动画处理，但希望某些约束在其他约束之前进行动画处理。我认为这是 Motion:staggered property for Transition 的目的，但我不明白它是如何工作的，也没有它在任何地方成功工作的例子。使用 MotionLayout 的更新版本，似乎我们应该为单个约束设置 motion:motionStagger 但我似乎无法让它按需要交错。我在这里只能找到解释增强型交错 API 的文档，但我不明白如何使用它。

我在下面添加了我的 MotionLayout 代码。作为参考，我使用的2.0.0-beta3'是 ConstraintLayout的版本

<?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:constraintSetEnd="@+id/end"
    motion:constraintSetStart="@+id/start"
    motion:duration="300"
    motion:motionInterpolator="easeInOut"
    motion:staggered="0.4" />

<ConstraintSet android:id="@+id/start">
    <Constraint android:id="@id/translucentOverlay">
        <Layout
            android:layout_width="5dp"
            android:layout_height="5dp"
            motion:layout_constraintBottom_toBottomOf="@id/imageBorder"
            motion:layout_constraintEnd_toEndOf="@id/imageBorder"
            motion:layout_constraintStart_toStartOf="@id/imageBorder"
            motion:layout_constraintTop_toTopOf="@id/imageBorder" />
        <CustomAttribute
            motion:attributeName="alpha"
            motion:customFloatValue="0.0" />
        <Motion motion:motionStagger="2" />
    </Constraint>

    <Constraint android:id="@id/imageBorder">
        <Layout
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:layout_marginEnd="8dp"
            android:layout_marginBottom="8dp"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintTop_toTopOf="parent" />
        <CustomAttribute
            motion:attributeName="crossfade"
            motion:customFloatValue="0" />
        <Motion motion:motionStagger="2" />
    </Constraint>

    <Constraint android:id="@id/imageBackground">
        <Layout
            android:layout_width="32dp"
            android:layout_height="32dp"
            motion:layout_constraintBottom_toBottomOf="@id/imageBorder"
            motion:layout_constraintEnd_toEndOf="@id/imageBorder"
            motion:layout_constraintStart_toStartOf="@id/imageBorder"
            motion:layout_constraintTop_toTopOf="@id/imageBorder" />
        <Motion motion:motionStagger="2" />
    </Constraint>

    <Constraint android:id="@id/profileInitialText">
        <Layout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            motion:layout_constraintBottom_toBottomOf="@id/imageBackground"
            motion:layout_constraintEnd_toEndOf="@id/imageBackground"
            motion:layout_constraintStart_toStartOf="@id/imageBackground"
            motion:layout_constraintTop_toTopOf="@id/imageBackground" />
        <CustomAttribute
            motion:attributeName="alpha"
            motion:customFloatValue="1.0" />
        <Motion motion:motionStagger="2" />
    </Constraint>

    <Constraint android:id="@id/profileImage">
        <Layout
            android:layout_width="32dp"
            android:layout_height="32dp"
            motion:layout_constraintBottom_toBottomOf="@id/imageBackground"
            motion:layout_constraintEnd_toEndOf="@id/imageBackground"
            motion:layout_constraintStart_toStartOf="@id/imageBackground"
            motion:layout_constraintTop_toTopOf="@id/imageBackground" />
        <Motion motion:motionStagger="2" />
    </Constraint>

    <Constraint android:id="@id/name">
        <Layout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="128dp"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent" />
        <CustomAttribute
            motion:attributeName="alpha"
            motion:customFloatValue="0.0" />
        <Motion motion:motionStagger="5" />
    </Constraint>

    <Constraint android:id="@id/description">
        <Layout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toBottomOf="@id/name" />
        <CustomAttribute
            motion:attributeName="alpha"
            motion:customFloatValue="0.0" />
        <Motion motion:motionStagger="5" />
    </Constraint>
</ConstraintSet>

<ConstraintSet android:id="@+id/end">
    <Constraint android:id="@id/translucentOverlay">
        <Layout
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
        <CustomAttribute
            motion:attributeName="alpha"
            motion:customFloatValue="1.0" />
        <Motion motion:motionStagger="2" />
    </Constraint>

    <Constraint android:id="@id/imageBorder">
        <Layout
            android:layout_width="88dp"
            android:layout_height="88dp"
            motion:layout_constraintBottom_toBottomOf="@id/imageBackground"
            motion:layout_constraintEnd_toEndOf="@id/imageBackground"
            motion:layout_constraintStart_toStartOf="@id/imageBackground"
            motion:layout_constraintTop_toTopOf="@id/imageBackground" />
        <CustomAttribute
            motion:attributeName="crossfade"
            motion:customFloatValue="1" />
        <Motion motion:motionStagger="2" />
    </Constraint>

    <Constraint android:id="@id/imageBackground">
        <Layout
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:layout_marginTop="64dp"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent" />
        <Motion motion:motionStagger="2" />
    </Constraint>

    <Constraint android:id="@id/profileInitialText">
        <Layout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            motion:layout_constraintBottom_toBottomOf="@id/imageBackground"
            motion:layout_constraintEnd_toEndOf="@id/imageBackground"
            motion:layout_constraintStart_toStartOf="@id/imageBackground"
            motion:layout_constraintTop_toTopOf="@id/imageBackground" />
        <Motion motion:motionStagger="2" />
        <CustomAttribute
            motion:attributeName="alpha"
            motion:customFloatValue="0.0" />
    </Constraint>
    <Constraint android:id="@id/profileImage">
        <Layout
            android:layout_width="70dp"
            android:layout_height="70dp"
            motion:layout_constraintBottom_toBottomOf="@id/imageBackground"
            motion:layout_constraintEnd_toEndOf="@id/imageBackground"
            motion:layout_constraintStart_toStartOf="@id/imageBackground"
            motion:layout_constraintTop_toTopOf="@id/imageBackground" />
        <Motion motion:motionStagger="2" />
    </Constraint>

    <Constraint android:id="@id/name">
        <Layout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toBottomOf="@id/profileImage" />
        <CustomAttribute
            motion:attributeName="alpha"
            motion:customFloatValue="1.0" />
        <Motion motion:motionStagger="5" />
    </Constraint>

    <Constraint android:id="@id/description">
        <Layout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginTop="16dp"
            android:layout_marginEnd="16dp"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toBottomOf="@id/name" />
        <CustomAttribute
            motion:attributeName="alpha"
            motion:customFloatValue="1.0" />
        <Motion motion:motionStagger="5" />
    </Constraint>
</ConstraintSet>
Run Code Online (Sandbox Code Playgroud)

kja*_*on2 5

好的，所以在搞了很长一段时间之后，大量的反复试验，并研究了此版本更新中给出的方程，这就是我想出的。

上面链接的文章给了我们一些有点令人困惑的方程式，它们是

Let The motionStagger value is S(Vi) The overall stagger value is stagger (from 0.0 - 1.0) The duration of the animation is duration The views animation duration = duration * (1 - stagger) The view starts animating at duration * (stagger - stagger * (S(Vi) - S(V0)) / (S(Vn) - S(V0)))

确定过渡交错值：

要确定您希望整体错开是什么，请考虑您试图错开的视图数量。我上面链接的文章指出，viewDuration = totalDuration*(1 - stagger)所以我们可以重新排列这个方程成为stagger = 1 - (viewDuration / totalDuration)。就我而言，由于我想在视图进入时有三个不同的时刻，所以我想让 my viewDuration / totalDurationto be about 1/3。为了简化数学，我选择了交错为0.6，使每个 viewDuration 为 400。所以我的转换代码如下所示

<Transition
    motion:constraintSetEnd="@+id/end"
    motion:constraintSetStart="@+id/start"
    motion:duration="1000"
    motion:motionInterpolator="easeInOut"
    motion:staggered="0.6" />
Run Code Online (Sandbox Code Playgroud)

您会注意到我将持续时间增加到 1000 以更清楚地看到交错（一旦您确定了交错值，此处的持续时间可以更新，并且交错应适当缩放以适应时间范围）。

确定单个视图交错值：

所以现在我们需要弄清楚把什么作为 ? 在<Motion motion:motionStagger="?" />

这是数学变得非常复杂的地方。对于我们要设置交错的每个视图，它们应该按交错值排序。我们给出的等式（经过修改以使其比文章更具可读性）是：

animationStartTime = totalDuration * (stagger - stagger * ((staggerCurrentView - lowestStaggerValue)/(highestStaggerValue - lowestStaggerValue))
Run Code Online (Sandbox Code Playgroud)

这绝对有点复杂，但我可以用我的例子来分解它。

因此，对于我的示例，我们已经讨论了如何将三个视图均匀交错（这就是我们选择交错值 0.6 的原因）。我知道基于下面等式的逆结构，具有最高motionStagger值的视图将首先动画化。

假设我们有三个视图，一个我想第一个进入的 ImageView，一个我想进入第二个的 TextView，一个我想进入第三个的 Button。所以我将给 ImageView 分配一个 motionStagger 值 3，TextView 一个 motionStagger 值 2，TextView 一个 motionStagger 值 1。让我们在这里做计算：

Stagger value = 0.6
motionStaggerValues = 3 (for ImageView), 2 (for TextView), and 1(for Button) 
ImageView animationStartTime = 1000 * (0.6 - 0.6 * ((3-1)/(3-1)))
    = 1000 * (0.6 - 0.6 * (1)) = 1000 * 0 = 0
Run Code Online (Sandbox Code Playgroud)

因此 ImageView 从 0 开始动画并动画 400 毫秒（如上一节所示）。现在让我们计算 TextView

Stagger value = 0.6
motionStaggerValues = 3 (for ImageView), 2 (for TextView), and 1(for Button) 
TextView animationStartTime = 1000 * (0.6 - 0.6 * ((2-1)/(3-1)))
    = 1000 * (0.6 - 0.6 * (1/2)) = 1000 * 0.3 = 300
Run Code Online (Sandbox Code Playgroud)

所以 TextView 从 300 开始动画并动画 400 毫秒。

最后，让我们计算 Button 的开始时间：

Stagger value = 0.6
motionStaggerValues = 3 (for ImageView), 2 (for TextView), and 1(for Button) 
TextView animationStartTime = 1000 * (0.6 - 0.6 * ((1-1)/(3-1)))
    = 1000 * (0.6 - 0.6 * (0)) = 1000 * 0.6 = 600
Run Code Online (Sandbox Code Playgroud)

所以按钮从 600 开始动画并动画 400 毫秒。

这些值可以根据您选择的 motionStagger 值进行移动和交错。为了解释起见，我试图使这尽可能简单，但根据您要完成的任务，它可能会变得非常复杂。下面是我上面概述的示例的最终代码。

<ConstraintSet android:id="@+id/start">
    <Constraint android:id="@id/imageView">
        ...
        <Motion motion:motionStagger="3" />
    </Constraint>

    <Constraint android:id="@id/textView">
        ...
        <Motion motion:motionStagger="2" />
    </Constraint>

    <Constraint android:id="@id/button">
        ...
        <Motion motion:motionStagger="1" />
    </Constraint>
</ConstraintSet>
Run Code Online (Sandbox Code Playgroud)

ConstraintSet最终状态需要另一个平行线。

归档时间：

查看次数：

2271 次

最近记录：

4 年，4 月 前
相关归档
带有Google Play服务的Android Studio 96
由于构建路径不完整,因此未构建项目 64
android listview项目高度 51
ViewHolder有什么好处？ 39
Android WebView无法加载URL 36
JScrollpane使用可变大小的内容调整大小 12
如何在Android中使用<layout>标签 8
我可以直接从routes.rb渲染布局,没有控制器吗？ 7
自定义Android评级栏拉伸图像 6
使用 javascript 暂停 CSS 动画并跳转到动画中的特定位置 5
难疑归档
基于表单的网站身份验证的权威指南 5311
为什么Android模拟器这么慢？我们如何加快Android模拟器的速度？ 3356
如何制作一系列功能装饰器？ 2647
什么是__init__.py？ 2074
从HTML页面重定向 1523
检索HTML元素的位置(X,Y) 1418
如何在HTTP POST请求中发送参数？ 1396
同步检查Node.js中是否存在文件/目录 1113
#Hibernate hbm2ddl.auto配置的可能值是什么,它们做了什么 1046
什么是"Linting"？ 1044