[BLANK_AUDIO]

Hi, I'm Adam Porter.

And this is Programming Mobile
Applications for Android handheld systems.
In the bubble view examples that we just
saw, I demonstrated a simple kind of
animation.
I took a single view, and I changed some
of its properties.
Specifically, its location, and
orientation, and I did this over
a period of time.
Animations like this are fairly common.
Applications often animate changes to
thing to properties of a view like
it's size, it's position, it's
transparency, it's orientation,
and more.
To make animation easier Android provides
several different view animation support
classes and three that we'll talk about
now are the Transition Drawable class for
animating a transition between two views,
the Animation Drawable for creating
frame-by-frame animations, and
the Animation class for creating tween
animations, where you specify certain
frames or moments in the animation and
Android interpolates or fills
in the points in between.
Let's look at each of these classes one at
a time.
The first animation class we'll discuss is
the Transition Drawable.
This class specifies a two layer drawable,
and when it's displayed, the user
sees the first layer, and then a bit
later, sees the second layer.
Our example application is called
Graphics Transition Drawable, and this
application takes us back
to the Graphics Shape Draw applications
that we saw earlier.
But this time, instead displaying both
shapes at the same time, this
application first displays the leftmost
cyan colored shape,
which then fades into a display of the
rightmost magenta colored shape.
Let's see how that works.
So here's my device, and when I start up
the Graphics
Transition Drawable application you'll see
the first shape fading into the second.
So here we go.
Here's the first shape,
and here's the second.
So let's take a look at the source code.
So here's the Graphics Transition Drawable
application, open in the IDE.
Now I'll open the main activity.
In OnCreate, this application loads a
transition drawable
from a file called shape_transition.xml.
Let's open that file.
This file defines a transition resource.
Resources of this type can have up to two
item tags, and each item tag describes one
drawable.
In this case, the drawables are our
familiar cyan and magenta shapes.
Now, back in the main activity, the code
calls set crossfade enabled with the
parameter true,
and this causes the first drawable to
visually fade into the second drawable.
Next, the code sets the transition, as the
drawable for the image view, by calling
set image drawable, and then finally, it
calls start on the transition,
passing in a value of 5000 for the
animation's duration.
The next kind of animation that we'll talk
about is the Animation Drawable.
This drawable animates a series of other
drawables,
showing each one for some period of time.
Our next example application is called
Graphics Frame Animation.
This application uses an Animation
Drawable to
display a kind of splash screen, which
itself presents a series of images
counting
down to the start of the main application.
Let's see what this does.
[BLANK_AUDIO]
So here's my device.
When I start up the graphics frame
animation application, you'll see a series
of images,
counting down to a final image.
Okay, let's get started.
Nine, eight, seven, six, five,
four, three, two, one, and finally, the
image we've all
been waiting for.
So let's go to the source code for this
application.
So here's the Graphics Frame Animation
application open in the IDE.
Now I'll open the main activity and in
OnCreate this application loads an
Animation Drawable from a file called
view_animation.xml.
And
then it sets that animation drawable as
the background on an image view.
This code then stores that drawable in a
variable called mAnim.
And before we go forward, let's take a
look at the view_animation.xml file.
So here's the view_animation.xml file and
this file defines an animation list
resource.
This resource contains a list of item
tags, where each tag
represents a drawable, and in this case,
the first drawable is just a
black screen, and that displays for one
second, and this is
followed by nine other images, each of
which is displayed also for one second.
Now back in the main activity, the code
waits until the on window focus changed
method is called, and this method is
called
when the applications window gains or
loses focus.
In this method the code first checks
whether the window is
currently gaining focus and if it is it
then starts the animation.
Next class is the animation class, and
this class is used to create
animations in which transformations are
applied to the contents of a view.
Applications can play with the timing of
these transformations to
sequence and combine different
transformations
to make more complex animations.
The graphics Tween Animation
application demonstrates the use of the
animation class.
When this application runs, it displays a
bubble view and
then proceeds to animate a number of
changes to that bubble.
Let's see it in action.
So here's my device.
When I start up the Graphics Tween
Animation application you'll see the
bubble, and
then you'll see a series of
transformations applied to that bubble.
You'll see it fade in, rotate, move,
change its size, and finally, fade out,
and you'll also see
that the timing of these transformations
is not always linear.
That is, some transformations will happen
at a uniform pace,
some will start slow and build up speed,
some will
start fast and then reduce their speed,
some will both
speed up and slow down at different points
in the animation.
Now, I'll slow down the video here a
little bit, so you
can see these effects more clearly.
So, here we go, first the bubble fades in
and
next the bubble rotates twice, getting
faster as it goes.
Now the bubble will move, overshoot its
final position and then pull back a bit.
After that, the bubble will shrink a bit
before quickly doubling its size,
and finally the bubble fades out of view,
quickly
at first, and then more slowly near the
end.
Let's take a look at the source code for
this application.
So here's the Graphics Tween Animation
application open in the IDE.
Now, I'll open the main activity.
And this application sets the, calls
setContentView, passing in the main.xml
file.
And then it finds an image view in that
layout.
And after that it
reads an animation from the
view_animation.xml file
which is stored in the res/Anim directory.
Here's the resource and nested within the
set tag there are several other tags,
each of which indicates a specific
transformation to be applied to the view.
The first is an alpha transformation, the
duration of the animation is three
seconds.
It goes from an alpha of zero, or
completely transparent, to an
alpha of one, completely opaque.
The transformation also uses the linear
interpolator, so the effect is applied
uniformly throughout the animation.
The next tag is a rotate transformation.
The duration is set to four seconds, but
it's
also set to start only after three seconds
have passed.
So, the first transformation
will occur and finish, and then this one
will start up.
This animation goes from 0 to 720 degrees,
or two full turns,
and its interpolator accelerates, or
speeds, up as
the animation proceeds and you can look at
all the
other tags on your own when we take a
break.
Going back now to the main activity, let's
go to the on window focus changed method.
Again, this code checks to see if the
window is
currently gaining focus, and if so, it
starts the animation.
[BLANK_AUDIO]
The last concept I'll talk about is
property animation.
The previous examples showed classes that
are designed to
animate a set of simple property changes
on views.
But sometimes, you want to animate more
than just those things and to
support that, Android has developed a
system
for changing general ,properties of
generic objects
over a given period of time, and
this system of Property Animation has
several components.
First, there is a Value Animator, and this
is the main class that controls the
animation.
The Value Animator contains a time
interpolator which determines
how values change as a function of time.
For instance, over time do the changes
happen uniformly, do they speed up, slow
down, or use some combination of the two?
Value Animator also defines a listener
interface
called Animator Update Listener, and this
interface defines
the on animation update method which gets
called
each time a new animation frame is
created.
And lastly, while Android knows how to
animate the values of common types, like
imagers or floats, it doesn't know how to
animate custom types that you create.
So if you need to animate your own types,
or animate
existing types in new ways you can
implement the Type Evaluator Interface.
This interface defines an
Evaluate method that gets called to set
the
animation values at a particular point in
the animation.
The last piece of property animation is
the Animator Set Class.
This class allows you to combine animator
objects, like the value animator we just
discussed, into more complex animations.
So let's look at some example
applications that make use of property
animation.
The first of these applications is called
Graphics Value Animator, and this
application uses
a value animator to animate a change in
the background color of an image view.
Let's watch this application.
So here's my device.
I'll now start up the graphics value
animator application.
And as you can see it presents a single
button labeled Animate.
When I press that button, a red rectangle
will appear in the middle of the
display, and over a period of about ten
seconds, that
rectangle will change color until it's
finally blue.
I'll press the button now.
There's the red rectangle.
And now let's watch as it slowly turns
blue.
Let's open the source code and see how we
did that.
So here's the graphics value animator
application open in the IDE.
Now I'll open the main activity.
This application starts by setting two
integer values, which
represent the starting and ending points
for the animation.
The first value is the integer
representation of the color red.
The second value is the integer
representation of the color blue.
In OnCreate, the code creates a button
that will start the animation, and as
you see here, when the button is clicked,
the start animation method is run.
Let's look at that method.
Here, the start animation method creates a
value animated object called anim,
and it created that object by calling the
value animators of object method.
The first parameter for this method is a
type evaluator, in this case the type
evaluator is actually a, an ARGB evaluator
object, and
this class knows how to interpolate the
integer
representations of colors.
The second and third
parameters for the of object method are
the starting
and ending points for the animation, the
colors red and blue.
Next the code adds an Animator Update
Listener and that is going to
be called back each time new animation
frames are created
and that code calls the Get Animated Value
method to
retrieve the current color value, and then
it makes that color the background color
of the image view, which is shown in the
layout.
And lastly this code sets the duration of
ten seconds for the animation, and then
starts the animation running.
Let's also look at a second property
animation application, called Graphics
View Property Animator.
This application will implement the same
application
we created for the Graphics Tween
Animation application.
You'll see a bubble that fades in,
rotates, moves, resizes, and then fades
out.
And this version of the application,
however, will use the view property
animator class, which is a simplified kind
of animator for just view properties.
Let's see that application in action.
So
here's my device.
And I'll start up the Graphics View
Property Animator application.
And we'll watch as the bubble goes through
a series of transformations.
Here we go.
[BLANK_AUDIO]
Let's open up the source code for this
application.
So here's the Graphics View Property
Animator application open in the
IDE.
Now I'll open the main activity.
And let's scroll over to the on window
focus changed method.
When this method is called, the
application insures that the activity
window is gaining focus and if so, it
calls the run
method of the fade in object, and that
fade in object is
a runnable.
Now inside its run method, its code
calls animate on the image view, which
returns a view property
animator object.
This object, or this class, uses a
fluent interface, like what we saw with
the notification area notifications.
And so you can build an animation by
tacking on various method calls.
In this case, the next call is set
duration to three seconds, then
set interpolator to the linear
interpolater, then a call
to the alpha method to change the
transparency to fully opaque and
then a final call which tells the View
Property Animator that when this animation
ends it should invoke the run method of
another runnable called rotate.
And, as you can probably guess, this
rotate
runnable creates the rotation step of the
animation,
and then it ends by calling the movement
step of the
animation, and this continues until all of
the steps have been completed.
So
that's all for our lesson on graphics and
animation.
See you next time for a lesson on
multi-touch and gestures.
See you then.
[BLANK_AUDIO]