Corrado's Blog 2.0

Online thoughts of a technology funatic

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) 

Capture1

-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

Capture

-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 Smile

lottie1

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

lottie2

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.

lottie3

Cool isn’t it? Winking smile

There’s not to much interesting to say about it, if you want more details you can check these links:

-LottieUWP github repository

-#ifDef LottieUWP video on channel 9

Go animating!