Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
In the real world, things don’t move at constant speed. They accelerate and decelerate, and the rate they change their speed depend on their mass and the forces being applied. In order to create animations that feel natural and pleasant, we want to apply similar rules without sacrificing simplicity and elegance.
Resources
Use the Property Animation Guide, on the Android Developer site to see what characteristics of animations can be configured.
-
0:00
In the real world things don't move at a constant speed,
-
0:03
they accelerate and decelerate.
-
0:05
And the rate they change their speed depends on their mass and
-
0:08
the forces being applied.
-
0:10
In order to create animations that feel natural and pleasant want to apply similar
-
0:14
rules without sacrificing simplicity and elegance.
-
0:17
In this video, we'll look at the tools that Android gives us to fine tune
-
0:22
the timing of our animations.
-
0:23
In Android an interpolator defines the rate of change of an animation.
-
0:28
Linear interpolator instructs the property value to change at a constant speed,
-
0:33
this is also referred to as linear change because you can plot it as
-
0:36
a straight line.
-
0:37
AccelerateDecelerateInterprolator is the default interpolator it's used if you
-
0:42
don't set the interpreter value of an animation.
-
0:44
As its name indicates the change of property value first gets fast and
-
0:48
faster and then slows down.
-
0:50
If necessary you can define custom interpolators by extending the time
-
0:54
interpolator class.
-
0:56
Since Lollipop, we can define the timing of an interpolator in terms of a busy
-
1:00
a curve, this gives us a convenient way to fine tune our animations.
-
1:04
It's important to note that the interpolator can not only be applied on
-
1:08
the spatial movements of an object, but also any property of the object.
-
1:11
For example the alpha value which we know controls how transparent or opaque it is.
-
1:17
So let's get back to our music album animation.
-
1:19
If you look closely you'll notice that there is a slight pause after the title
-
1:23
panel is expanded.
-
1:25
That's happening because we haven't set any interpolators for animations, and
-
1:29
by default Android will use AccelerateDecelerateInterpolator.
-
1:33
This causes the title panel to slow down its movement when the track panel is about
-
1:37
to show.
-
1:38
Let's remove the pause and make the expansion of the two panel smoother.
-
1:42
We just need to make the expansion of the title panel accelerate and
-
1:46
then the track panel decelerate.
-
1:48
So back in our code, let's add a new line after our animatorTitle and
-
1:53
say animatorTitle.setIterpolater, and here we can create one of the interpolators
-
1:59
provided by Android, so we'll say new AccelerateInterpolator.
-
2:04
We can do the same thing for animatorTrack down here, so I'll add a line again and
-
2:08
say animatorTrack again .setInterpolator and this time we want it to decelerate so
-
2:13
that it slows down.
-
2:15
So now let's run the app, click into the detail view and if we click on it,
-
2:19
there's a little bit smoother you can probably see a difference.
-
2:23
We can actually make that difference stand out a little more by playing with a few
-
2:27
additional parameters.
-
2:28
So there are other parameters of animation that you can configure for
-
2:31
example the duration of the animation, and
-
2:34
the time to wait before starting an animation both in milliseconds.
-
2:37
They all can be used to precisely control the timing of your animations.
-
2:41
Let's try a few to control the duration of our animation and
-
2:45
introduce a slight delay at the start.
-
2:47
So first we want to pick our animatorTitle and we'll use the setDuration property,
-
2:52
and this parameter is in milliseconds,
-
2:54
so if we do 1000 milliseconds it will equal one second.
-
2:58
Let's do the same thing for
-
2:59
the animatorTrick we'll set the duration to 1000 milliseconds as well.
-
3:05
Finally we can set a delay and we'll do it on the first one the animatorTitle,
-
3:09
set the start delay to 1000 milliseconds.
-
3:13
And this means that the animation will start after one second.
-
3:17
So now if we run the app we'll be able to see more clearly when things accelerate
-
3:21
and decelerate.
-
3:24
Okay, so click on the album and then click on it again to start the animation and
-
3:28
after a second, accelerates in, and then decelerates out, cool just what we wanted.
-
3:34
All right now, well it's not exactly what we wanted because it doesn't move as
-
3:37
quickly as the animation we're going for.
-
3:39
So I'm going to comment out these lines but I'll leave them here as reference so
-
3:44
you can see how to set configuration parameters like the duration and
-
3:48
start delay.
-
3:49
Just as anything else, details matter a small difference in how things move on
-
3:53
our UI, may have a big impact on the user experience.
-
3:57
Android provides tools such as interpreters to give us fine control of
-
4:00
our animations.
-
4:02
Now it's our job to polish our UI and make sure that it stands out.
You need to sign up for Treehouse in order to download course files.
Sign up