CHET HAASE: Hi, I'm Chet Haase from the
CHET HAASE: Hi, I'm Chet Haase from the

Android team at Google.
Android team at Google.

I work on graphics and animation stuff here.
I work on graphics and animation stuff here.

And today I wanted to talk about some animation stuff.
And today I wanted to talk about some animation stuff.

Surprise, surprise.
Surprise, surprise.

Specifically I wanted to talk about View Animations, which
Specifically I wanted to talk about View Animations, which

is the set of the animation APIs that are available prior
is the set of the animation APIs that are available prior

to the 3.0 release.
to the 3.0 release.

So there's some more modern APIs that we'll talk about in
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
future episodes, but for now we'll talk about the APIs that

you might want to use if you're running on devices that
you might want to use if you're running on devices that

are running platforms prior to the 3.0 release.
are running platforms prior to the 3.0 release.

So View Animations were created specifically for
So View Animations were created specifically for

animating individual properties of views.
animating individual properties of views.

It's not a general purpose animation engine, but a way to
It's not a general purpose animation engine, but a way to

achieve specific visual effects
achieve specific visual effects

for your user interface.
for your user interface.

So let's take a look at a demo, which I called View
So let's take a look at a demo, which I called View

Animations.
Animations.

We have a few buttons on the screen that are named after
We have a few buttons on the screen that are named after

the animations that are going to be run when
the animations that are going to be run when

you click on them.
you click on them.

So we have an alpha animation, a translate animation that
So we have an alpha animation, a translate animation that

moves the button around, rotate animation, a scale
moves the button around, rotate animation, a scale

animation, and then a set animation is basically a way
animation, and then a set animation is basically a way

to choreograph several animations on the same object.
to choreograph several animations on the same object.

So we run all of those types of animations on that one
So we run all of those types of animations on that one

button to give a really horrible effect, which I
button to give a really horrible effect, which I

expect to not see in any of your applications.
expect to not see in any of your applications.

Now all of these animations that we're running here were
Now all of these animations that we're running here were

created and run in code, but you can also load them from
created and run in code, but you can also load them from

animation resources, which we'll see in
animation resources, which we'll see in

the code in a minute.
the code in a minute.

So we can get exactly the same types of effect loading from
So we can get exactly the same types of effect loading from

XML resources instead.
XML resources instead.

So now let's take a look at the code.
So now let's take a look at the code.

So we have this class called View Animations.
So we have this class called View Animations.

It's an activity.
It's an activity.

We have a check box that controls whether we load from
We have a check box that controls whether we load from

resources or create these on the fly in code.
resources or create these on the fly in code.

We have the buttons that are created here.
We have the buttons that are created here.

We have alpha, translate, rotate, scale, set, and then
We have alpha, translate, rotate, scale, set, and then

we listen for clicks on those buttons and run the animations
we listen for clicks on those buttons and run the animations

appropriately.
appropriately.

This is the interesting part about how the animations are
This is the interesting part about how the animations are

actually created, so this is how you create some of these
actually created, so this is how you create some of these

animations in code.
animations in code.

So here's an alpha animation.
So here's an alpha animation.

We say we want an alpha animation, it's going to go
We say we want an alpha animation, it's going to go

from 1 to 0.
from 1 to 0.

That's basically saying from fully opaque to fully
That's basically saying from fully opaque to fully

transparent.
transparent.

And we're going to set the duration.
And we're going to set the duration.

Note that view animations don't have a default duration,
Note that view animations don't have a default duration,

so you need to set a duration to have any animation at all,
so you need to set a duration to have any animation at all,

otherwise they'll just happen atomically and immediately,
otherwise they'll just happen atomically and immediately,

which is probably not the kind of animation effect you're
which is probably not the kind of animation effect you're

looking for.
looking for.

We have a translate animation that's going to be moving in
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
both x and y, and you have the ability to move in absolute

coordinates or relative to self or relative to parents.
coordinates or relative to self or relative to parents.

You can basically say, I want to move for half of my
You can basically say, I want to move for half of my

parent's width, for example.
parent's width, for example.

Again, we set the duration and that animation
Again, we set the duration and that animation

is on rotate animation.
is on rotate animation.

Again we have the concept of being relative to self,
Again we have the concept of being relative to self,

relative to parent, and we have a pivot point that we're
relative to parent, and we have a pivot point that we're

rotating around.
rotating around.

Here we're pivoting around the center point of the button
Here we're pivoting around the center point of the button

itself, so it's just going to rotate around its center.
itself, so it's just going to rotate around its center.

Set the duration and we're done.
Set the duration and we're done.

Scale animation, we're going to scale in both x and y, from
Scale animation, we're going to scale in both x and y, from

1 to 2, which is saying from my normal 100%
1 to 2, which is saying from my normal 100%

size to 200% size.
size to 200% size.

And the set animation is a way of combining all of these
And the set animation is a way of combining all of these

animations to run all on the same button to give that
animations to run all on the same button to give that

really horrible effect that we saw.
really horrible effect that we saw.

We set up each of these animations, which is just a
We set up each of these animations, which is just a

method that I created to say either use the animations that
method that I created to say either use the animations that

are created above or create them from resources, which
are created above or create them from resources, which

we'll see in a minute.
we'll see in a minute.

And then we listen in on the button.
And then we listen in on the button.

When the button has clicked, then we run the animation
When the button has clicked, then we run the animation

appropriately.
appropriately.

So that's the code side of this.
So that's the code side of this.

The resource side we can take a look at, and it should be
The resource side we can take a look at, and it should be

fairly straightforward.
fairly straightforward.

If you understand how to create these in code, you'll
If you understand how to create these in code, you'll

understand what the attribute names are in the XML resource.
understand what the attribute names are in the XML resource.

So here's the alpha animation.
So here's the alpha animation.

We say from an alpha of 1 to an alpha of 0 duration we're
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.
going to make this a little bit faster in XML resources.

Rotate, we've got two degrees 360, so it's basically going
Rotate, we've got two degrees 360, so it's basically going

to spin an entire cycle and it's going to pivot around
to spin an entire cycle and it's going to pivot around

half of its own width.
half of its own width.

So it's got a center point right it in its center for the
So it's got a center point right it in its center for the

rotation scale animation here.
rotation scale animation here.

From x and y of 1, so that's from its normal 100% size to
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
an x and y scale of 2, so going to

200% duration of 1,000.
200% duration of 1,000.

And here's the set.
And here's the set.

So this is how we choreograph animations and do several
So this is how we choreograph animations and do several

things either in parallel or in sequence.
things either in parallel or in sequence.

We're actually doing all of these all together, so they're
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
going to happen all at the same time to give to the most

egregious effect possible.
egregious effect possible.

But you can stagger these in time as well by
But you can stagger these in time as well by

using a start offset.
using a start offset.

Here we have an alpha animation that's going to kick
Here we have an alpha animation that's going to kick

off at the same time as the rotate animation, same time as
off at the same time as the rotate animation, same time as

the scale animation, and at the same time as
the scale animation, and at the same time as

the translate animation.
the translate animation.

So to load these we can go back and look at the code and
So to load these we can go back and look at the code and

instead of just running the animation that we created in
instead of just running the animation that we created in

code above we do a animation utils load animation, and load
code above we do a animation utils load animation, and load

it from the resource ID that we specified.
it from the resource ID that we specified.

So the takeaway from this today is, it's fairly easy to
So the takeaway from this today is, it's fairly easy to

create these things and to run these animations and get some
create these things and to run these animations and get some

simple effects, basically moving things around on the
simple effects, basically moving things around on the

screen and fading them in and out, which can be a very
screen and fading them in and out, which can be a very

powerful tool to help your users understand what's going
powerful tool to help your users understand what's going

on in your UI.
on in your UI.

Fade the things in that are coming into view, fade them
Fade the things in that are coming into view, fade them

out if they're going away, move things into position, and
out if they're going away, move things into position, and

basically give a more immersive and intuitive
basically give a more immersive and intuitive

experience to your users.
experience to your users.

In future episodes we'll see alternate ways of doing this
In future episodes we'll see alternate ways of doing this

kind of stuff as well as other, more powerful,
kind of stuff as well as other, more powerful,

animations.
animations.

Thanks for tuning in.
Thanks for tuning in.