问题
I am trying to get my views to animate using MotionLayout but want certain Constraints to animate in before others. I think this was the purpose of the motion:staggered property for Transition but I don't understand how that works and there are no examples of it successfully working anywhere. With updated versions of MotionLayout it seems we should have motion:motionStagger for individual Constraints but again I cannot seem to get it to stagger as desired. Only documentation I could find was here explaining the Enhanced Staggered API but I don't understand how to use it.
I have added my MotionLayout code below. For reference, I am using the 2.0.0-beta3' version of 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>
回答1:
Ok, so after messing around with this for a long time, a lot of trial and error, and studying the equations given in this release update, this is what I have come up with.
The linked article above gives us some somewhat confusing equations which are
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)))
DETERMINING TRANSITION STAGGER VALUE:
To determine what you want the overall stagger to be, think about the number of views you are trying to stagger.
The article I linked above states that the viewDuration = totalDuration*(1 - stagger) so we can rearrange this equation to become stagger = 1 - (viewDuration / totalDuration). In my case, since I want to have three different moments when views enter, I want to have my viewDuration / totalDuration to be about 1/3. To simplify the math, I have chosen to have my stagger as 0.6, making each viewDuration 400. So my transition code looks like the following
<Transition
motion:constraintSetEnd="@+id/end"
motion:constraintSetStart="@+id/start"
motion:duration="1000"
motion:motionInterpolator="easeInOut"
motion:staggered="0.6" />
You'll notice that I increased the duration to 1000 to see the stagger more clearly (Once you figure out your stagger values, the duration here can be updated and the stagger should scale appropriately to fit within the time frame).
DETERMINING INDIVIDUAL VIEWS STAGGER VALUES:
So now we need to figure out what to put as the ? in <Motion motion:motionStagger="?" />
This is where the math gets very complicated. For each view that we are going to set a stagger on, they should be ordered by stagger value. The equation (modified to make slightly more readable than the article) we are given is:
animationStartTime = totalDuration * (stagger - stagger * ((staggerCurrentView - lowestStaggerValue)/(highestStaggerValue - lowestStaggerValue))
This is definitely a little complicated but I can break it down with my example.
So for my example we already talked about how I have three views that I want to stagger somewhat evenly (which is why we chose a stagger value of 0.6). I know based on the inverse structure of the equation below that the view with the highest motionStagger value will animate in first.
Let's say we have three views, an ImageView that I want to come in first, a TextView that I want to come in second, and a Button that I want to come in third. So I will assign the ImageView a motionStagger value of 3, the TextView a motionStagger value of 2, and the TextView a motionStagger value of 1. Let's do the calculations here:
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
So the ImageView starts animating at 0 and animates for 400ms (as shown in the above section). Now let's calculate for the 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
So the TextView starts animating at 300 and animates for 400ms.
Finally, let's calculate the start time for the 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
So the Button starts animating at 600 and animates for 400ms.
These values can be shifted and staggered based on what you chose as your motionStagger values. I tried to make this as simple as possible for explanation sake but it can get very complicated depending on what you are trying to accomplish. Here is what the final code will look like for the example I outlined above.
<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>
Where you will need another parallel ConstraintSet for the end state.
回答2:
The actual math of staggered can be a little confusing but in practice
Staggered
Each view that is animating is given a Stager value (app:motionStagger) By default the stagger value of a view is the Manhattan distance from the top most view in the list of views. You can manually set the value by the attribute
This assigns a floating point stagger value to each view tagged with motionStagger (Views not tagged are ignored). The view with the lowest floating point value (V0) is started first. The view with the highest floating point value (Vn) is started last.
- For any view of stagger value S(Vi)
- With the transition stagger value of TS (from 0.0 - 1.0)
- The duration of the animation is duration
- The views animation duration DS = duration * (1 -TS)
- Call the stagger fraction SFi = (S(Vi) - S(V0)) / (S(Vn) - S(V0))
- The view starts animating at: (duration-DS) * SFi
This math may be confusing. So a practical example If I have 3 views View1, View2, View3 which I set motionStagger to 2, 5 and 7, respectively and the animation duration as set to 5 seconds. When I set the transitions stagger to 0.4 the will progress as follows:
The animation duration is 3.0 sec = 5 * (1- 0.4)
View1 stagger fraction = 0 = (2-2)/(7-2)
View1 starts at 0.0 sec
View1 end at 3.0 sec (0.0 + 3.0)
View2 stagger fraction = 0.6 = (5-2)/(7-2)
View2 starts at 1.2 sec (5.0-3.0) * 0.6
View2 ends at 4.2 sec 1.2 + 3.0
View3 stagger fraction = 1
View3 starts at 2.0 sec (5.0 - 3.0) * 1
View3 ends at 5.0 sec
来源：https://stackoverflow.com/questions/59537546/android-motionlayout-motionstaggered