[VOICES OVERLAPPING THE WORD "ANIMATION"]
SPEAKER 1: If you don't already know this about me,
it's worth noting--
I love animations.
They're essential in an app in order
to create a smooth and delightful user experience.
One of my favorite things about Jetpack Compose
is that it provides powerful and extensible APIs
to make it easy to implement various animations
in your apps UI.
Many Compose animation APIs are available
as composable functions, just like layouts or other UI
elements, and they are backed by lower-level APIs built
with Kotlin coding suspend functions.
To understand more about the beauty and power
behind an animation, I spoke with my friend
Doris Liu, the engineer on the Compose team
who builds all of the animations you can find there.
DORIS LIU: Prior to Jetpack Compose,
we noticed that the developers were fairly intimidated
by building animations.
They would first build everything
in their app except the animations,
and then later on they would go back
and add animations when they have time or feel comfortable.
It's such a pity, because we think
animations are so essential to the end user experience.
So part of the motivation for Compose animation
is to provide a set of animation APIs
that are simple enough so that developers
feel comfortable building animations
in the v1 of their app.
SPEAKER 1: Let's talk about what an animation is.
They're an essential part of the mobile app experience.
You start your phone and it reacts.
Animations use motion design to inform the user
by highlighting relationships between elements,
action availability, and action outcomes.
Motion celebrates moments in user journeys,
adds character to common interactions,
and can express a brand style.
Doris mentioned that developers were
hesitant to put in the work to build animations
into the v1 of their apps, so I asked
if perhaps that's because animation design wasn't always
easy or clear.
DORIS LIU: When Android first came out about 15 years ago,
the concept of mobile phone was relatively new to all of us.
Our primary design reference for UI is desktop and web,
but as we get more and more comfortable
with mobile devices and the touch interactions,
users started to demand more subtle interactions as a way
to get a delightful experience as they
navigate through the apps.
Around the time of Ice Cream Sandwich,
the Android team has really focused
on making the platform built purposely for mobile, including
a new animation system built earlier that year.
And then in Jelly Bean with the Project Butter,
we focused on reducing the latency
and providing a guarantee for frame rate
so that any touch interaction would feel super responsive.
Both of these technology advancements
were critical in delivering animation capabilities
to delight our users.
SPEAKER 1: Doris and I then went back
to talking about animations before Compose.
For example, when animating views, in the past,
you had to first update the final position of the animation
and then call start on the animation.
But as Nick Butcher pointed out in a talk from 2019,
developers wanted to use the animateToFinalPosition
API that does a combination of both for you.
NICK BUTCHER: But for me, the real power
comes when, instead of using start,
you use this animateToFinalPosition API.
What this does is if the animation isn't started,
it will just kick it off.
But crucially, if an animation is running,
then it will retarget it, and this
will do that magic of maintaining the velocity for us
and updating the target body.
DORIS LIU: Yeah, that hack was super impactful for me
because it demonstrated how pleasant and convenient
it can be to have APIs that anticipate the common use cases
and then combine the multistep boilerplate code into one
simple animation call.
It made me start thinking about API design
from a use case-oriented perspective.
SPEAKER 1: A beautiful work of art
is a series of layers of paint.
Similarly, an animation is a series
of motions that come together in a beautiful, expressive way.
And the paintbrush that we use to build an animation--
Jetpack Compose.
OK, Doris, tell me about the first composable you wrote.
DORIS LIU: Oh, without doubt that is animatedVisibility.
It is probably the most commonly used composables
for animating appearance and disappearance of UI elements.
Actually, at around that same time,
I was also working on this other concept
called animateContentSize.
It was this one-liner feature that
allows the UI to dynamically resize itself
when the content changes.
We released animateContentSize first before animatedVisibility
to get feedback on this new concept of reactive resizing
animation.
It was received overwhelmingly well.
Developers really loved it.
SPEAKER 1: So this feedback from developers really
helped shape the overall philosophy
of animations in Compose.
DORIS LIU: Yeah, definitely.
For me, collaborating with the community
is really the essential part of my job.
And I mainly use Slack channel and Twitter
as my source of feedback to see how experimental features are
received or whether there's any other features that developers
are asking.
Just seeing what people build on an ongoing basis
kind of gives us a sense of what is a common use case?
As I mentioned earlier, we want to make the common use
case incredibly easy, but that does involve understanding
what is a common use case.
And then also, when we notice when people struggle
with a particular animation feature,
we would then go back to the drawing board
and investigate what was making the feature difficult to adopt,
and refine the design to improve upon those features.
So hearing from the developers around the world
is definitely super useful in terms of evolving the animation
system.
SPEAKER 1: Thank you so much for the time, Doris.
New animations in Compose fill me with emotion,
so we'd better get from moving adding them to our apps.