>> Welcome back everyone to
The Xamarin Show: Snack Pack Edition.
I'm your host James Montemagno.
And today, Matt is here from Wisconsin,
didn't bring me any cheese.
>> It's wintertime, James.
>> Okay.
>> I don't know if that matters or not.
>> It's probably a long drive to the dairy, but good.
You're here, special guest, Snack Pack Edition,
because you wanted to talk about
Xamarin Forms Animation. Why and how?
>> Why? Because I don't think a lot of
people even know about Xamarin Forms Animations.
It seems weird that you would have
this cross-platform UI framework but
be able to do animations and all, doesn't it?
>> Sounds awesome. It is awesome.
>> Yeah.
>> So five minutes, what you got for me?
>> All right. So in five minutes,
I want to show up the four big animations
that we have in Xamarin Forms.
Translate, moving things around the screen.
Scale, making them bigger,
making them smaller, rotating them,
flipping it around, and you can do X, Y,
and Z axes all over the place,
and fading them, playing at the opacity.
>> Cool. Let's check it out.
>> All right. Here we go. So what we have
here is just a simple XAML page,
buttons, and helpfully, I
put a quick event on each of these buttons.
We can go behind and play with the animations.
>> Nice.
>> All right. First off,
we're going to do the translation,
and the APIs for these are super simple.
Of course, they are readable,
so we don't have to mess with the user's experience.
They can hit it and away we go.
So "translateButton.TranslateTo". And now,
what we have here
is that we have a couple of different options here.
We can say X and Y where we want to move it to.
And a thing that is important to
remember is that the X and Y
is 0,0 in the upper left-hand corner of the control.
>> Got it.
>> That way we can say and it goes negative to the left,
positive to the right, or negative to up, positive down.
>> Perfect.
>> Let's go "100,
0," and we'll say the length,
let's make this 500 for milliseconds, so a half-second.
And then there's this easing function.
What this easing function
does is it gives us some ways to
do some additional animation to it.
So let's do a "bounceOut".
What this will do is will make
the button bounce out a little at the end of it.
We will scroll back out here.
I'll save it. And then,
we can see we just moved it over and bounced it.
>> So people are like, "How are you doing
that? We're using the Xamarin Live Player."
>> We're using the Xamarin Live Player inside
the iOS simulator, really cool stuff.
So I'll do a translate button and I'll move
it back to "0,
0" and just by default.
And so, moves back.
>> Very cool. Nice.
>> Pretty slick. And then
scaling and helpfully call this one the "scaleButton".
>> It makes sense.
>> Yup. "ScaleTo", and I'm going to scale it to three.
And we'll do this over,
let's say 1,000 for one second with no easing,
and then I'll bring it back to one.
That's "ScaleTo" back to 1.
We'll do it over, again,
1,000 and easing, and we'll say here is spring out.
So in and out means when you want to have
the extra animation take
part and so out being the end of it.
>> Got it. That's cool.
>> So scale up and down and kind of
just goes a little bit past
that one point and mix just a little bit smaller.
>> That's very cool. And you weigh it on all of them so
the first animation finishes and then the next one.
>> Right, and because our UI doesn't lock up,
I can do translate here and
scale there and they both kind of run at the same time.
>> Nice.
>> All right. Rotate. And I bet
you can guess what the animation is here.
>> I have to imagine that it might be "RotateTo".
>> "RotateTo".
>> Beautiful.
>> All right. And we'll just do
in degrees to, let's say, 180.
Leave it the length and easing the same.
And then we'll "await" at going back, "rotateTo(0,_500,".
I like that spring out so
I could bring it just a little back.
>> Yeah. It's really cool that it just one
little "enum" can really spice it up.
>> Yup.
>> That's crazy.
>> That's cool.
>> And you didn't really do anything.
One, two lines of code.
>> Yeah.
>> That's so cool.
>> Yup. And then "FadeTo".
And it's a "fadeButton".
>> So I bet it's "FadeTo".
>> There it is.
>> Of course, "FadeTo".
>> Right. And of course,
let's do ".5", and we'll do it over half a second.
And there's a couple of different easings.
We'll do a "Sign In Sign Out".
>> Okay.
>> So this will make its start up fast,
slow it down, and come in.
That should actually do it over 1,000 for a whole second.
>> This is pretty cool because you can do it right in
the Xamarin Live Player and then test that
all the animations in real time. That's cool.
>> We'll make it go to 0.
We'll make it get out of here.
>> Very cool. All right.
So that's cool, but what does it look like in a real app?
And that's cool to play around, but what else you got?
>> Right. So what you want to
do with the real app is just kind of
pizzazz things up and make them fun, right?
>> Yeah.
>> And so what I have here is the,
bring it up, the My Weather app.
>> Good, old My Weather app. I do love this app.
>> We can go and just get
the current conditions of wherever you want.
This is the basic before we add it to the animation.
>> So it's like about what I made.
>> Yep. So right now,
it's 38.75 degrees in Madison with some haze.
>> Pretty warm.
>> It's actually really nice
compared to what it used to be.
And Seattle, it currently is.
>> Beautiful.
>> It's nicer here than it is in Madison. All right.
So let's actually show you what we're doing.
So I have this "Handle_Clicked" event behind the scenes.
And what I'm going to do first is I have all the,
I'll scroll this a little bit over so we can
see what we're handling, is the image.
I'm want to make its initial opacity
0 and its scale really huge.
I'll make this 15 so when I do it,
it's going to come zooming back in.
>> So no animations, just instant.
>> Just Instant, and by the opacity being 0,
you're not going to see it.
>> Got it.
>> So I'm setting up for the original.
>> Got it.
>> And then same thing with the condition label.
Opacity is 0 so you can't see it,
but all the way over to the side, 300 units over.
>> Cool.
>> And the temperature label,
opacity is 0 but the rotation,
X rotation, over at 0 as well.
And then first thing I'm going to have to happen,
I'm going to say "getWeatherButton.ScaleTo(0)".
And that's this button right here, "Get Weather" to 0.
Going to go on and actually execute.
Go and get my current conditions.
The next thing is I'm going to
bring the "Conditions" button image way back again.
It's huge but I'm bringing it back into over 1 second.
I'm going to have it bounce.
>> Cool.
>> Next thing is when all of these,
because you do nothing but tasks.
>> Yes. You can run a bunch of them together.
>> Right. Right. So the image,
I'm fading it in from 0 to 1 over a half second.
The label, moving it over and fading it in.
So when all three of these are done,
I'm then going to start the temperature label.
I'm going to spin it around.
>> Oh, cool.
>> So you can see it. And then finally,
I'm bringing the button back in.
So it's going to shrink and come back out.
>> Nice. Cool. Let's check it out.
>> All right. So let's run it over on iOS.
>> So you can
to kind of any sort of application you have,
add a few animations, boom.
>> Simple as that.
>> Oh, it is.
>> Here we go. Seattle, button fades away,
and there it is.
>> Beautiful. Now works on both iOS and Android?
>> Works on both iOS and Android.
We'll bring the Android app up.
Well, look for My Weather.
>> So that's nice. Fully cross-platform,
uses the hardware acceleration.
>> And we'll say Get Weather, goes off,
spins around, and it comes back. There we go.
>> Nice!
>> Yeah.
>> Awesome! Animations in just a few minutes,
spice up any application. That's amazing.
>> Xamarin Forms.
>> Awesome. Well, Matt,
thank you so much for coming back on.
>> Thanks for having me, James.
>> Absolutely. This has been
another Xamarin Show Snack Pack,
making applications beautiful and
awesome animations in Xamarin Forms.
Don't forget to subscribe up
over there, over there, down over there.
You know where it is. Ding that Bell.
Get those notifications in your inbox.
Until next time. I'm James Montemagno,
and thanks for watching.