[MUSIC PLAYING]
SEAN MCQUILLAN: In this episode of MAD Skills,
you'll learn how to add keyframes to an animation using
Motion Layout.
A keyframe lets you modify the path, alpha,
or any other attribute of a view as it
transitions from start to end.
If you're new to Motion Layout, be
sure to check out the last episode
to learn how to use constraint sets and transitions to build
the path from start to end.
In this video, we'll explore how to use keyframes
to modify a path by adding rotation and translation
to change the path of a single view
as it moves across the screen.
We're going to use the view pager integration
sample from the Motion Layout integrations
to explore keyframes.
Let's start by taking a look at how the project is structured.
In this sample, an animated header
is driven by the current position of a view pager.
In the layout, you have a view pager
on the bottom, a tab bar above it that
can select the current tab in the view pager,
and on the very top of the screen,
there's a Motion Layout that contains
the view that we'll animate as the view pager changes
its position.
Before we dive into the Motion Layout and keyframes,
let's look at how we can drive the Motion
Layout by the progress of the view pager.
Over in the activity, we've set up an on-page change listener
that listens for updates to the view pager position.
Every time the user scrolls the view pager, onPageScrolled
will be called with the current progress.
Then we just coerce the values from the view pager
into the range Motion Layout needs, and that's 0f to 1f.
And I got this formula by doing a bit of algebra
on paper, which is my recommendation whenever
you have to make a formula like this.
And then we can tell Motion Layout to snap
to the current position between 0f and 1f,
and it will immediately jump to that place.
Note, we don't ask it to animate.
Instead, we set the progress constantly
as the view pager swipes.
OK.
With that wired up, let's switch back
and see the existing constraint sets in our Motion Layout.
In the start constraints, the rocket is pushed to the left,
and the background is anchored to the bottom.
And in the end constraints, the rocket is pushed to the right,
and the background is anchored to the top.
If we preview it now, you'll see that both the background
and the rocket move along a linear path from start to end.
This is already a kind of fun animation.
But we can make it more interesting by using keyframes.
Keyframes let us modify the path,
from start to end, in a transition,
without adding more constraint sets.
You can use keyframes to modify any attribute as the view
animates, such as location, position, or even color
or alpha.
You can define a keyframe in the Motion
Editor using the Create Keyframes button in the Details
section.
It gives you a lot of options.
Let's get started by creating a key position.
A key position lets you add an extra point
on the path between start and end.
This lets you define curves, or even sharp corners,
in the path.
In this animation, we want to have the rocket settle
to the bottom of the screen when the middle tab is selected.
This happens to be at 50% progress,
since we only have three tabs.
In the key position dialog, select the ship emoji
as the view to modify, then set the position to 50.
Keyframes can be specified at positions between 0 and 100,
with 50 being halfway through the animation.
And we'll set the type to parentRelative.
This will define a position in the coordinate system
of the parent view.
Now, this is useful when moving a view
inside a containing view, like we're doing here.
The other options are good for when
you want to modify the path by adding
a curve or other embellishment.
We'll leave PercentX alone, and this
will cause Motion Layout to use whatever
the default X-value was calculated for frame position
50.
In PercentY, put 0.8, or 80%, down in the Motion Layout.
I'll click Add, and you can see that the preview is
updated to show the curve downward.
If we play the animation now, we'll
see our new path in action.
The rocket dips down before going back up again.
You can define multiple key positions in the same view.
At frame position 25, let's add a key position
to move the rocket to 0.6 parentRelative.
This will make it go up a little bit
before it comes down at the middle,
making the animation just a little bit more interesting.
Now, there's one more key position
to define in this animation.
We want that background to be relatively stationary
for the first half of the animation.
Right now it's moving linearly from start to end.
Let's add another key position, this time
selecting the background.
Then, at frame position 50, we'll
add a deltaRelative key position.
This is a position that's relative to the movement
of the view, which is great for changing
the speed of a linear motion like this.
By using a PercentY of 0.05, or 5%,
we can say that at frame position 50,
only move the background 5% of its total movement.
You can see a new line was added to the Transitions Details
section for the background, with the keyframe in it.
And if we scrub, you can see the background doesn't move much
in the first half of the animation,
but then it moves quickly after the midpoint.
With just a few key positions, we've
managed to make this animation quite a bit more interesting.
Next, we'll add a few keyframes that modify the rotation
to make this rocket take off.
Key frames let you modify any attribute, not just positions.
Let's add some rotations to the rocket that leads its path
changes slightly.
This will kind of give the illusion of thrust mechanics.
Add a new keyframe, but this time choose a key attribute.
A key attribute lets you modify attributes of a view
during the transition.
Select the space emoji view, and add an attribute
at position 10.
This is a bit before our keyframe at position 25.
Then specify an attribute of rotation in the dropdown.
And you can select the attribute for the keyframe
by clicking on the diamond in the Transition Details.
Let's modify the rotation to be 22, which will kind of make
the rocket point slightly up, because of the way
the emoji is structured.
Then add the rotation attribute to the landed position
at frame 50.
Add another key attribute on the space emoji,
specify the frame position of 50,
ensure it's modifying rotation, then select the new attribute
and update the rotation to 40, which will make
the rocket appear horizontal.
And if we preview the animation again,
you can see we've built a fairly dynamic animation
with just a few keyframes.
Key positions let us build a complex path,
and key attributes let us rotate the rocket
to give the illusion of acceleration.
For most animations, these are all the tools
you need to use Motion Layout.
In this video, you learned how to use
keyframes to build complex paths from start to end.
In the next video, you'll learn how to add multiple constraint
sets to a single Motion Layout.
Be sure to like and subscribe to the channel for notifications
as soon as new episodes are published.
To learn more about Motion Layout,
check out the codelab and Motion Layout integration samples
that these videos are based on in the links below.
[MUSIC PLAYING]