Animating Controls in .NET MAUI & Xamarin.Forms

today i'm going to show you how to animate any view inside of donna 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 [Music] hey everyone i'm james and i'm back with another 101 beginner series video this time talking about animations and donna maui and xamarin forms now there are a lot of great helper libraries out there like the community toolkit and xam animations and a bunch of other ones that give you these helper methods to do animations but sometimes 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 uh 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 fonts 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 add a clicked event here on our button so let's animate it so here's our new button event 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 to we can fade two we can rotate two x y or just rotate whatever we want uh normally the x and y together the normal rotation in a circle for example we can do relative rotate to we can do scale to there's all of these things all built in automatically that are extension methods on every single view in don and maui in xamarin form 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 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 it bouncing in is it sine 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 linear linearly linearly all right now this is asynchronous which means 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 1.0 but let's do that with a bounce in and then a bounce out animation so we can kind of see a few different animations here so this is going to do just what i described it's going to fade to zero fade to one normal opacity scale up and scale back down so let's go ahead and see what that looks like on our android emulator here so go into animations hit animate fades down fades up scales up bouncing and scales back down so you can play around those easings they're kind of cool right that one bounced in all the way up to one right and it went back down so you can do all sorts of really cool animations including translation so 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 up but what if we wanted to play those animations together 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 awaiting on fade two i know it's asynchronous just do it and that will basically say fade to zero right now and then also scale all right and then what we could do here is we could then say fade two um and scale two 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 how can you fix that up okay well we can use we can use net and c sharp so we could say var um let's say a1 equals fade two var a two equals this and let's do this we'll do var a3 equals app and then say var a4 equals that so now we're just assigning variables and now what we could do is we could say await task dot when all here so creates a task that will complete when all are there so there's win any and win all so let's do this and we're going to say a1 a2 okay then we can do the same thing here we can just chain these up and we can say a3 a4 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 await on it now we're actually going to play these together they're going to run together the magic of the task parallel library over here to fade 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 fade 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 wanted to rotate this thing so what i'm going to do here is i'm going to say await then i'll say label load dot rotate 2 and we know it's at 0 because that's the default and we can rotate it 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 boot this back up and let's rotate this view so over here we're going to go into our animations and sure enough we rotate if i click again we don't rotate oh well that's because we never reset the rotation to zero 360 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 could say label load dot rotation and we can set it equal to zero all right so we can reset it to the beginning of our animation that we want to play over here so let's now go ahead and boot that up and see what this looks like and we should ideally get our animation not bad looking pretty cool as 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 to be you know slower to faster we could play around with those things over and over again but you may be thinking to yourself well james you sort of did these 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 well you can do that with the built-in don and 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 we're going to 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 because i'm going and getting data i'm delaying five seconds so we want to animate for five seconds and then what we want to do is say is busy equals false so that's our flag that we're going to use here to do some animations so let's go back to the view and instead of doing a button click let's do a command binding to refresh 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 event so whenever that property changes we want to see if is busy is true or is busy is false and respond accordingly so what are we going to respond with inside this view i'm glad everybody asks and we're going to do that with a another instance here of an animation so i'm going to say read only animation it's a class built into xamarinforms.net maui and we're going to call it rotation okay so we're going to rotate this 360 reset it and loop it 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 but you can also give it an easing and 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 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 what i want to have happen whenever this thing changes i want the label load.rotation to be set to v all right then what i want to do is i want to start that at 0 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 0 to 360 linearly we haven't told our over how long yet but whenever those values change we want to go ahead and update this rotation okay so that's our rotation animation and now we're going to do is say if e that's coming in our property changed event right here we're going to say e dot property name equals equals and i can say name of vm dot is busy whenever is busy changes we're gonna adjust to it so we're gonna say if vm dot is busy let's animate okay else over 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 could 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 here and there's a few things that are built into here it's kind of like cut off here on the screen so i'm going to kind of walk through what is in this so if i actually go to definition here 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 an easing 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 might want to say is true is false over and over so here's what we're going to do 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 down in maui is i animatable which is really cool we're going to give it a name and it's going to be rotate so you can get a constant name that's 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 animation actions come in one is finished over here so this um is is called when the animation is finished and it passes us a value and also this uh boolean which i'm not exactly sure what it is i have to look up exactly what it does but it gives us this action to return over here so whoa what do we have 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 could do a bunch of things in here you might want to store that value you might want to do different things with it but you might want to see where it's at but we're going to set it to 0. 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 you know care if things are going it's like it's if it's running repeat it over and over again but you may want to cut create custom animations that play like two times or three times or four times and track that but for this since it's spinning go go go all right let's go ahead and stop the animation this one's super simple on the content page i can say this dot and i can say abort 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 0 to 360 update every 16 over one second linearly and then when it's finished reset the rotation to zero and start it over again seems pretty cool that is literally one two three lines of code to do a custom animation inside of don and 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 there we go over and over and over again which is pretty cool now if i wanted to i could come into the page and for example what i could do here is i could say is visible and i could say binding is busy so only show it if it is busy i could also do for example is visible or maybe i'll just do like is maybe not as visible but enabled here and i could 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 it 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 back 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 don and maui and xamarin forms i'll link to those other repos and blog posts that show more advanced animations on how to create custom classes and more mvvmify if you will but i hope that you found this really helpful in your journey in mobile and desktop anime you know development with both don and maui and xamarin forms of course i have an entire xamarin forms and don maui 101 beginner classes all here on youtube if you like any of those videos or this video give it a thumbs up it would be really um helpful for others to find the video it goes into that youtube algorithm of goodness and of course subscribe to the channel if you want to get more videos i'd super appreciate that we also have new members i'm going to put a list of all the members scrolling down right 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 i just love talking about this stuff and i love creating videos for all of you if any questions leave them in the comments below and thanks for watching [Music] you

Channel: James Montemagno

Views: 21,127

Keywords: .net maui, animations, custom animations, dotnet maui, james montemagno, maui, maui tutorial, spinner, xamarin forms, xamarin.forms, xaml animations

Id: 48qN1h0DUjs

Length: 19min 19sec (1159 seconds)

Published: Thu Jan 20 2022