[MUSIC PLAYING]
SEAN MCQUILLAN: In this episode of "Mad Skills,"
you'll learn how to add multiple constraint
sets to the same MotionLayout.
MotionLayout isn't limited to only two constraint sets
per layout, such as the start and end.
You can define as many constraints
as you would like to build the animation you need.
And you might do this if you're representing multiple states
to the user.
For example, in a payment app, you
might have a state for transaction not started,
transaction in progress, and transaction complete.
You could represent each of these visual states using
a constraint set.
Then you can define a transition between any of the states.
MotionLayout will keep track of which state it's in
and choose the correct transition
to get to the destination when you ask it to animate.
If you're new to MotionLayout, be
sure to check out the previous episodes first
to learn the basics of MotionLayout.
Let's revisit the entrance animation from the first video
again and break it into multiple constraint sets.
You may want to do this when your designer has
a complex long-running animation, like we do here.
To get started, I've removed all constraint sets and transitions
from the motion scene, and we'll add them
and explore how to set up multiple constraint sets.
Create a new constraint set by clicking the Create Constraints
Set button and giving it a name.
We'll call this one Initial.
You can leave it based on the MotionLayout for now.
For this video, I'm going to skip over creating
the constraints and keyframes.
Check out the previous videos to learn how to do that.
And scrolling background is now constrained.
Let's create another constraint set called Empty that
just fades in the background.
Click Create Constraint and name it Empty.
And again, I'm going to cut through setting
the constraints so we can focus on adding transitions.
There's a button on the top for creating a transition that
looks like an arrow.
When you click it, you can create a transition
between constraints sets.
A transition from initial to empty is exactly what we want.
To make the transition automatically play, change it
to Animate to End and set the duration to 200,
per our designer.
You can do that by selecting the Transition in the Overview
and editing the attributes on the right.
For the next part of the animation,
create a new constraint set, this one called First Half.
And it will deal with setting the stage
for the bulk of our animation.
To save time, you can derive the constraints for First Half
from Empty.
Do that by setting the Based On dropdown to Empty.
When you do this, the default constraints
will come from Empty instead of the layout itself.
And you can see the constraints are
derived in the overview with the arrow on the bottom.
Now, we can add a transition from Empty to First Half.
Click the Add Transition button to make sure it's
set to Animate to End.
When you chain animations that are
set to animate to end like this, they'll
automatically play one after another
as if they were a single animation.
And it's added to the overview.
Let's set the constraints and keyframes quickly
with another cut.
And continuing quickly, we'll add
the rest of the constraint sets and transition the same way.
Now, working with our designer, we
can review each part of this animation, tweaking
the constraints sets.
Because we set each constraint set
to derive from the previous, which you can see here
with the arrows on the bottom, if we
make a change to the constraint set
in the middle of the animation, it'll carry through the rest
without having to edit every single constraint set.
You can see the derived constraints in action
when we select Second Half.
The text and subtext are constrained
in middle animations, while the rest of the views
are constrained in second half.
It's worth noting that constraint sets are
more expensive than keyframes.
It's OK to make a new constraint set
every few milliseconds in a long-running animation
like this.
But you should avoid trying to make a new constraint set
every few frames.
Using multiple constraint sets let us break apart
this complex animation to work more easily with our designer.
They're also useful when you have different states that
can be reached by the user.
By using multiple constraint sets in MotionLayout,
you can build very complex interactions
using only MotionLayout.
In this video, you learned how to define multiple constraint
sets in the same MotionLayout.
In the next video, you'll learn how
to build a collapsing header to show a real-world integration
of MotionLayout.
Be sure to like and subscribe to the channel for notifications
as soon as new episodes are published.
To learn more about MotionLayout,
check out the code lab and MotionLayout integration
samples that these videos are based on in the links below.