代码之家 › 专栏 › 技术社区 › DirtyNative

洛蒂UWP支持

lottie uwp xamarin.forms xamarin c#

0

DirtyNative · 技术社区 · 7 年前

我曾和洛蒂一起尝试过Xamarin.Forms的iOS和UWP,现在我完全困惑了。因为我的uwp应用程序没有显示动画,我搜索了一点发现,uwp不支持lottie。但由于nuget是可从我的uwp应用程序中引用的,我查看了nuget的描述,洛蒂团队写道,它是。

那么现在什么是正确的呢?如果支持UWP,是否需要执行其他步骤?[答:]有点发现,乐蒂不支持UWP。但是因为nuget是可以从我的uwp应用程序中引用的,我研究了nuget的描述,洛蒂团队写道,确实如此。

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

1 回复 | 直到 7 年前

1

SushiHangover 7 年前

这在nuget描述中似乎是一个“打字错误”,如果你看一下martijn00的源代码,他绑定了iOS和android lottie本机库(不是web版本)。

有一个HTML/JS版本的lottie( lottie-web )可以通过xamarin.forms使用 WebView 在iOS、Android、UWP上。

它非常容易设置,并且您不需要任何自定义包/外接程序。只有一个javascript文件( lottie.js ,您的基于JSON的动画文件和一些简单的HTML。

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

使用本地文件的示例 `洛蒂网`

将您的文件放在每个本地应用程序资源、资产中( AndroidAsset )对于Android,资源( BundleResource iOS等。

âââ lottie.html
âââ lottie.js
âââ lottieLogo.json

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

注意:您可以从一个源“链接”它们,这样就不会在整个解决方案中有多个副本。

L.T.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>

洛杉矶

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

洛蒂洛戈

您的lottie json动画数据文件

在处理本地文件时,将HTML、javascript和JSON组合成一个字符串可避免不同平台/浏览器上的xmlhttprequest/cors安全性。( file://localhost/.... 否则,每个平台的嵌入式浏览器控件设置必须是mod'd。

注:使用 Xamarin.Essentials 从.netstd/forms库获取流到依赖于平台的只读应用程序内容,以及缓存位置以保存合并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 };

洛蒂UWP端口

有一个到c/uwp的lottie端口,我没有亲自使用它,但应该可以添加自定义表单的呈现器并将其集成到martijn00 xamarin中。表单lottie wrapper添加uwp支持:

https://github.com/azchohfi/LottieUWP

注意:您可能希望查看此端口的GitHub问题,因为似乎不支持所有动画(?)还有其他悬而未决的问题…

洛蒂UWP支持

使用本地文件的示例 洛蒂网

L.T.HTML

洛杉矶

洛蒂洛戈

洛蒂UWP端口

使用本地文件的示例 `洛蒂网`