(upbeat music)
- [Yuichi] In this screencast,
we'll walk through the Jetpack Compose animation APIs.
Let's start with the simplest animation API.
In this example,
we have a button that toggles
the value of a Boolean state.
The color of the box changes
based on this Boolean state.
We can animate this color change
by simply wrapping the color value
with the animateColorAsState function.
The return value is a state object,
so we can use a by declaration
to treat it like a normal value like this.
The animateAsState API is useful
for animating a single value based on a state change.
In addition of color,
there are variants for common types,
such as float, DB, and so on.
So what should we do if we want to animate
multiple values at the same time?
In this example,
we are changing the size of the box as well as the color.
For animating this, we use a transition.
A transition can be created
with the updateTransition function.
Each animation value can be declared
with an extension function on the transition object.
Use animateColor for the color
and animateDp for the size.
Now the two values animate simultaneously.
In addition, you can specify the transitionSpec parameter
to customize the animation behavior.
For example, let's use a weaker spring
when the box is getting larger.
Next, let's look at animating visibility changes.
In this example, the box appears and disappears
when we click the button.
Animating this change is as simple as
replacing the if statement
with the AnimatedVisibility composable.
AnimatedVisibility is useful
for animating appearance and disappearance.
We can also customize the animation behavior
by specifying parameters for enter and exit.
Next, Compose offers a simple way
to animate size changes of elements.
In this example, clicking on the button
toggles the sentence length,
either expanded in full
or truncated to two lines.
Let's see how we can animate this size change.
For that, all we have to do
is to add this animate content size modifier
to the container.
And now, the gray box animate its size
as its contents changes.
The Crossfade composable lets you animate changes
when you swap out portions of your UI.
Here, the button toggles
the state of the current scene,
showing either a text or an icon.
We use an enum class to represent the scenes
and toggle the current scene when you click the button.
Depending on its state,
a when statement switches the UI to be shown.
Now, we can animate this scene change
by wrapping this with Crossfade.
The current parameter
should be the state that changes the scenes.
Now, the scene change is animated with a crossfade effect.
That was an overview of Jetpack Compose animation APIs.
To learn more about Jetpack Compose,
check out the pathway links in the description below.
Thanks for watching.
(upbeat music)