I was trying around with Lottie for Xamarin.Forms on iOS and UWP and now I am totally confused. Because my UWP App doesn't show the animations, i searched a little and found out, that UWP is not supported by Lottie. But because the Nuget is referencable from within my UWP App, I looked into the description of that Nuget and the Lottie Team wrote, that it is.
So what is now correct? And if UWP IS supported, are there additional steps needed to do?
That appears to be a "typo" in the nuget description, if you if look at the source code from martijn00, he bound the iOS and Android Lottie native libraries (not the web version)
There is a html/js version of Lottie (lottie-web) that you could use via a Xamarin.Forms' WebView on iOS, Android, UWP.
It is really easy to setup and you do not need any custom packages/add-ins. Just one JavaScript file (lottie.js), your json-based animation file, and some simple html.
re: https://github.com/airbnb/lottie-web
lottie-webPlace your files in each of native app local resources, Assets (AndroidAsset) for Android, Resources for (BundleResource) iOS, etc...
├── lottie.html
├── lottie.js
└── lottieLogo.json
Note: These files should be pre-compressed/minimized maximum loading efficiency
Note: You can "link" them from a single source so you do not actually have multiple copies across the solution.
<!DOCTYPE html>
<html style="width: 100%;height: 100%">
<head>
<script id="animData" type="application/json">
LottieJsonReplaceMe
</script>
<script>
LottieJavaScriptReplaceMe
</script>
</head>
<body style="background-color:#ccc; margin: 0px;height: 100%;">
<div style="width:100%;height:100%;background-color:#333;" id="lottie"></div>
<script>
var data = JSON.parse(document.getElementById('animData').innerHTML);
console.log("start:");
console.log(data);
console.log("end:");
var animation = bodymovin.loadAnimation({
container: document.getElementById('lottie'),
animationData: data,
renderer: 'svg/canvas/html',
loop: false,
autoplay: true,
name: "StackOverflow",
});
var anim = bodymovin.loadAnimation(animation);
</script>
</body>
</html>
Combining the html, javascript, and json into one string avoids the XMLHttpRequest/CORS security on the various platforms/browsers when dealing with local files (file://localhost/....), otherwise each platform's embedded browser control settings have to be mod'd.
Note: Using Xamarin.Essentials from .NetStd/Forms library to obtain a stream to the platform dependent readonly app contents and for the cache location to save the combine html (for repeated usage efficiently).
string html;
var htmlCachedFile = Path.Combine(FileSystem.CacheDirectory, "lottie.html");
#if DEBUG
if (File.Exists(htmlCachedFile)) File.Delete(htmlCachedFile);
#endif
if (!File.Exists(htmlCachedFile))
using (var htmlStream = await FileSystem.OpenAppPackageFileAsync("lottie.html"))
using (var jsStream = await FileSystem.OpenAppPackageFileAsync("lottie.js"))
using (var jsonStream = await FileSystem.OpenAppPackageFileAsync("data.json"))
{
var jsonReader = new StreamReader(jsonStream);
var json = jsonReader.ReadToEnd();
var jsReader = new StreamReader(jsStream);
var js = jsReader.ReadToEnd();
var htmlReader = new StreamReader(htmlStream);
var html1 = htmlReader.ReadToEnd();
var html2 = html1.Replace("LottieJavaScriptReplaceMe", js);
html = html2.Replace("LottieJsonReplaceMe", json);
File.WriteAllText(htmlCachedFile, html);
}
else
html = File.ReadAllText(htmlCachedFile);
webView.Source = new HtmlWebViewSource() { Html = html };
There is a Lottie port to C#/UWP, I have not used it personally, but it should be possible to add a custom Forms' renderer and integrate it into martijn00 Xamarin.Forms Lottie wrapper to add UWP support:
https://github.com/azchohfi/LottieUWP
Note: You might want to review the Github issues for this port as it appears not all animations are supported(?) and there are other outstanding issues...
Microsoft has officially supporting Lottie on Windows for UWP apps.
https://github.com/windows-toolkit/Lottie-Windows
However, certain features are not yet supported. You can check this table to see if the feature you are using is already supported in UWP: https://airbnb.io/lottie/supported-features.html
