android - Android MotionLayout 运动交错
问题描述
我试图让我的视图使用 MotionLayout 进行动画处理,但希望某些约束在其他约束之前进行动画处理。我认为这是 Motion:staggered 属性的目的,但我不明白它是如何工作的,也没有任何地方成功工作的例子。随着 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>
解决方案
好的,所以在搞砸了很长时间之后,大量的试验和错误,并研究了这个版本更新中给出的方程式,这就是我想出的。
上面的链接文章给了我们一些有些令人困惑的方程,它们是
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)
。就我而言,由于我想在视图进入时有三个不同的时刻,所以我想让我viewDuration / totalDuration
的大约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" />
您会注意到我将持续时间增加到 1000 以更清楚地查看交错(一旦您确定了交错值,这里的持续时间可以更新,并且交错应该适当地缩放以适应时间范围)。
确定个人观点交错值:
所以现在我们需要弄清楚该放什么?在<Motion motion:motionStagger="?" />
这是数学变得非常复杂的地方。对于我们要设置交错的每个视图,它们应该按交错值排序。我们给出的等式(经过修改以使其比文章更具可读性)是:
animationStartTime = totalDuration * (stagger - stagger * ((staggerCurrentView - lowestStaggerValue)/(highestStaggerValue - lowestStaggerValue))
这肯定有点复杂,但我可以用我的例子来分解它。
因此,对于我的示例,我们已经讨论了如何让三个视图稍微均匀地错开(这就是我们选择 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
所以 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
所以 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
所以 Button 从 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>
最终状态需要另一个平行线ConstraintSet
。
推荐阅读
- reactjs - 子包中的翻译
- javascript - BigQuery JavaScript UDF:V8 实例的区域
- thymeleaf - 春天 webflow 和百里香叶
- c# - 从列表中使用 take 方法后的 removerange 方法
有意外行为 - java - 使用控制器映射弹簧升级到 Spring 4
- spring-boot - Spring Boot @ApplicationProperties 不使用测试配置文件中的值
- reactjs - React.js 与 setState 不准确
- android - 我收到这些错误,请指导我如何解决?
- javascript - 不要删除元素上的现有 css - Javascript
- excel - 根据vba中的相邻单元格值更改下拉列表项