If you've been looking for ways to
make your app more beautiful, then you probably know about animations. And
you probably already know about Lottie animations. Now what that has to do
with .NET MAUI and why my arm is going like this, you'll find out.
In this video. Lottie is the name of a technique that is
basically an alternative to gifs and other kinds of animated
images. It is supposed to be lightweight. It's
based on JSON. You can do it with Adobe After Effects. I
think you can create the animation there. I'm not a graphical person myself, so
I have no clue how to get started with that. But I
know how to add them to my .NET MAUI application and make my
apps more beautiful. And that's what I'm going to learn you in this
video as well. So you can make beautiful .NET MAUI applications.
Lottie animations have been available in Xamarin and Xamarin.Forms before with a
nice plugin. But now that we're transitioning into
.NET MAUI, we see a lot of libraries who are going to make the transition
now. And also there are libraries who are not maintained
anymore. So it might be that some of those libraries have to
be picked up by others or will be included in libraries that already
exist and suddenly now start taking in this functionality. And I think the
same is true for Lottie animations as well. We
already have SkiaSharp with which you can draw amazing things
super, super fast. And now as part of SkiaSharp, you can also do
Lottie animations in your .NET MAUI application. Let's just check out
how to do that. So here we are in Visual Studio 2022,
the preview at the time of recording. We still need
for a .NET MAUI application. By the time you're watching this, you might
be able to use the stable version of Visual Studio. And here I have a .NET MAUI... It's
just a File, New .NET MAUI application, a project that I
started. You can see it running here for Windows. And
of course, everything that I'm going to show you also works for iOS, Android,
Windows, macOS. You can run it on all those targets. Now this
is a nice template. And as all new templates, there is
some button that increments a counter that is supposed to be there for a new
template. I don't know why, but it's kind of static, right? So how
cool would it be if we could give that little .NET bot a little
upgrade? So that's exactly what we're going to do. Now let's stop
running here for a second. And the first thing that I want to do
is bring in the SkiaSharp NuGet package, basically. So I'm going
to right click on the project right here and I'm going to say manage
NuGet packages. Also at the time of recording. This is a
prerelease. So be sure to check that include prerelease check
right here and then I'm going to search for SkiaSharp.... You can already see it pop
up, Extended.UI. Maui. So it's also available for
Forms. I think it's also available for a bunch of other
platforms. So if that's what you need, also go check that out. But I'm interested in
.NET MAUI for now. So click this. I'm going to install
that on my project and because it's a single project, it's automatically
going to install this for iOS, Windows, Android, macOS, all these
things. So it's going to bring in a couple of
dependencies and I accept all the license agreements here and then
boom, it installed it on my project and I can start working with
SkiaSharp and all the other controls in here. So you
have to be sure this is the Extended.UI because the base
SkiaSharp library does provide you with all the drawing
APIs. But this is specifically for the Lotties animations.
If you want to know more about SkiaSharp, please let me know down in the
comments and I'll be sure to make more videos on that. So we got that in
place. Now another thing that we need to do is go into our MauiProgram.cs
and we need to bootstrap our little SkiaSharp thing
here. So in our builder we have UseMauiApp and I'm also going to say
UseSkiaSharp. You can already see that
IntelliSense is helping me here and it adds the right using here at the top. If not,
make sure to include this one. And now we are in place, everything is
bootstrapped. Whenever we start running this, our builder knows to
include all the things for SkiaSharp and we are ready to use the SkiaSharp
library. If you don't do this, you will get a runtime exception. So
be sure to get this in there. Now what we can do is go to our MainPage and what I'm going to do is
replace this image with a SkiaSharp thing. So to
actually do that, we need to have a little shorthand for our Skia
library, right? Another XML namespace. So let's add that here. smlns, I'm
going to name that skia. That name can be anything
you want and just search here in the IntelliSense for SkiaSharp.
Now there's a couple popping up. You want to have the SkiaSharp.Extended.UI.Controls, so that's the one you want. It will
add a little blurb of text here. But now we can replace this image with
skia: and we can see a LottieView. We also have a
ConfettiView which is very cool as well. And we have a couple of
other things here. So if you want to know more about the
ConfettieView, I personally do, so please make me look into that by leaving a comment
saying that you want to know more. But we're interested in the LottieView.
Now the LottieView also has a Source. I'll come back to that in a little
bit. There are a couple of things that are important here. So we need to
set a HeightRequest and a WidthRequest. So I'm also going to set the
WidthRequest right now also to 200 because Lottie can use scalable graphics. So it's just an SVG
basically inside of this JSON file. So it can scale to
infinity, which is really cool. But you have to set a
width and a height. Also it won't know how big it has to render
here. So we need to set that the source is of
importance. So we'll get to that in a little bit. And there
are some other things here. So look for animation, basically. We
have events for AnimationFailed, AnimationLoaded. So you have events that will
know whenever something's up, something happened with your animation
or your animation has loaded. And you can trigger a little piece of code if
that's what you want. IsAnimationEnabled so that says like is
the animation running currently yes or no. You can kind of like pause
and unpause your animation. But also we have some things with
repeat. So we have a RepeatCount. If we set that to ten, the
animation in the file is going to repeat ten times and then it's
going to be done. You can also set it to zero. Then it's going to never
repeat. So it's only going to play once. That's kind of like a shift in
mindset, right? Or you can set it to -1 and then it will
repeat until infinity. Now we also saw a RepeatMode and we
have two. So we have a restart. So basically
whenever the animation is done it will wind back to the beginning without showing
anything and then restart from there. Or we have to reverse. So it
will play linear to the end and then it will go back basically
through all the frames so you see the exact same but then reversed and that
can make for more fluent animation. So you can play with
that. I'm going to leave it at the default, which I'm not
even sure what the default is, but it works for me. So let's bring in
our animation now. And that's really cool. We can go to the resources and
the raw folder right here. So we have things for AppIcon,
fonts, images, but this is going to be a raw resource, right? Because this is
a JSON file and that needs to be accessed by the platforms. It's not
something that we can recognize from our .NET MAUI single project. So it has to
be a raw resource. And with this raw resource we can just
plug it in there and we can reach out to it through anything, basically, through our code.
So let's click, Add Existing Item and on my desktop there should be... Oh,
it's filtered on file.s So let's do all files. I have
dotnetbot.json. Well, what might that be? What might
that be? I don't know. So let's add that and then I can
update the source here simply to say dotnetbot.json and save that and boom, we're ready to
actually show this puppy. So let's run this on my Windows
machine. I'm going to run it right here and we should now it's going to
build all the things, bring in that SkiaSharp code. We're
going to bootstrap that through our MauiProgram. We've hooked in to
that SkiaSharp little thingy. I added the dotnetbot.json and whenever
our screen is now coming up, then our .NET bot is not going to
be really static anymore, but it's actually going to be as this
description right here, a cute .NET bot waving at you. So
let's see that. Here we are, we have this
little .NET bot which is actually waving to you. So how cool is that? This is all that is needed to add very
cool animations, Lottie animations to your application.
Now there are a couple of things to note here. First, SkiaSharp, it
brings in a dependency. It is a relatively large one. So if
that's something that you do not want, you're going to have to
wait until another library is going to implement this, which is maybe a
little bit more lightweight. But on the other hand, it's going to
bring in a lot of goodies and with all the new build processes and
compiler and linking and trimming, it will shake out, it's
called tree shaking. It will shake out all the APIs that are not needed
during a release build. So all those APIs are going to fall
off and your app shouldn't grow by that much actually. But that's
something for you to try and decide if that's something that you're willing to take
on. The other thing, while implementing this, I said already, I'm not a
graphical person, I cannot create this type of animation. So I
went out to Fiverr to someone to do this for me. I'm very
thankful for that. Thank you so much for doing this to create a
wonderful video. But the first version that I got had
incorporated like Base64 encoded PNG's and that didn't work with this plug in. So be really sure
that if you go inside of that JSON source, if you see like PNG, image/png and then some base 64, you will know
it when you see it. It's kind of like those data URL
things that you can also use on HTML. Whenever that's in there, it
won't work at the time of recording, at least
with this SkiaSharp plug-in, I already mentioned it as a bug, I raised the
issue and it's going to be worked on. But you want to have pure JSON
animations and that will actually work as we've
seen here in this video. Now if you want to know more
about .NET MAUI, make sure to check out this playlist. And here is a
very recommended video especially for you. Be sure to click this button so
that you're subscribed, like this video and I'll see you for the next one.
