【问题标题】：Lottie UWP support洛蒂 UWP 支持
【发布时间】：2019-04-17 21:53:33
【问题描述】：

我在 iOS 和 UWP 上尝试使用 Lottie for Xamarin.Forms，现在我完全糊涂了。因为我的 UWP 应用程序没有显示动画，所以我搜索了一下，发现 Lottie 不支持 UWP。但是因为 Nuget 可以在我的 UWP 应用程序中引用，所以我查看了对 Nuget 的描述，Lottie 团队写道，确实如此。

那么现在什么是正确的？如果支持 UWP，是否需要执行其他步骤？

【问题讨论】：

希望this 会有所帮助。

标签： c# xamarin xamarin.forms uwp lottie

【解决方案1】：

这似乎是nuget描述中的“错字”，如果您查看martijn00的源代码，他绑定了iOS和Android Lottie原生库（不是网络版）

有一个 html/js 版本的 Lottie (lottie-web)，您可以在 iOS、Android、UWP 上通过 Xamarin.Forms'WebView 使用它。

设置非常简单，您不需要任何自定义包/插件。只需一个 JavaScript 文件 (lottie.js)、基于 json 的动画文件和一些简单的 html。

回复：https://github.com/airbnb/lottie-web

使用`lottie-web`的本地文件示例

将您的文件放置在每个本机应用本地资源、Android 的资产 (AndroidAsset)、iOS 的资源 (BundleResource) 等中......

├── lottie.html
├── lottie.js
└── lottieLogo.json

注意：这些文件应该预先压缩/最小化最大加载效率

注意：您可以从单一来源“链接”它们，这样您实际上不会在整个解决方案中拥有多个副本。

Lottie.html

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

lottie.js

https://github.com/airbnb/lottie-web

lottieLogo.json

您的 Lottie json 动画数据文件

在处理本地文件（file://localhost/....）时，将 html、javascript 和 json 组合成一个字符串可以避免各种平台/浏览器上的 XMLHttpRequest/CORS 安全性，否则必须修改每个平台的嵌入式浏览器控制设置.

注意：使用 .NetStd/Forms 库中的Xamarin.Essentials 获取到依赖于平台的只读应用程序内容的流以及用于保存组合 html 的缓存位置（以有效地重复使用）。

    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 };

Lottie UWP 端口

C#/UWP 有一个 Lottie 端口，我个人没有使用过，但应该可以添加自定义 Forms 的渲染器并将其集成到 martijn00 Xamarin.Forms Lottie 包装器中以添加 UWP 支持：

https://github.com/azchohfi/LottieUWP

注意：您可能需要查看此端口的 Github 问题，因为似乎并非所有动画都受支持（？）并且还有其他未解决的问题...

【讨论】：

你有这方面的例子吗？
您将 html/js/json 文件添加到您的本机项目，就像 Xamarin WebView“加载本地内容”示例引导您完成：docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/…
所以经过多次尝试和错误，我仍然无法让它工作。我添加了WebView 并按照描述进行设置，添加了一个Html，这似乎有效，因为我看到了背景，但没有显示动画。

【解决方案2】：

Microsoft 已正式在 Windows 上为 UWP 应用程序支持 Lottie。

https://github.com/windows-toolkit/Lottie-Windows