Today, I'm going to show you how to animate any view inside of .NET MAUI
or Xamarin.Forms with just a few lines of code with the built in animation
framework, which is extremely powerful to do simple animations and fully
customizable, custom animations.
So tune in.
Hi everyone.
I'm James.
And I'm back with another one-on-one beginner series of video this
time talking about animations and .NET MAUI and Xamarin.Forms.
Or there are a lot of great helper libraries out there, like the community
toolkit and Zam animations, and a bunch of other ones that give you these
helper methods to do animations, but.
It's great.
Just to know how you can do animations with what's built into the box.
That's what I like to show you inside of these videos.
So that's what we're going to do today.
We're going to take a look at animation, so let's check it out.
So I created a very simple view here, which has a button that
you want to click to load some data and animate this spinner.
Now the spinner is a, is a label and it's using font.
Awesome icons.
I have a video, I'll put it up over there.
That shows you how to use icons inside of.
Anywhere in your application like I'm doing here.
So what we want to do is animate this thing.
So maybe we want to spin it 360 degrees.
That would be pretty cool.
Or maybe you want to translate or fade or scale different views
inside of your application.
So we can do that with built-in animations.
So let's go ahead and do that.
What I'm going to do first is at a clicked event here on our button.
So let's say.
So here's our new button events.
And what we're going to do is we're going to say label, load dot, and we can do a
bunch of cool things such as fade, too.
We can fade too.
We can rotate to X, Y, or just.
Whatever we want.
Uh, normally the X and Y together, the normal rotation and a circle.
Uh, for example, we can do relative rotate too.
We can do scale too.
There's all of these things all built in automatically that are
extension methods on every single view in.NET MAUI and Xamarin forms.
So they're just on the base visual element class.
Okay.
So this is really cool.
So let's say we wanted to dot fade to zero.
And then we could say, um, over how long, so let's do over one second and then we
can give it an easing and easings are cool because they are how the animation occurs.
Like how do you scale from zero?
Um, from one to zero, what is that scale like?
Is it linear?
Is it cubic in, is a bouncing in, is it, um, sign a spring?
There's all these different animations in, so let's do linear.
So this just means it'll go from one to zero.
So our current opacity, which is one to zero, a linear linear.
Lennar early.
All right.
Now this is asynchronous means weaned.
We could chain these things together.
So we could say a weight on here and mark this as async.
All right.
And then we could say, after you're done with that, let's fade it back up to one.
We could also then say, Hey, let's scale to.
2.0, maybe 2.0 and let's scale as well, back down to one point out,
but let's do that with a bounce in and then a bounce out animations.
So we can kind of see a few different animations there.
So this is going to do just what I described.
It's going to fate to zero fate to one normal capacity
scale up and scale back down.
So let's go ahead and see what that looks like on our Android, uh, emulator here.
So go into animation.
It animate, fades down, fades up, scales up, bouncing and scales back down.
So you can play around with those easings they're kind of cool, right?
That one bound stand all the way up to one.
Right.
And then I went back down so you can do all sorts of really cool
animations, including translations.
If you wanted this to zoom in from negative 500 to wherever it's
at now, you can go ahead and do that and chain those animations.
But what if we wanted to play those animations together?
Uh, for example, we may want to fade to zero and scale up and then we
would probably want to do something like fade to one and scale back down.
So this is where it kind of gets a little quirky.
Okay.
So what we would want to do is sort of chain together, these animations.
So instead of, uh, waiting on fade to, I know it's a.
Just do it.
And that will basically say fade to zero right now and then also scale.
All right.
Um, and then what we could do here is we could then say
fade too, um, and scale too.
So that's one way of doing it.
Now you might be saying James.
Okay.
Like that's not the greatest thing I've ever seen in the world.
Ah, can you fix that up?
Okay.
Well, we can use, we can use dinette and C sharp so we can say VAR.
Let's say a one equals fade to VAR, a two equals this and let's do this.
We'll do equals app and then say VAR, a four equals app.
So now we're just assigning variables.
And now what we could do is we could say, uh, wait, um, task dot
when all.
Here.
So create a task that will complete when all are there.
So there's when any, and when all, so let's do this and
we're going to say a 180 2.
Okay.
And then we can do the same thing here.
We can just change these up and we can say a three.
A four.
All right.
So wait, when all those are done.
All right.
So that's a better way of doing it.
So if you don't want to have those squiggles under there, because you
didn't know, wait on it now, we're actually going to play these together.
They're going to run together the magic of the tax parallel library over here.
It's a Fay these in and out.
So let's check it out.
I love the TPL.
So here, it's going to fade up and then fade back down if they
end up together and fade back down together, which is super duper cool.
I mean, that's just a few lines of code to be able to fade up and scale down.
And of course I'm applying it to a specific control, but you
can make this very generic.
You can make it.
So you pass your view into your view model on a button, click
command, and then animate that view.
Right?
You can do that.
You can create extension methods to really, you know,
make this really, really cool.
Now let's say we want it to rotate this thing.
So what I'm going to do here is I'm going to say.
And I'll say, uh, label, load doubt, rotate too.
And we know as that zero, cause that's the default and we can rotate to 360 degrees.
We can do it over a second and we'll do easing of linear.
All right.
Let's just do that.
So now instead of fading and scaling and things like that, with these simple
animations, we're going to rotate it.
So let's go ahead and.
Now booth is back backup and let's rotate this view.
So over here, we're going to go into our animations and sure
enough, we rotate by click again.
We don't rotate.
Oh, well that's because we never reset the rotation.
To 0 360 is, is zero.
Right.
But it needs to know how to reset itself.
So let's reset it back to zero when that's done.
So here I can say label, load dot rotation, and we can
set it equal to zero, right.
So we can reset it to the beginning of.
Uh, our animation that we want to play over here.
So let's not, we'll go ahead and boot that up and see what this looks like.
And we should ideally get our animation and not bad looking pretty cool.
Is it animates around over one second?
Of course, we could adjust that we could speed up those rotations and zoom it in.
If we want it to be, uh, you know, slower to faster, we could play around
with those things over and over.
But you may be thinking to yourself, well, James, you sort
of did the animations on demand.
What if you want to sort of not necessarily react to an event like a
button click, but you want to respond to something happening in the view model?
Like I click a button, it makes a web request and I want to spin
for as long as humanly possible.
Oh, well you can do that with the built-in Donna Maui and
Xamarin forms, animations using.
Animation.
So, so that's really cool.
You can actually create a custom animation to do this, and you can tell
it when to start and when to stop.
So what I'm going to do is I'm going to come in and we're going to go in to
our animation page and we're going to, um, We don't need this button click.
We're going to get rid of a button click or an a delete all this code here.
Fantastic.
And what I've done inside of my image cache view model over here is I've
created a long refresh, command, refresh, long command that does this.
It sets is busy to true cause I'm going and getting data,
um, delaying five seconds.
So we want to animate for five seconds and then we want to
do as a is busy equals false.
So that's our flag that we're going to use her to do some animation.
So let's go back to the view.
And instead of doing a button click, let's do a command binding
to refresh a long command.
All right.
And then let's go ahead into our code behind.
And what I'm going to do is I've got our instance of our view model over here and
just whatever our binding context is.
And what I'm going to do is we're going to respond to our property changed events.
So whenever that property changes, we want to see if is busy as true or is
busy as false and respond accordingly.
So, uh, what are we going to respond with inside this view?
I'm glad everybody has, and we're going to do that with a, uh, another
instance here of an animation.
So I'm going to say read only animation class, built into Xamarin forms and dotnet
Maui, and we're going to call it rotation.
Okay.
So we're going to rotate this 360, reset it and loop it.
And that's what we want to do.
So when I create this animation over here in the constructor,
I can just say new animation.
And there is an overload that takes in a callback of what you want to
do, what values you want to basically animate from, start to finish.
So for instance, here, the default is animate from zero to one.
Um, but you can also give it an easing end, even a
finished action right here too.
So here's what we want to do is we want to come in and we want
to, um, give it a call back.
So we're going to say value.
I'm going to say V and I'm going to say that, uh, what I want to have
happen whenever this thing changes.
I want the label load-out rotation to be set to V all right.
Then, what I want to do is I want to start that at zero and
I want to animate it to 360.
And I want that easing to be linear over here.
Now we can set the finished action here, but we're going to do that actually
later when we start the animation.
So you can decide when you want to do that here, but that's it.
We're going to say animate from zero to 360.
Literally, we haven't told her over how long yet, but whenever
those values change, we want to go ahead and update this rotation.
So that's our rotation animation.
And now we're going to do is say if E and that's coming in and our property
changed event right here, we're gonna say e.property name equals equals.
And I can say name of vm.is busy.
Whenever is busy changes.
We're gonna adjust to it.
So we're going to say if vm.is busy, let's animate.
Okay.
Who else?
Over here.
We're going to say stop.
So we're actually going to do this.
So let's do the animation first.
The animation is we're going to commit a new animation to occur right now.
So I'm going to say rotate a rotation, I should say is the name of the animation.
And I can do things like add, and there's like queryable.
There's all bunch of different things.
There's inserting animations.
You can chain things together, but we're just going to commit a new animation.
And there's a few things that are built into your, you can, it's kind
of like cut off here on the screen.
So I'm going to kind of walk through what is in this.
I've actually go to definition here.
Um, we should see that animation has commit and it's going to take
in an owner of, I animatable a name, a rate, a length in easy.
And then it's going to have two callbacks.
The first one is, what do you want to have happen when this
thing is finished over here?
So that's what this is going to be passed in here.
And then a function if you want this to be repeated.
So it's a function because you may want that to be called
every single time and change.
So you may want to say is true, is false over and over.
So now we're going to fill this in, so we're going to commit it.
And the animator is the page.
So luckily for us, every content page in Xamarin forms and anemone is ay
animatable, which is really cool.
We're going to give it a name and it's going to be rotate so you can
get the constant name as how we're going to stop the animation later.
There's a rate property, and I'm just going to leave the default to 16.
So that's how often it updates.
But we are going to say, Hey, animate that over 1000 milliseconds,
which is one second, we're going to give it an easing of linear.
And then here's where these two animations.
Actions come in.
One is finished over here.
So this, um, is, uh, is called when the animation is finished
and it passes us a value.
And also this, uh, bullying, which I'm not exactly sure what it is.
I have to look up exactly what it does, but it gives us as this
action to return, uh, over here.
So, well, why don't we want to have happen?
Well, when it's finished, We want to reset it just like we reset it manually before.
So we're going to say label, load dot rotation, set it equal to zero.
Now you can do a bunch of things in here.
You might want to store that value.
You might want to use different things.
Would that be, I want to see where it's at, but we're going to set it to zero.
Then, what we want to do is see if it needs to repeat.
And for this animation, I'm going to say, Hey, always repeat it over and over again.
I don't even care if things are going.
It's like it's, if it's running, repeated over and over again, but
you may want to cut, create custom animations at play like two times or
three times or four times and track that.
But for this, since it's spinning.
All right, let's go ahead and stop the animation.
This one is super simple.
Um, on the content page, I can say this doc, and I can say a board animation,
which is part of I animatable.
So here, all it does is take in the name, which is rotate.
That's it.
So if it's busy commit the animation, which is going to start from zero
to 360, update every 16, over 100.
Linearly.
And then when it's finished, reset the rotation to zero and start it over again,
it seems pretty cool as a, literally 1, 2, 3 lines of code to do a custom animation
inside of Donna Maui and Xamarin forms.
So let's check this out now inside of our animation view.
Sure enough.
If I animate for five seconds, it is spinning over and over and over again.
Over and over and over again, which is pretty cool.
Now, if I wanted to, I could come into the, uh, um, page.
And for example, what I could do here is I could say, uh, is visible
and I could say binding is busy.
So only show it if it is busy, I could also do.
Um, for example is visible.
Uh, let me just do like is maybe not as visible but enabled.
Here.
And I can say binding is not busy.
Now is busy and is not busy.
If you're wondering, are coming from this view model based class, which is part of
MVVM helpers, this base view model here.
So what's nice about this is that it has an is busy and N is not busy.
That are automatically set for us.
So when I set is busy is not busy, is also updated for us too.
So that is a nice way of basically enabling and disabling and showing
different UIs based on when you're playing animations or loading data.
So let's go over here and let's go into our animations click.
I can no longer click it.
And when it's done sure enough, it comes right up.
Boom.
I can do all sorts of different animations in there too, so I can
chain different animations together.
I can commit all of them back and play them all back over and over again, and
chain a whole bunch of things together.
But I hope you found this pretty insightful, how to create
really, really simple animations with a little bit of code.
Or create your own custom animations using the built in goodness
of dynamo and Xamarin forms.
I will link to those other repos and blog posts that show more advanced
animations, how to create custom classes and more MVVM if you will.
But I hope that you found this really helpful and your journey and a mobile and
desktop enemy, you know, Um, development with both .NET MAUI and Xamarin forms.
Of course, I have an entire Xamarin forms and Don Moe one-on-one
beginner classes all here on YouTube.
If you like any of those videos or this video, give it a thumbs
up and be really, um, um, helpful for others to have on the video.
It goes into that YouTube algorithm of goodness.
And of course, subscribe to the channel.
If you want to get more videos at super appreciate that we also have new members.
I'm going to put a list of all the members scrolling down.
Here that have joined up, uh, since we launched the membership just, uh,
less than a few weeks ago, really appreciate it helps the channel going.
I do all these videos in my spare time, late at night.
Um, I just love talking about this stuff and I love creating videos for all of you.
Have any questions, leave them in the comments below and thanks for watching.