[MUSIC PLAYING]
REBECCA FRANKS: Hi, everyone.
My name is Rebecca Franks, and I'm
an engineer on the Developer Relations team.
Does your app look super static, and you
want to learn how to make it super fancy, super fast
in Compose?
Let's learn how to add some movement
to our apps in a few minutes.
Let's go.
If you're hiding and showing content on screen,
just like we are doing here in the Jetchat app,
you can see that the timestamp is visible and invisible
on click.
You might not like how jarring this looks to your users.
Instant changes in UI states are painful to experience.
So let's make this better.
Taking a look at how the text is shown on screen,
we can see that it is using just a simple if statement
to show or hide the timestamp.
All we need to do to improve this
is to wrap our changing visible states in an AnimatedVisibility
composable, and this will magically
transform how state changes are shown on screen.
Let's take a look.
That looks way better, don't you agree?
AnimatedVisibility also has a range
of different customization options
that I recommend reading about in the docs.
Next up, this Now in Android screen
is showing more text on click of the item card.
But the size change looks very static
and doesn't transition smoothly between the two states.
Taking a look at the code that powers this,
we can see that we toggle the expanded states on click
of the text by changing the max lines that
will be drawn on screen.
We can easily fix this jumping state with a built-in modifier.
Simply add animateContentSize to your modifier chain
to get an instantly smooth change.
And this looks a lot better already.
The change in sizes is way smoother.
But what if we wanted it to be a little bit more playful, maybe
with a little bit more bounce?
Having a look at the code again, we
can change the animateContentSize modifier
to take in an animation spec.
Most animation APIs offer the ability
to set an animation spec that we can use to define
how the animation happens.
In this case, if we're using a spring spec
and setting the stiffness to low and adding
slight amounts of bounce, we can see
that our UI will now look a little bit more playful
with this added bounce.
Ready for another one?
In Crane, the contents underneath the Fly, Sleep,
and Eat tabs is switching between completely different
composables without any smooth transitions
between the content.
These changes could definitely do
with a little bit more magic.
Taking a look at the code that decides what section to show
in the purple area, we can see that there is a conditional use
to determine which composable to display in that section.
Using a when with different composables
is a sign that you can probably use animated content
to animate between these different composables.
So let's wrap this conditional in AnimatedContent
composable, providing the target states that
will be transitioned to.
Using the target states inside the AnimatedContent composable,
we can then switch our content based on that target type.
Instantly, our transitions between
the different composables is now fading and scaling
between each other, which looks a lot better than before.
But we can make this even more interesting.
OK.
So back to the code.
By changing the transition spec on AnimatedContent,
we can customize how the new composable coming on screen
will enter the screen and how the old composable will
exit the screen.
In this example, we are using slideIntoContainer
to slide the content towards an upward direction
and slideOutOfContainer in a downwards direction.
We have also customized the animation spec
to set a custom duration and easing function.
So let's take another look at what this looks like.
How does that look?
Our new content slides in from the bottom of the screen,
and the old composable slides out from the bottom.
Of course, this is customizable.
Check out the different enter and exit transitions
available to you in the docs.
Onto our next animation example.
We have the progress bar in the JITServer app.
And when you navigate between the different pages
of your app, the progress bar shows your progress remaining
of the whole survey.
At the moment, though, this looks pretty bland.
Taking a look at the code, we can
see that the progress calculation
is using state information to determine how far
along in the survey you are.
In this example, as the user progresses along the survey,
the question index will increase.
We can switch this variable to use one of the animate
as state functions.
In this case, we are using animateFloatAsState.
These functions automatically perform the animation
when the state of your input variable changes.
So by passing this animated progress to our linear progress
indicator, we will see the progress animates
between the first state it was passed
and the second state that it is using.
It is worth noting that we've used
the value on a specific composable parameter.
But we could also use the animated progress
to change a value anywhere in the composable,
such as the modifier's parameters.
So let's take a look at the small change in action.
Now the progress ball animates between the different survey
pages and looks much neater.
Now, say we wanted to animate something repeatedly,
like this custom rainbow border.
We would like the colors to rotate around
the outline of the image.
In order to draw this, we have an image composable with
modifier .drawBehind that draws the rainbow gradient brush.
This circle is what we will be animating.
Now, to animate the changes, first, we
create an infinite transition using
rememberInfiniteTransition.
And we define a single float, rotationAnimation,
that we want to animate from 0 to 360 degrees.
We supply it with an infinite repeatable animation
spec that is going to animate between these two
values in 1,000 milliseconds.
So we've defined all the variables.
But we aren't using the rotationAnimation variable
anywhere.
All we need to do to animate this
now is to use the rotationAnimation value
and call rotate in our drawBehind function.
This will rotate everything that we are drawing on screen.
Compose takes care of updating the rotationAnimation variable
for us and will automatically trigger
a redraw as the variables change over time,
creating the animation on screen.
Now take a look at that rotating rainbow gradient.
Adding a simple rotationAnimation
makes the profile pic stand out way more.
And that's it.
Hopefully you've seen how quickly you can add animations
to your Compose apps.
For more information on animations in Compose,
check out the following links.
,
Right then.
I'm off to go move some more pixels around on a screen.
See you.
[MUSIC PLAYING]