CHET HAASE: Hi.
I'm Chet Haase, an engineer on the Android team at Google.
Today I'm going to show a demo that's a little bit more about
motivating some of the techniques I've talked about
in previous DevBytes episodes.
I'll walk through some code, but it's going to be a pretty
blistering pace because frankly, a lot of the
techniques in the code are ones that we've already talked
about on the show.
What I wanted to do with this application is instead
motivate some of the techniques that I've talked
about, specifically around cartoon animation.
So it's a little bit hard when you click on a button and you
see it fall down to the bottom of the screen and squish at
the bottom, to understand why you would want to do that in
your application.
And frankly, most applications probably
shouldn't do that maybe.
It would be a little disturbing or silly.
But there are some applications that really want
to be more engaging to the user.
And it's worth understanding a type of application that might
want to use that to be more playful and engaging in
general, more interactive with the user.
I wanted to show how to use some of these techniques that
we've talked about in previous episodes, as well as in the
talk at Google I/O 2013 called "A Moving Experience," to show
how you want to use some of these cartoon animation
techniques, and put them all together in some larger
example to give that more engaging feeling to the user.
We're going to be showing things about anticipation,
about overshoot, about exaggeration, and in general,
just being a little bit more fun, engaging, and playful.
So let's take a look at the demo.
Here we go.
We get into the application, and we've got this button that
is bouncing.
It's ready to go.
It wants us to engage.
Even though we're not interacting with the
application, that's not a reason why the application
can't be interacting with us.
It's trying to attract our attention here, and then
eventually we'll fall for it.
We'll press on the button.
This is a technique that we showed in some earlier
episodes about anticipation, where when we click on the
button, maybe it doesn't just have to change color.
Maybe it can actually physically interact with the
user, and actually press in or press out.
To show that there's a physical interaction with the
button actually going down as the user presses on it.
So we press the button and then when we
let go, watch carefully.
It's going to launch out and then just keep going.
It launches out toward the user.
And then we get into this other activity.
And this is actually a separate activity.
Again, this is a technique I talked about in a previous
episode about custom activity animations.
We're not running a window animation here, which has a
standard way of running where things scale and fade in.
Instead, we're disabling that, and we're running a custom
activity animation by automatically launching the
sub activity with a white background.
So it's fully opaque, but it's the same opaque background as
the one we came from.
But first, we basically animate the stuff to get out
of the way, and then the sub activity launches with that
same plain white background.
And then the contents in that activity animate.
They scale in.
So we have this continuous motion from the previous
activity launching, fading, and going past the user, and
then the new content coming in with this
custom activity animation.
Now we're on the first screen here, and we have some things
that look vaguely like buttons down at the bottom.
And did you notice that they popped in?
Everything here is about being more interactive and playful
and alive, in general.
We can click on one of these.
We can say, OK-- and it's very simple too, right?
It's just asking for your name.
Not a lot going on here.
Maybe the game is intended for kids, right?
So you want to make it as simple and
streamlined as possible.
So we say, yep.
I'm going to play--
I'm the returning player called Pat.
OK, what difficulty are going to play?
I am awesome at this game, I'm going to be mega hard.
Now, notice when I press on the buttons again it's that
same interactive thing.
I press on the button, the button actually goes into the
screen, away from the user.
And then comes back out, it springs and overshoots,
showing that interactive model of engaging the user through
actually interacting through the physical presses and
releases on the screen.
As I release the button, you're going to see the same
thing you did on the previous screen, which is the button is
going to launch out at the user and then animate into
place at the top of the screen.
You notice another element on all these screens is the text
is going to animate out.
We have this flow of the application going
from right to left.
And we do this with a little bit of anticipation on the
text, again, a technique that we saw on a previous demo.
Where the text will actually skew to the right and then
shift to the left.
This is like traditional cartoon animations where
someone's going to run.
But before they run, they're going to rear
back and get ready.
Which really helps the user understand exactly what's
about to happen.
Not just during the action, but
actually before the action.
We anticipate the text.
It's going to anticipate the animation.
And then it's going to shift quickly off the screen.
And then finally, of course, you want to ask for the
child's credit card number.
Because that's where the real money is, right?
That's it.
We can step through it again.
You see the button.
You see the engaging, playful thing.
You launch into the sub activity here,
pressing the buttons.
The buttons are interacting, the text is giving all this
playful stuff.
Let's take a very quick look at the code.
There's a lot of code here.
But again, the techniques are similar to techniques that we
saw in these previous DevBytes episodes.
So it's not worth belaboring these too much.
We have Toon Game.
This is the main activity.
We're listening for touches on the button.
And when we get one, we're going to animate the scale so
the button scales into the screen away from the user.
And when they release, we're going to trap that here, and
we're going to animate back to the regular scale thing.
But then we're also going to perform the click operation,
which is going to go into the subactivity.
That is down here.
When we play, we're going to animate.
We're going to keep scaling the button out
from where it was.
It's going to scale, and it's also going to fade out at the
same time and come out toward the user.
And then when it's done, we're going to launch the sub
activity, this new intent.
We're going to start the activity.
We're going to override the pending transition.
I don't want window animations here.
I'm already doing my custom activity animation.
You get the window animations out of the way with overriding
pending transitions with zero.
And then it launches the sub activity, which is this
PlayerSetupActiviy here.
Player Setup Activity has various elements.
A lot of code in here, not worth going into.
Again, same techniques all over the place in here.
We have the button press listeners.
When you click on one of these things, it's
going to scale in.
When you release, it's going to scale back
out to where it was.
And then when a button is clicked, it's going to animate
into place up at the top of the screen.
I didn't simply want to pop that view out from where it
was because the layout would have been affected by that.
Instead, I'm going to set that invisible ability there in its
previous state.
And then I'm going to create a copy of that button and
animate that in a parent container.
As I move that in this virtual curve, scaling out and then
scaling back down into place at the top of the screen where
it's going to live.
Then the text skewing animation--
again, we've seen this in previous demos.
That happens in this custom text view sub class I have
here, called skewable text view.
We're going to animate the skew property of the text as
it skews to the right and then shifts over to the left.
And that happens by simply animating the skew value,
invalidating appropriately, also invalidate the parent
around the area of the skew.
So we actually erase and redraw the appropriate area.
And that's the utility method for doing that.
And that's about it.
There's a lot of code in here.
But again, we went over the actual techniques of the code
in detail in the previous DevBytes episodes.
So be sure to check those out, as well as the code for this
application.
It should be available at a link on this YouTube video.
Thanks.