CHET HAASE: Hi.
I'm Chet Haase, an engineer on the android team at Google.
I gave a talk with Romain Guy at Google IO recently called
"A Moving Experience," in which we talked about various
cartoon animation techniques that you could apply to user
interfaces.
One of those techniques is called squash and stretch.
And we're going to show a demo today that shows some of that,
as well as another technique that kicks in called
exaggeration.
So the idea with squash and stretch is that objects in the
real world deform to some extent, especially when they
hit say, a wall.
If a body hits a wall or hits the ground going very fast,
it's not going to stay in exactly the same shape that it
was before it hit that unmoving object.
So maybe it's good if you want your objects to have more of a
real-world feel, or more organic and natural feel, to
actually give them some elements of this
stretchability as well.
And the other element is exaggeration, which is the
idea from cartoons is you want to make it very obvious what's
going on and also add a playful aspect.
So not only would things deform slightly, but maybe
they would deform much more than that, just to exaggerate
and enhance the effect and really let the user know
exactly what's going on.
So let's see how this works in a demo.
We have a very simple demo where when I click on the
button, the button is going to fall down to the bottom of the
screen with gravity.
But before it bounces back up, we've got this feeling that
the button is this more elastic and rubbery material.
And so when it hits the ground, it's actually going to
adhere a little bit, and squash and stretch out before
finally snapping back and then bouncing back up to its
starting position.
I've enabled a menu item so we can slow this thing down, so
we can see it in a little bit more glorious detail.
And you'll notice that we're actually deforming the button
as it falls as well.
So it's not just when it hits the floor at the
bottom of the screen.
But also as it's falling, the object is actually stretching
out according to gravity a little bit.
It's very subtle.
It's hard to catch when it's running at full speed, but it
also indicates to the user the subtle aspect of this button
is interacting physically more with its environment than
buttons typically do.
So let's take a look at the code.
It's actually fairly straightforward animation code
using object animators and Property Values Holders to
animate these things in sequence.
First of all, we calculate the animation duration based on
whether we've enabled the Scaling option there so that
we can see the animation run really slowly.
We set the Pivot Point.
This is not necessary, but it made some of the code a little
bit simpler so that we didn't have to sort of change the
translation and scale around a particular point.
So we set the Pivot Point that all the scales will happen
around to the bottom of the object.
And then we use Property Values Holder to animate
several properties on the same target object in parallel.
We're going to animate the translation y as well as the
scale x and scale y properties on the way down.
So we're going to move the object down, and as we move
it, we're going to stretch it out in y and we're going to
squish it in in x as it goes.
We're going to create the down animation with a single object
animator using these three Property
Values Holder objects.
We're going to set an interpolator to an Accelerate
Interpolator because we want it to look like it's reacting
to gravity and actually going faster the
further down it falls.
And then we're going to set the Duration according to the
duration we calculated before.
Once we hit the bottom, then we're going to stretch out in
x and squash down in y like a rubbery object might if it hit
such a hard thing as a floor.
So we're going to use again Property Values Holders to
animate scale x and scale y in parallel.
The Stretch animation is going to use those Property Values
Holders directly.
We're going to set a Repeat Counter repeat mode.
So we want it to squash and stretch out, and then we want
it to snap back to where it was.
So it's the same animation running in reverse according
to the Repeat Count and repeat mode here.
We're going to set an Interpolator Decelerator here
so as it stretches out, I wanted this feeling of the
rubbery material having this tension.
The further out it goes, the slower it's going to go until
it finally reaches the end and then snaps back.
And as it snaps back, it's going to use the reverse of
deceleration.
So it's going to accelerate, which is what again this
elastic or rubbery object would do.
And then we're going to animate back to the top.
So again, we're just animating translation y and scale x and
scale y-- basically the reverse of what we did before,
including using a decelerator to give the effect of pulling
up against gravity and then slowing as it reaches the top
of the curve, ready to go again.
We're going to use an Animator Set to put
these things together.
We're going to play them in sequence.
So first we animate down.
Then we stretch and squash out, repeat that
back to where it was.
And then we run the up animation.
And that's it.
Thanks.