Lottie animations in UWP
Lottie is a library created by Airbnb team that parses animation created using Adobe’s After Effects and exported as json file using Bodymovin plugin.
The library was targeting iOS ,Android and React native initially, but thanks to the hard work of community developers a version for Xamarin and UWP is now also available.
If you don’t have any ready-made animation you can get some (and contribute as well) from LottieFiles large repository.
Note: LottieUWP supports Windows Build 10586+ (November Update) and above
Showing a ‘Lottie’ animation in a UWP application is fairly easy.
-Create a blank UWP application
-Include LottieUWP nuget package (don’t forget to check Include prerelease flag to see it)
-Include one or more .json file (your own or one downloaded from LottieFiles) representing the animations you want to play and, important, change Build Action to Content
-Add a LottieAnimationView control where you want the animation to appear, as example inside MainPage.Xaml
If you run the app you will see your animation playing endlessly
You can load an animation programmatically using different options, the most common one is probably via the SetAnimationAsync method that also allows you to provide a caching strategy optimization parameter that allows parsed and loaded animation to be cached for reuse.
Adding these lines into MainPage.xaml.cs constructor generates this output
If you want to have even more control, you can subscribe AnimatorUpdated event and inside event handler control the entire animation, in this example I make the animation play faster in the seconf half.
Cool isn’t it?
There’s not to much interesting to say about it, if you want more details you can check these links:
-#ifDef LottieUWP video on channel 9
Go animating!
