Tip:
Highlight text to annotate it
X
Hi, I'm Chet Haase, an engineer on the
Android team at Google.
I work on graphics and animation.
Today I want to just talk about a way of using a class
called View Property Animator, which was introduced in the
3.2 release.
And this is a way to animate properties of views
in a very easy way.
It's kind of like setting the value of one of the properties
on the view but having it animate to that value instead
of just atomically switch to it.
So there's much more I could go into about View Property
Animator in general.
What we're going to see today is an effect where we can use
View Property Animator to cross fade between different
images in a picture viewer.
So let's take a look at the demo.
So we saw another demo in a previous episode where we used
transition Drawable to do something similar.
Although that particular Drawable animation is about
switching just between two images.
This one's a little bit more general purpose, where we have
a set of images in here that we've loaded and we're going
to cross fade as we go between them.
And we'll just keep going through the
entire set of images.
A little bit more general purpose.
So as we click on the image we get a nice fading effect as we
go to the next image and on and on and then
we just cycle around.
I only have four images loaded in here for the
purposes of this demo.
So, pretty pictures.
Not a terribly interesting demo.
But let's take a look at the code.
So we have this class called Picture Viewer and in it--
I'm just hard coding these.
I'm just loading in these small images that I had.
Not the way to go for a general picture viewing
application, obviously.
But it does for this purpose, which is to demonstrate using
View Property Animator and cross fading
between these things.
So we have two image views that we're going to fade
between, where we're going to put these resources.
And we're going to first of all set up the View Property
Animator on these views to have a duration of 1,000.
One thing to be aware of with View Property Animator is the
way that you use it is by calling view.animate and that
returns you a reference to the View Property Animator which
all views have.
So they only have that one instance inside them, although
it's unique to that view.
So if you want to change the [INAUDIBLE] properties on a
View Property Animator, such as the duration, then you call
.animate and then call the setter.
In this case we're setting the duration to be 1,000.
I should point out that is too long for a
general purpose UI animation.
But for the purposes of actually demonstrating this
today, in this video I tend to use longer durations so you
can actually see the animation depending on the
frame rate of the video.
Then we create bit map Drawables from these hard
coded images, these Drawables that I defined above.
Nothing very interesting going on there.
And then for the previous and the next image view we
populate them with the first and second Drawable there.
And then when we click-- this is where all the interesting
stuff happened--
we basically performed two animations in parallel.
We're going to animate the existing image that everybody
can see out and we're going to animate and we're going to
fade the new image, the next image, in.
And then when it's done we're going to restore some values
and then we're going to set up the references to which images
we're currently showing so that we can keep cycling
through the set of images that we have.
So here we're going to animate the alpha property, which is
the translucency property of the previous image.
It is currently 1 because that's the image that the user
is currently seeing.
And we're going to animate it by saying animate, which
returns as View Property Animator object .alpha 0.
So this is basically saying, I want you to animate.
I want to set the alpha property to 0, but I want you
to animate it there over whatever your duration is.
And we're going to call withLayer and I'll explain
that in a moment.
This is sort of an important element to understand for
performance tuning.
And then Next Image View, instead of fading that out
like the previous one, we're going to fade it in.
So as the old one fades out we're going to
fade the new one in.
So you can think of them as sort of sitting on top of one
another and we're going to cross fade them by fading one
out and fading the other one in all at the same time.
And then there's a new API that was added.
I believe this is in Jelly Bean and it's called
withEndAction.
And you can mimic this in prior releases simply by
setting a listener on a View Property Animator and doing
the same exact thing.
This is just a little bit more terse way of doing that.
You can say when this animation is done, then I want
you to perform the following actions.
We're going to update our references so that we know
which images we're actually looking at right now, and then
we're going to restore some alpha properties.
So we're going to set the alpha property of 1 to 0 and
set the other alpha property to 1 so that they're at a good
state to animate from for the next transition that we do.
Now I want to get back to this withLayer thing.
This is important.
When you're animating a complex view or complex view
hierarchy, it's important to use a layer on that object,
especially if you've noticed a frame rate problem because the
system can't keep up with redrawing that thing from
scratch every time during the animation.
An easy way to do that is to set a layer
type on that object.
So you simply call view.setLayerType and set it
to a hardware layer, for example.
And this API that we have here as of Jelly Bean the withLayer
API is a way for us to do that for you.
So you could do that when you run the animation.
You could say set layer type on the View and then you could
put some more code in here with your end action, or you
could set a listener for the end of the animation and then
reset that layer or remove that layer.
But we'll do that automatically for you if you
call the withLayer method.
So today's episode was about View Property Animator and
specifically using View Property Animator to get a
very easy cross fade operation between different
representations of views.
Thanks.