CHET HAASE: Hi, I'm Chet Haase, an engineer on the
Android team at Google.
I work on graphics and animations, and today I wanted
to talk a little bit about that.
Specifically, I want to talk about Value Animator and
Object Animator, and how you can get different kinds of
movement on the screen.
So let's take a look at a quick demo.
I call this "Bouncer." I have my little electric sheep at
the top of the screen, and I click on the screen, and a
sheep moves down, in a very boring fashion, to the bottom
the screen.
Not much of a bounce, so let's take a look at another
variation, which I call "Bouncer One."
So we run bounder one, and now we're actually going back up
to the top the screen, which is a good start.
It's actually continuing to move, which is kind of what
bouncing is about.
But it's got this weird, linear
oscillation thing going on.
So let's see if we can do a little better.
We have this other variation, which I call "Bouncer Two,"
and I can click that, and all of a sudden, we've got a
bouncing motion.
So we'll see how we create that with one line of code.
And finally, we've got this other variation called
"Bouncer Three," which is going to look remarkably
similar to bouncer two.
We've got the same bouncing, gravity motion going on there.
The interesting part is in the code, and how that one was
created using a different kind of animator.
So let's look at the code now.
So we've got this bouncer file, go up to the top of it.
You've got this activity called "bouncer." We have a
custom view, where we're going to be drawing this sheep, as
it moves around on the screen.
And here we have a set up shape, where
we decode this resource.
So this is the electric sheep thing that I spent hours and
hours drawing, because it's such complex art.
We get the width and height of this thing, to position it
appropriately later, so we can center it in the screen.
As we change the position properties of this sheep-- to
put it in the center of the screen, or to move it down and
back up the screen during the animations--
we call these setters, set shape x and set shape y.
And this one basically figures out-- the only reason there's
any complex code in here at all is because we need to
invalidate the correct area, so that we erase where the
sheep was, and then draw the sheep in the correct area.
Otherwise, we're going to leave litter artifacts all
over the screen, if we're not a racing correctly.
Or, if we just do an invalidate of the entire view,
then we're basically going to be doing too much work,
because there's no reason to erase the entire view, if all
you did was move the sheep from here to here.
So we get the union rectangle, and we invalidate
appropriately.
And we do this for both of the setters here.
On Size Change, this allows us to center the sheep
appropriately when the size of the window changes.
And On Draw is where all of the magic happens for actually
drawing the sheep on the screen.
We simply draw the bit map at the shape x and shape why
properties that were set before.
For running the animation, we have the Start Animation
method here, that gets called when you click on the thing.
And we create a Value Animator Object.
And this is one of the new classes that was created in
the 3.0 release, part of an overall, more robust timing
and animation engine.
Value animation animator is basically the timing, the meat
of the entire animation package.
It's the timing engine behind Object Animator, Animator Set,
and View Property Animator, and we'll see all of these in
future episodes.
And all it is, is a timing mechanism, a timing and value
calculation mechanism.
Doesn't know about views, doesn't know
about objects at all.
All it knows how to do is to calculate values, based on
parameters that you give it for the start and the end
values, as well as durations, and other properties which
we'll see today.
So we create this value animator by
calling Get Value Animator.
This comes down here and says Value Animator.offloat, and
this is going to calculate animation values between a
starting value of zero, and an ending value of one.
And then we add an update listener.
And if you use Value Animator, which is a more manual way of
doing an animation, then you probably want to have an
update listener.
And that's will get called on every frame in the animation,
and then you can do whatever you want to with the values.
So every time we get a call--
let me reposition this code a little bit, so you can
actually see it on the screen--
on Animation Update, we get a reference to the animation
object itself.
And then we can get the animated fraction, so we can
find out between value of zero and one, what is the current
animation fraction?
And we could also get the animated value at
that time if we wanted.
Here, we're just going between zero and one, it doesn't
really matter.
And we basically use that animation fraction, between
zero and one, to affect the height of the sheep.
So we basically want to move the sheep from the top of the
screen, down to the bottom of the screen, minus the height
of the sheep.
So we're going to take the zero and one factors that we
get during the animation itself, and simply apply that
directly as a proportion of the height at which
the sheep is drawn.
And that's all to bouncer.
So it gets a little bit more interesting once we start
adding actual bouncing capabilities.
All this one does is animate the thing down to the bottom
of the screen in a very boring fashion.
Bouncer one is a way to do that with a little bit of
repetition.
This is the one that oscillated down to the bottom
of the screen and then back up.
So here, we get Value Animator, same
exact thing going on.
But we also set a repeat count of infinite, which means it's
just going to repeat until you finally quit the application
because it's not very interesting.
And it's also going to set a repeat mode reverse, so when
it reaches the bottom, it's going to
animate back up to one.
Internally, what that means is the Value Animator is going to
run from zero to one, and then back to zero, and ad
infinitum, until you kill the application.
Then we start the animation.
That was the second animation.
The third one was the one where it
was actually bouncing.
It was speeding up as it fell down, and then it slowed down
as it went back up, sort of a gravity motion to it.
So that logic is in the bouncer two file, and it's
exactly like the previous one we looked at, except for this
one line of code where we set an interpolator.
An interpolator you can think of as a way of
re-interpreting time.
And by reinterpreting time, we also reinterpret how the
values are calculated, because those are
based on the time value.
So here we're saying, use an accelerate interpolator, which
means the longer you go the faster you're going to get.
But then, interestingly, when it reverses, it's going to use
the interpolator in reverse.
So it's going to speed up on the way down to one, and then
it's going to slow down back up to zero.
And that's how we get the bouncing behavior, as we go
down and up the screen.
And then finally, we can take a look at the bouncer three
file, which produced exactly the same visual result, but
with a little less code.
This gets into use of the new Object Animator class that
also came out in 3.0.
And this is a class that's specifically not just about
animating values, but about animating the values on a
target object and set a target properties.
In particular, we're going to have an object animator--
which is created right here-- that's going to animate
integer values.
It's going to use this target, which is the custom view.
And we're going to animate the "shape Y" property, which is
just a string that we're passing in, which will then
use reflection or JNI underneath to say, given this
string name, is there a setter of this type that I can
associate with this, and then call that setter
over time to animate.
And in fact, it does find that, because we have the set
shape y setter that we saw earlier.
And it's going to animate that property from the value of
zero to the maximum value.
So you can compare this to what we saw before where we
created the value animator, and then we needed to use an
update listener to actually use that value over time.
Object animator does that all for you.
You point it at the target object to animate, the
properties in that object to animate, and
the values to use.
Then you simply start the animation, and away it goes.
It calculates the values, it sets it on the target object,
and it's basically a set and forget thing.
You create the animation, you run it, and you're done.
So this was a little bit about the Property Animation system
that started in 3.0.
So if you're running devices with 3.0, I would suggest you
take a look at these classes, in addition to the View
Property Animator class, which we'll see in a future episode.
Thanks.