[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]
