Using Lottie for Beautiful Animations for Xamarin Apps | The Xamarin Show

welcome back everyone to the xamarin show I'm your host James Monson magno and once again my bearded friend from Wisconsin is here mat-su coupe how's it going buddy I'm doing wonderful James driving back on absolutely I think you're now back in a better time of the year here in Seattle it is almost sunny almost it's we got that 50 degree weather it's that nice like it's almost spring it's good it's it's like teasing yeah it's like you know you almost want to move here but then maybe not right okay in Wisconsin we only have like a foot of snow in the last couple days oh that's not bad but you have all the cheese so we have all the cheese salsa cheese and I was a little sad because I knew you were coming into town so I was like oh maybe you'll come back on the show and bring some cheese curds but then no cheese curds happen it's my way of getting invited back again and again I see how it is all right so what are we talking about today today we're gonna talk about how we can add lots of animations to our examine forms at with Lottie okay so we talked about animations on a snack pack which I'll put down which kind of like the built in xamarin forms like I want to move this thing over here I want to disagree so what is Lottie so what lot it does is that it's built by Airbnb okay and it's a way that you can take After Effects animations which are gonna be super complex animations and export them using this plug-in called body moving or Jason okay and then once you have them in JSON our good friend Martin an MVP has created these this plugin essentially that allows us to display these After Effects animations within xamarin apps okay very cool so any xamarin app whether its iOS android xamarin forms and even uwp perfect in fact I think there was an if theft show showing that off right and then this plug-in will do everything for you which is cool right all we have to do is bring the JSON it so all right so Lottie is from Airbnb that's a library correct and then our good friend Martin MVP created the bindings around it right that's right okay guys want to make sure I get the everything right and if people don't know what's really cool about zamars you can take any iOS or Android library create bindings around it mmm just cool and then so you're saying if I have this magical stuff I know nothing about After Effects I know nothing about body moving I mean I can yoga here and there but this body doesn't move all that often just up and down from second floor down to channel 9 right that's all you needed yeah so and then we can do that so so maybe you'd kind of walk through as a developer what it would look like to have these animations or what are example of animations I'm used to like spinners or something like that like what does this all look like right well if you don't have a graphic artist who is experienced in After Effects doing everything for you there is a website out there called Lottie files and so this is a community based website where people actually go up and give Lottie examples Oh and so you can actually go down and download various Lottie files and plug them into here your apps you can download them as Jason well is it really cool I mean these are really complex but I don't think I could possibly draw that cute adorable little squirrel who's juggling stuff I know isn't that great yeah so what are some use cases for these Lottie files then well a juggling squirrel will be make a perfect waiting indicator app yeah spinner I mean you can have the big basic activity indicator spinning and spinning but when in a juggling squirrel this look a million times better it would look a million times better yeah I see like inside of here there there seems to be if we scroll through it looks like there's like warning indicators oh that's cool like some check Martin explosions ready so kind of what you're saying is like Lottie these Lottie files are some good use cases are loading things right but you may end up creating like a whole onboarding experience exactly you can do an onboarding experience you can even put it into let's say a button to give it some feedback let hey I just clicked it like a favorite button yeah so you just tweet it out that we have a brand-new salmon show yeah and awesome favorite Twitter Birds go after in Reverse exactly they'll be amazing yeah yeah but if I was to create these by hand I'm saying without Lottie that would probably be nearly impossible for me right you're gonna have to do a bunch of math oh and let's face it James you'd rather be eating cheese curds and doing that that's very true is very true all right so what does this look like to put it in an app are pretty excited because this looks so beautiful right so what we have to do is there is a nougat of course all we have to do is go grab the nougat okay and actually let me show you the app first James Oh can you show you what we're gonna be used putting in there all right so what I have here is an app and what it's going to do is you're gonna take a photo take the photo using your media plugin mm-hmm upload it to Azure blob storage okay once we get up the blob storage I'm going to go then to OCR and Azure optical care optical character recognition mm-hmm have that come back down and it's gonna be a beer menu oh I thought it was a cheese curd I know I know I don't know letting me down tonight well beer cheese it goes handed it does go hand-in-hand right so once we get up there it's gonna take each beer that it recognizes from the menu okay and go hit an API in the background to see ratings of the beer and what type of beer it is okay so there's a lot of back-and-forth going out so this is the app that you had prior to Rio cheese you're creating this application right and it seems like it's pretty complex in it and those calls would take some time right so let me pick it over here and comes back and it goes and we don't know what's happening right now I could have a spinner up there but spinners are boring and eventually it's gonna come back down but it takes forever looks like the app is alright you know finally got it right yeah so let's let's make it that's pretty cool though look at that yeah so you're saying right now you took that photo threw it up and blob storage you did an optical character recognition on it with cognitive services and boom all the writers came all came all the way back now that's really cool that's a great sample we'll give that in for the show yeah okay I'll go in the show notes it's very a bigger sample that's gonna go along with some more that's really cool producing nice oh great okay all right let's do it so let's add some lotty goodness to it so what I'm gonna do is I'm going to download juggling squirrel here all right so we'll download that animation and any of these that are on this website is it kind of free for anyone then you would create this you know someone created somebody else created it okay I've just been downloading them and using them perfect that's really cool and then I'm going to show this in the finder and I'm gonna drag it over to my desktop so I can find it easier later okay and then I have another one enemy used to just to show something else off and it is called I'm gonna go find it here it's gonna be easier that way oh it's called they have a nice little search box yeah yeah I'm gonna search for beer and the reason I'm going to do two is I the nougat has bindings that we can use in xamarin forms oh so we can do mvvm with it and so I'm gonna use this beer bubbles that's cool I don't load it show it and then I am gonna drop it into my desktop cool great so what are these files look like if you're just to open them in like code or something like that let's find out these are the things so if you did have a graphics designer oh so a bit of a graphic designer there in After Effects they're going through some stuff it's all process right they're doing they're tweening reclining I know bunch of graphic designer stuff ajik stuff they go they hit this plugin called body moving for the export and then beautiful we get off Jason it kind of reminds me almost of like SVG data just yeah you know it looks a lot like that but it has a bunch of other right right right where it's cool telling you what the move where and commands so let's close that down and let's start adding some body to it so what you need to do after you go get the nougat packages which are just found via V nougat gallery here just a lotta forms logo and that one specifically for the salmon forms and what it does it has a dependency on iOS Lottie which will add so you're putting them in to the platform projects as well into and also your shared library and then the only thing you have to do on your platform project if we open up the app delegate here is this animation view renderer in it yep platform setup and we're ready to go perfect cool not too bad not too bad at all and of course there's one other thing we have to actually add the animations the Jason files to the platform so you would add it to I owe s Android Windows right you have right close that back down and I'm gonna call this one loading okay and so I'm gonna bring them in and this is very similar to how I would add like my PNG JPEG or anything else it's just a resource that I exactly bring it into the resources folder it gives it a build action of bundle resources no gets in and perfect around well off we go all right so I also added the nougat package up here and it is unbelievably easy to get it going remember I'm excited so add photo I'm using everything into a grid because I am in my very rectangular UI design phase so what I will do is lotty namespace has already went ahead and added it okay cool so you just added that namespace you got access to any of the stuff in the Lottie dot form exactly and it's animation view there's only one I like that yep easy and it's still has its derives from the xamarin forms view class so it's has all the attributes or all the properties that we'd imagine such as grid dot view the attached properties and I'm gonna make this row span of two and grid column span of two as well okay cool so just putting it so it looks halfway decent and since we're not graphic designer so it's not gonna look perfect on the screen but it's gonna look good enough and then so here are some Lottie specific properties we can do a loop so what this is going to tell as soon as it over and over again got it and we can do auto start or auto play as soon as I do so yep fire-and-forget essentially and then there's an also another one called animation so this is what we do is when we specify which JSON file that we want to have a play oh very cool and what I'm going to do is that this is actually bindable oh very close doesn't bind it to any of the specific file right you need oh I like that and so what I did in my view model behind the scenes here as I cheated and not very mvvm ish as I went down and I already said when I'm uploading something called loading that Jason or beer bubbles Jason as well okay so all right so let's go ahead and run it again that's pretty cool cuz you could then show it hide it you know right based on if you're loading something in the background so I'll only autoplay when it's right exactly and there's a couple more properties as well that we have progress property you have a loop property you can know when it's playing oh nice you also have the speed and then couple commands to very started playing and when it finished playing as well yeah that's very nice yeah it's a pretty full-featured they did I knock up job on it yeah alright so here we are again I'm ready well upload it we'll pick our photo and then as we spin it comes back oh you're happy again and then I have it changing over when we actually start talking to the beer API in the background very cool and then once it gets everything I go back oh so now we know exactly what it's doing that's very nice I mean he did literally nothing five seconds I did nothing I went in downloaded a file hardest part was actually deciding which ones I wanted an awful lot e-files yeah that's like oh yeah there's a lot of them on there right yeah there's like how many pages worth I don't know let's just go to popular all these I'm oh my goodness yeah that's so poised 46 pages oh that's really cool yeah so literally you can take any of these and if you did have a graphics designer or on sometimes you work with a custom graphic designer just for one thing I can't really need this specific thing it's a you know After Effects just export it and then break them you can bring it in immediately right and that's the great thing After Effects is a pretty common application graphic designers are gonna be familiar with it all you have to do is know what you want that's awesome can you see it one more time yeah all right do it the juggling squirrel is the best right let's calm down let's slow him down a little bit because he's juggling he's juggling too fast now that we know that there's all these great problem right in there so let's do this you remind what the property name was James oh yeah I should probably have paid any it's beef property that's two point five okay so so then go ahead and do it on any of them and then you could bind that to so you could write have it ramped up and you can go I put in on any of your own stuffings right of it and because it derives from the xamarin forms view we can do salmon forms animation on a two so we want it to appear from nowhere and this is great because now this one animation you only have to take once and then it will go ahead and scale on any of the plat android or iOS just works yeah that's nice look at that chuckling squirty my field is juggling cheese curds right it would been even better that's pretty awesome that's really nice I mean because for me I think on all my applications I default to that oh I'll just animate this thing over I'll fade it or I'll put that my generic right in or right but really what I'm doing is I end up disabling a bunch of buttons show a spinner anyways and then the user doesn't really see anything or interact with anything and it's not a pleasant experience it seems like this really can just lighten up your application right you can do a lot of fun animations and it's super easy to add I love it yeah it's really cool awesome super cool well Matt thank you so much for showing this off I've you know I've seen it a whole bunch I've never actually seen it in person in the use case so it's super awesome just to see it all come together yeah fun it's easy one mark in the s4 yeah awesome so we'll put all the links on it alati but this awesome example and anything else that we can possibly think of below Matt thank you for coming on thanks for having me Jane absolutely next time cheese curds I'll vision we can eat them here live on the show absolutely as well love it so join in so anyways thanks for watching there's been another episode of the zamarons show all about Lottie and awesome animations for your apps make sure you subscribe you can hit that button over there down over there on YouTube you ding that bell you get awesome notifications in your inbox each and every week about the awesome awesome Samer and stuff that you see right here on channel 9 until next time thanks for watching

Channel: Microsoft Developer

Views: 13,736

Keywords: channel9, xamarin, xamarin.forms, lottie, animations, after effects, C#, visual studio, lottie files

Id: vo0_pVMXRAo

Length: 15min 40sec (940 seconds)

Published: Thu Apr 26 2018