Wrap Lottie in UWP Apps

NOTE: This is an example on how to achieve showing Lottie examples in a webview. In the future I will make a library with animation methods, loading, configuration, etc.

lottietransparent

What is all about?

The design of apps in Windows 10 it’s a bit Dark and Light world. At the beginning since Windows Phone 7 it was about performance and lack of resources and templates. All my icons were solid white in that age.

These days we can start using multicolor svg icons and also animations. The typical animations are about changing the opacity, position, scale, color but never the shape of an Element. In part is because it is not an easy work to do but there is an After Effects plugin+library that is the source of all this movement: Bodymovin

When I started to see flat animations vector based in several websites and after reading that were based on Bodymovin appeared to me Lottie which is a native version of this javascript library it get me a bet out of the game. The reason is because XAML is powerful but is not complete, it does not have the power to change shapes, grow lines, etc.

Testing Lottie files in Bodymovin

Lottie is only for Android and IOS, so in order to make it work in UWP the only way is make it work in a webview using Bodymovin, so first let’s get files.

There is a new website LottieFiles (I get to that with the issue Path animations from Tamás Deme)  containing the json animation files ready to work with Lottie. The first question here is are compatible, hopefully yes, at least the files I’ve tested.

Lottie Transparency

Now we have a file, for instance lottie logo json, I had to understand the logic of that file to make it transparent, first I make an screenshot and the color was RGB (0,209,193) after several trials I discovered the colors are written from 0 to 1, so 209/256 it is about 0.82 in this case the background is

{
  "ty": "fl",
  "fillEnabled": true,
  "c": { "k": [ 0, 0.82, 0.76, 1 ] },
  "o": { "k": 1 },
  "nm": "Fill 1"
},

Now to make it transparent I set the “0”: { “k” : 1 } to 0, easy to find, isn’t it?.

Html transparency and scrollbars

By default the Webview control make appear a vertical scrollbar and it is not transparent, to solve all that

<html style="width: 100%;height: 100%;overflow: hidden;">
...
<body style="background-color:transparent; margin: 0px;height: 100%;overflow: hidden;">

Take care of that, it might be useful for many situations.

The library

How do we place the Bodymovin library running on a UWP from the file. Well after several trials, I found you have to use ms-appx.web, but it was not working, so I was looking for a way to debug that. You can do that with the following:

debugscript

If you set the debugger to Script, you can debug the Webview until you find the correct path, in this case:

 <script src="ms-appx-web:///Data/bodymovin.js"></script>

Where the file is content and copy always. with all of that adjustments, the code will look like:

<!DOCTYPE html>
<html style="width: 100%;height: 100%;overflow: hidden;">
<head>
    <script src="ms-appx-web:///Data/bodymovin.js"></script>
</head>
<body style="background-color:transparent; margin: 0px;height: 100%;overflow: hidden;">
<div style="width:100%;height:100%;background-color:transparent" id="bodymovin"></div>
<script>
        var animData = { container: document.getElementById('bodymovin'), renderer: 'svg', loop: true, autoplay: true, animationData: animationdata };
        var anim = bodymovin.loadAnimation(animData);
    </script>
</body>
</html>

In next versions, I will make the code with configuration about when to start, looping, etc.

 The Webview

This part is piece of cake, what I did is replace the parameter in ‘animdata’ with the json. In theory is possible to read as src, but at the moment cannot make it work.

private async void InitializeLottie()
{
    var html = await BMManager.GetTemplate();
    var jsonuri = "ms-appx:///Data/lottie_logo_1.json";
    var data = await BMManager.ReadData(jsonuri);
    html = html.Replace("animationdata", data);
    WebView web = new WebView { DefaultBackgroundColor = Colors.Transparent };
    LayoutRoot.Children.Add(web);
    await Task.Delay(1000);
    web.NavigateToString(html);
}

With that after loading the page you will have the cool animation on your app!.

So here is a base to add svg animations into a UWP app.

Next Steps

There are plenty of steps to do from here, testing more jsons, making Composition animations with the webview to view how it behaves (pixilation, flickering). Making a complete library with animation control, etc.

Source code

You can download and try the example:  github-mark-64px

In my case, I’m using Windows 10, 15031. If it works also in your mobile, please share if it works, thank you @juanpaexpedite

If you find it useful, help me to continue, Tips welcome, it really helps!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s