CHET HAASE: Hi, I'm Chet Haase from the
Android team at Google.
I work on graphics and animation stuff here.
And today I wanted to talk about some animation stuff.
Surprise, surprise.
Specifically I wanted to talk about View Animations, which
is the set of the animation APIs that are available prior
to the 3.0 release.
So there's some more modern APIs that we'll talk about in
future episodes, but for now we'll talk about the APIs that
you might want to use if you're running on devices that
are running platforms prior to the 3.0 release.
So View Animations were created specifically for
animating individual properties of views.
It's not a general purpose animation engine, but a way to
achieve specific visual effects
for your user interface.
So let's take a look at a demo, which I called View
Animations.
We have a few buttons on the screen that are named after
the animations that are going to be run when
you click on them.
So we have an alpha animation, a translate animation that
moves the button around, rotate animation, a scale
animation, and then a set animation is basically a way
to choreograph several animations on the same object.
So we run all of those types of animations on that one
button to give a really horrible effect, which I
expect to not see in any of your applications.
Now all of these animations that we're running here were
created and run in code, but you can also load them from
animation resources, which we'll see in
the code in a minute.
So we can get exactly the same types of effect loading from
XML resources instead.
So now let's take a look at the code.
So we have this class called View Animations.
It's an activity.
We have a check box that controls whether we load from
resources or create these on the fly in code.
We have the buttons that are created here.
We have alpha, translate, rotate, scale, set, and then
we listen for clicks on those buttons and run the animations
appropriately.
This is the interesting part about how the animations are
actually created, so this is how you create some of these
animations in code.
So here's an alpha animation.
We say we want an alpha animation, it's going to go
from 1 to 0.
That's basically saying from fully opaque to fully
transparent.
And we're going to set the duration.
Note that view animations don't have a default duration,
so you need to set a duration to have any animation at all,
otherwise they'll just happen atomically and immediately,
which is probably not the kind of animation effect you're
looking for.
We have a translate animation that's going to be moving in
both x and y, and you have the ability to move in absolute
coordinates or relative to self or relative to parents.
You can basically say, I want to move for half of my
parent's width, for example.
Again, we set the duration and that animation
is on rotate animation.
Again we have the concept of being relative to self,
relative to parent, and we have a pivot point that we're
rotating around.
Here we're pivoting around the center point of the button
itself, so it's just going to rotate around its center.
Set the duration and we're done.
Scale animation, we're going to scale in both x and y, from
1 to 2, which is saying from my normal 100%
size to 200% size.
And the set animation is a way of combining all of these
animations to run all on the same button to give that
really horrible effect that we saw.
We set up each of these animations, which is just a
method that I created to say either use the animations that
are created above or create them from resources, which
we'll see in a minute.
And then we listen in on the button.
When the button has clicked, then we run the animation
appropriately.
So that's the code side of this.
The resource side we can take a look at, and it should be
fairly straightforward.
If you understand how to create these in code, you'll
understand what the attribute names are in the XML resource.
So here's the alpha animation.
We say from an alpha of 1 to an alpha of 0 duration we're
going to make this a little bit faster in XML resources.
Rotate, we've got two degrees 360, so it's basically going
to spin an entire cycle and it's going to pivot around
half of its own width.
So it's got a center point right it in its center for the
rotation scale animation here.
From x and y of 1, so that's from its normal 100% size to
an x and y scale of 2, so going to
200% duration of 1,000.
And here's the set.
So this is how we choreograph animations and do several
things either in parallel or in sequence.
We're actually doing all of these all together, so they're
going to happen all at the same time to give to the most
egregious effect possible.
But you can stagger these in time as well by
using a start offset.
Here we have an alpha animation that's going to kick
off at the same time as the rotate animation, same time as
the scale animation, and at the same time as
the translate animation.
So to load these we can go back and look at the code and
instead of just running the animation that we created in
code above we do a animation utils load animation, and load
it from the resource ID that we specified.
So the takeaway from this today is, it's fairly easy to
create these things and to run these animations and get some
simple effects, basically moving things around on the
screen and fading them in and out, which can be a very
powerful tool to help your users understand what's going
on in your UI.
Fade the things in that are coming into view, fade them
out if they're going away, move things into position, and
basically give a more immersive and intuitive
experience to your users.
In future episodes we'll see alternate ways of doing this
kind of stuff as well as other, more powerful,
animations.
Thanks for tuning in.