Lottie UWP支持

时间：2018-11-14 20:53:32

标签： c# xamarin xamarin.forms uwp lottie

我在iOS和UWP上尝试使用Lottie for Xamarin.Forms，现在我感到非常困惑。由于我的UWP应用程序不显示动画，因此我进行了一些搜索后发现，Lottie不支持UWP。但是因为Nuget在我的UWP App中是可引用的，所以我仔细研究了Nuget和Lottie团队写的描述。

enter image description here

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

2 个答案:

答案 0 :(得分：1)

在nuget描述中这似乎是一个“错别字”，如果您看一下martijn00的源代码，他就绑定了iOS和Android Lottie本机库（不是Web版本）

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

这真的很容易设置，并且您不需要任何自定义软件包/加载项。仅有一个JavaScript文件（lottie.js），基于json的动画文件和一些简单的html。

re：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

lottieLogo.json

  • 您的Lottie json动画数据文件

将html，javascript和json组合为一个字符串可避免在处理本地文件（file://localhost/....）时各种平台/浏览器上的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问题，因为似乎并非所有动画都受支持（？），并且还有其他未解决的问题...

答案 1 :(得分：0)

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

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

但是，某些功能尚不支持。您可以查看此表以查看UWP是否已支持您使用的功能：https://airbnb.io/lottie/supported-features.html

相关问题
最新问题