Implement Lottie Animations in .NET MAUI Under 10 Minutes!

Подписаться 93 тыс.

Просмотров 16 тыс.

50% 1

The looks of your app can make of break it. To make your .NET MAUI app infinitely more beautiful you can use Lottie animations! Lottie is a lightweight animation format that can be used on all kinds of platforms, now also including .NET MAUI. Let's learn how easy it is to implement Lottie animations in .NET MAUI with the help of SkiaSharp!
💝 Join this channel to get access to perks:
ru-vid.com/show-Geral...
Disclaimer: this channel is done on personal title, in my free time, and not officially affiliated with or endorsed by Microsoft (my employer) in any way. Opinions and views are my own.
🛑 Don't forget to subscribe to my channel for more cool content: ru-vid.com...
🐦 Follow me on Twitter: / jfversluis
🤝 Join the Discord server: / discord
🔗 Links
Sample Code Repo: github.com/jfversluis/MauiLot...
LottieView Documentation: mono.github.io/SkiaSharp.Exte...
.NET MAUI Docs: docs.microsoft.com/dotnet/maui/
⏱ Timestamps
00:00 - Adding Lottie Animations in .NET MAUI
00:17 - What are Lottie Animations?
01:29 - Add SkiaSharp.Extended.UI.Maui NuGet
03:26 - Bootstap SkiaSharp plugin
04:00 - Add LottieView to Display Animation
06:40 - Add Lottie JSON file to .NET MAUI Project
07:33 - Run Sample App: Smile & Wave!
08:14 - Good To Know!
🎥 Video edited with Filmora
🙋‍♂️ Also find my...
Blog: blog.verslu.is
Twitch: / jfversluis
All the rest: jfversluis.dev
#dotnetmaui #animations #lottie #dotnet6 #maui

Наука

Опубликовано:

31 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 74

@jfversluis 2 года назад

If you need animations you can either got to Fiverr to get something custom created, or go to lottiefiles.com for a bunch of free ones! If you want to learn more about .NET MAUI you don't need to go anywhere, just click through to this playlist here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-C9vIDLQwc7M.html

@Mielesplayz Год назад

I was about to ask this, but can you please pin the comment since its all the way at the bottom of the comments. Edit: that was a pretty fast reaction, well done!

@alikarimi01 8 месяцев назад

Gerlad I have tested rive animations on Flutter, is it possible in MAUI or not?

@jfversluis 8 месяцев назад

Not yet but I have been looking into it!

@kplkasteel 2 года назад

Just what I was waiting for. Thanks a lot Gerald. And as usual, great video. Keep up the great work! Cheers!

@jfversluis 2 года назад

Thanks Patrick!

@panagiotis952 2 года назад

Awesome, thank you very much. Hoping you do some fancy animated page transitions next, as I believe that the Xamarin Shared Transitions plugin is not updated for MAUI.

@grant_vine Год назад

Would be interested in comparison of resource usage between Confetti and Lottie, file sizing, maybe package output size etc - and how exactly is this delivered in a Blazor hybrid context?

@MrBan001 2 года назад

How can i make the views responsive? like different views for horizontal and vertical?

@christianzaragoza7575 Год назад

Excelente!!! usaba lottie en Xamarin y en net maui no me dejaba usarlo, siempre salvándonos Gerard, muchas gracias,

@jfversluis Год назад

You’re very welcome Christian! Now go and make amazing looking .NET MAUI apps 😉

@broadshare 2 года назад

Your videos are always refreshing

@jfversluis 2 года назад

Thanks so much!

@welissonarley 2 года назад

We can use this to create our custom Skeleton Loader 😍😍 nice feature. Thanks for sharing Gerald 😃

@jfversluis 2 года назад

Absolutely! Let me know when you get that done, I’d love to see it!

@Malkaviansters 2 года назад

Would be nice with more videos on skia animations, keep up the great work :D

@jfversluis 2 года назад

I'm not the best graphical designer person so don't hold your breath ;) Be sure to check out Shaun Lawrence's content! He blogs mostly

@nirNP Год назад

Great thanks for the tutorial. Managed to get a lottie animation working

@jfversluis Год назад

Awesome!

@kretzguillaume2366 2 года назад

Very nice ! Did you find a way to adjust the Speed of an animation, like in Xamarin Lottie AnnimationView ? I don't find this ! Thanks

@jfversluis 2 года назад

Don’t think that’s implemented yet. If it’s something you want be sure to open an issue for it!

@Tamer_Ali 2 года назад

Thanks Gerald for your awesome video 👍 SkiaSharp in depth video tutorials please.

@roc_kstark 10 месяцев назад

how do i implement it in c#??

@WoutScheper Год назад

Any way to programatically start and stop a Lottie animation? It either loops or runs once for me. Tried a bunch of things such as a timer connected to the duration of the animation. When it ends I hide and disable the animation but then when I enable and make it visible again it won't run.

@jfversluis Год назад

I think it has a property IsAnimationEnabled which starts or stops it

@yousifarshak 2 года назад

Awsome Gerald keep it up

@jfversluis 2 года назад

Thank you! I’ll try 😄

@cbradbaer 2 года назад

Thank you! Been waitin on this one for a while. Will it work on a splash screen?

@jfversluis 2 года назад

I don't think the underlaying platforms support it so unfortunately not :(

@princesingh-cv8ry Год назад

thank you sir ... Your Lecture video is awesome

@jfversluis Год назад

Thank you so much!

@crashnnburn Год назад

Nice video as always!!

@jfversluis Год назад

Thank you so much!

@patrick19345 7 месяцев назад

Thank you very much !!!!

@DanFlakes Год назад

Animations don't seem to work on Android bottom sheets, its just static

@vincenttogel1317 Год назад

First: Gerald, thank you for the great content. Second: do you know perhaps a workaround for SKLottieView on iOS (always fails to load animation) or if it is worked on? Thx

@jfversluis Год назад

Thank you Vincent! Check the repository if there is an issue about it and if it's being worked on

@morozovua 5 месяцев назад

Hi! What about splash screen, can I set lottie animation to splash screen? MauiSplashScreen

@PeterZhang-ru8ds Год назад

I have a listview control. I want to display each item from top to bottom. Can I do that?

@jfversluis Год назад

I’m not sure I understand

@Virang807 2 года назад

Did you put an issue for Base64 encoding problem? I did not see that in the SkiaSharp Issue list on GitHub

@jfversluis 2 года назад

Technically the maintainer of the library did, I was communicating with him directly for the debugging: github.com/mono/SkiaSharp/issues/2173

@Virang807 2 года назад

@@jfversluis Awesome! Hopefully this gets fixed soon because this is an awesome library nonetheless

@robertperez9264 9 месяцев назад

Me funciona a la perfeccion, pero cuando quiero compilar en ios me da un error "clang++ salio con condigo 1" T.T ayuda

@jfversluis 9 месяцев назад

That error is the result of some other error. Dig through the logs to see what is going on

@luisnantes3864 Год назад

Hi, I wanted to ask how to finish an application using C# code, I'm in Maui, thanks, I watch your videos a lot

@nandosilvajunior Год назад

Great!!! To me was needed change the file property Built Action to MauiAsset.

@jfversluis Год назад

Ah glad that you figured that out, thanks for letting me know!

@user-auto4788 2 года назад

My computer is using an AMD processor 3700X. I am trying to develop maui. Can't run android emul, I can't follow your lecture Please tell me how to develop on amd processor

@jfversluis 2 года назад

As far as I know that should work :)

@nigelnaicker7948 Месяц назад

you have to use your local device

@tanakamawere 2 года назад

Hie there, what's up on the AdSense for MAUI front?

@jfversluis 2 года назад

It just works ™️?

@tanakamawere 2 года назад

@@jfversluis It doesn't. Can you make a video on that?

@jfversluis 2 года назад

@@tanakamawere I was planning on doing something on AdSense soon. And I’m pretty sure everything can work on .NET MAUI. Only the amount of work is different as you’ll probably have to implement more platform code yourself since not all plugins are available yet

@LeonoX97 Год назад

with it I could do a shimmer loading effect?

@jfversluis Год назад

If you can find or create a shimmer animation in Lottie, sure!

@LeonoX97 Год назад

@@jfversluis thank you

@jfversluis Год назад

You might want to have a look at this too: github.com/HorusSoftwareUY/Xamarin.Forms.Skeleton

@LeonoX97 Год назад

@@jfversluis thank you

@armansadeghi13345 Месяц назад

I want to know more about skiasharp

@ericritter46 День назад

confettiview!!

@Golden_games Год назад

can it work with maui splash screen too

@jfversluis Год назад

You can’t unfortunately. Not because of .NET MAUI, not all platforms support animated splash screens. The way around it is usually to have a very short static splash screen and then load a first page inside of the app that actually can animate and load your app from there

@Golden_games Год назад

@@jfversluis that was my first approach before I saw this. anyway thanks for the reply. and still waiting for the maui media player tutorial👍