Create Animations Very Easily With Lottie On UWP

Lottie is a tool created by Airbnb to bring quality animations into your native apps. In this article, I will show you how to use it in a Universal Windows Platform project.

Create animations in UWP 

Since UWP is a XAML based technology, you can create animations with the provided tools from Blend and Visual Studio.

The basic approach is to use storyboards, like WPF project for animating the UI.

The code for this type of animation looks like,

<Storyboard x:Name="MoveEllipse"
            AutoReverse="True">
    <DoubleAnimation Duration="0:0:1" To="717" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="ellipse" d:IsOptimized="True"/>
    <DoubleAnimation Duration="0:0:1" To="-415.5" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="ellipse" d:IsOptimized="True"/>
</Storyboard>

A second approach would be Composition API. Composition API is a Visual layer that sits between the Windows 10 XAML Framework and DirectX. You can draw shapes, images and animate them or apply some cool effects. This solution requires a little more work because the layer is lower level. The code for this type of animation looks like,

var animation = _compositor.CreateScalarKeyFrameAnimation();

var easing = _compositor.CreateLinearEasingFunction();
animation.InsertKeyFrame(0.0f, 0.0f);
animation.InsertKeyFrame(1.0f, 360.0f, easing);

animation.Duration = TimeSpan.FromMilliseconds(3000);
animation.IterationBehavior = AnimationIterationBehavior.Forever;

_visual.StartAnimation(nameof(_visual.RotationAngleInDegrees), animation);
_visual.CenterPoint = new Vector3(_visual.Size.X / 2.0f, _visual.Size.Y / 2.0f, 0);

Where the visual is the representation of the control (here the square) in a visual composition element, it can be a XAML control.

These two solutions are working very well to make quality UWP applications but this is not the most convenient way to work with for complex animations if you are not at ease with these principles. This is why I will present Lottie in this article.

Use Lottie to make complex animations very easily 

Lottie parses JSON files format to render animation from Adobe After Effects, an effects editor to create animations. This tool was initially available on iOS, Android and React but thanks to Windows developers' community work, Lottie is now available in a NuGet package called LottieUWP.

It supports Windows 10 from November Update (build 10586) and above.

You can make your own animation or you can get some from LottieFiles repository, note that you can bring your contribution to this.  

Configure new project

Ok, let’s start now by creating a new UWP project inside Visual Studio. Take care that your application minimum platform version is November Update so that you can use LottieUWP.

I am selecting the Blank app template and giving it a name (LottieAnimation).

First, go to NuGet packages manager and search for LottieUWP with the latest version (if NuGet did not find it, check Include prerelease option to see it).

Integrate an animation 

We are ready to render our application more fun with animations. This will be very simple. First, we need to bring an animation to the project. A Lottie animation is a JSON file, we can use LottieFiles web interface to search for animations.

Include your JSON files (your own or one downloaded) into your solution (I put them in the Assets folder for example) and don’t forget to change Build Action to Content, if you don’t do this Lottie will not find your animation file at runtime and the application will crash.

For example, let’s take this one: https://www.lottiefiles.com/128-around-the-world

Download it and extract the JSON file.

The strength of a Lottie animation is that you can load it from XAML and code and you can configure the animation like repeating it, the speed of the animation and more.

Open MainPage.xaml and add the following namespace in the Page definition:

xmlns:lottie="using:LottieUWP"

Now you can place your animation like a control in your XAML code.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <lottie:LottieAnimationView x:Name="PlaneAnimation"
                                    FileName="Assets/Plane.json"
                                    AutoPlay="True" />
</Grid>

Like any control, you can define width, height, alignment, etc…

If you run the application, you will see your animation running,

Awesome!

We can define animation’s speed from code behind (actually assigning this value declaratively from XAML is not very well supported),

public MainPage()
{
    this.InitializeComponent();
    PlaneAnimation.Speed = 3F;
}

If you run again the app, the animation’s speed will be increase. You can play with a few more properties for defining the animation’s behaviors.

public MainPage()
        {
            this.InitializeComponent();
            PlaneAnimation.Speed = 3F;                       // Speed of the animation
            PlaneAnimation.RepeatCount = 4;                  // By default at -1. Number of repetition of the animation.
            PlaneAnimation.RepeatMode = RepeatMode.Reverse;  // Sets the play mode when the animation plays again.
        }

You can also replay or launch the animation programmatically with the PlayAnimation method. For example, let’s add a button and another animation.

<StackPanel Grid.Row="0"
                    Orientation="Horizontal"
                    Background="{ThemeResource SystemControlHighlightAccentBrush}">
            <Button Content="Like this app"
                    x:Name="AnimationButton"
                    Margin="5, 5, 5, 5"
                    Click="AnimationButton_Click" />
            <lottie:LottieAnimationView x:Name="LaunchAnimation"
                                        FileName="Assets/like.json"
                                        Height="80"
                                        RepeatCount="2" />
        </StackPanel>

In the AnimationButton event.

private void AnimationButton_Click(object sender, RoutedEventArgs e)
        {
            LaunchAnimation.PlayAnimation();
        }

Now, the output of our application is shown below.


That’s it for this article. I hope you enjoyed it and hope that you will create cool UWP apps in the Microsoft Store. For more information about LottieUWP,  I would like to link you to the GitHub page.

And here is the link to the solution for this article.