Build together, debug together. Join the community on Discord.→

Beautify your Apps with Lottie for Uno Platform

12 Aug 2022

While having animations in our apps is always a treat, implementing them without a hiccup can sometimes be challenging. Thankfully, Lottie enables us to very easily include beautiful and performant vector animations in our cross-platform apps. Even better yet, since Lottie animations are exported as JSON files, file sizes remain small and your animations can easily be resized, looped, and even interacted with without losing quality.

Let us go ahead and see how we can implement Lottie animations into our Uno Platform applications, whether you’re targeting iOS, Android, macOS, Linux, or even WebAssembly!

Prerequisites and Packages

On all Uno Platform targets, you’ll need the following package: Uno.WinUI.Lottie (for the LottieVisualSource). You can find the package by:

right-clicking on the project > Manage NuGet Packages > Search Uno.WinUI.Lottie

Implementing Lottie for Uno Platform

Feel free to follow along in your preferred IDE or test out Lottie implementation in Uno Playground.

Step 1

First thing we’ll want to do is add our XML namespace to the mainpage.

				
					<Page
    ...
    xmlns:winui="using:Microsoft.UI.Xaml.Controls"
	xmlns:lottie="using:Microsoft.Toolkit.Uwp.UI.Lottie"
    ...>

Step 2 - Update the source

On WASM, iOS, and macOS, you can put the Lottie .json files directly in a shared project folder (for example “Lottie/animation.json”) and set their Build action as Content.

On Android, Lottie .json files must be added to the Assets folder. To match the same path as for the other platforms, the file could be stored at “Assets/Lottie/animation.json”. Set its Build action to AndroidAsset.

To reference the animations in XAML, use the ms-appx: URI, in this case, ms-appx:///Lottie/animation.json.

				
					<winui:AnimatedVisualPlayer x:Name="player" AutoPlay="true">
            <lottie:LottieVisualSource UriSource="ms-appx:///Lottie/animation.json" />
        </winui:AnimatedVisualPlayer>

Step 3

Lottie animations are basically SVGs nested in a JSON file and can use scalable graphics. Make sure your animation fits your screen, by setting a HeightRequest and a WidthRequest.

Step 4

We can subscribe to AnimationFailed and AnimationLoaded events to react to potential issues (for example when loading an externally-hosted Lottie animation file).

To enable or disable the animation, we can use the IsAnimationEnabled property.

In addition, RepeatCount and RepeatMode allow us to control the repetition of the animation itself.

Step 5 - Run the application and see your animation come to life!

Learn More

Check out Platform CTO Jerome Laban at .NET Conf: Focus on MAUI discussing building rich Skottie animations for cross-platform .NET applications and learn more about how Skia-based Uno Platform targets are using Skottie to support Lottie animations and the contributions made by the Uno Platform to SkiaSharp and .NET Ecosystem.