![lottie]( "lottie")
通过lottie-web使用本地文件的例子将您的文件放在每个本地应用程序本地资源、Android 资源 (AndroidAsset)、iOS 资源 (BundleResource) 等中...├── lottie.html├── lottie.js└── lottieLogo.json注意:这些文件应该是预压缩/最小化的最大加载效率注意:您可以从单一来源链接"它们，因此您实际上不会在整个解决方案中拥有多个副本.Lottie.html<html style="宽度:100%；高度:100%"><头><script id="animData" type="application/json">LottieJson 替换我<脚本>LottieJavaScriptReplaceMe<body style="background-color:#ccc; margin: 0px;height: 100%;"><div style="width:100%;height:100%;background-color:#333;"id="lottie"></div><脚本>var data = JSON.parse(document.getElementById('animData').innerHTML);console.log("开始:");控制台日志(数据)；console.log("结束:");var 动画 = bodymovin.loadAnimation({容器:document.getElementById('lottie'),动画数据:数据，渲染器:'svg/canvas/html'，循环:假，自动播放:真实，名称: "StackOverflow",});var anim = bodymovin.loadAnimation(animation);</html>lottie.jshttps://github.com/airbnb/lottie-weblottieLogo.json您的 Lottie json 动画数据文件在处理本地文件时，将 html、javascript 和 json 组合成一个字符串可避免各种平台/浏览器上的 XMLHttpRequest/CORS 安全性 (file://localhost/....), 否则每个平台的嵌入式浏览器控件设置都必须修改.注意:使用 .NetStd/Forms 库中的 Xamarin.Essentials 获取流向平台相关的只读应用程序内容和缓存位置以保存组合 html(以便高效重复使用). 字符串 html;var htmlCachedFile = Path.Combine(FileSystem.CacheDirectory, "lottie.html");#if 调试if (File.Exists(htmlCachedFile)) File.Delete(htmlCachedFile);#万一如果 (!File.Exists(htmlCachedFile))使用 (var htmlStream = await FileSystem.OpenAppPackageFileAsync("lottie.html"))使用 (var jsStream = await FileSystem.OpenAppPackageFileAsync("lottie.js"))使用 (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);}别的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 问题，因为似乎并非所有动画都受支持 (?) 并且还有其他未解决的问题...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-webExample of using local files with 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.jsonNote: 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.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.jshttps://github.com/airbnb/lottie-weblottieLogo.jsonYour Lottie json animation data fileCombining 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 };Lottie UWP PortThere 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/LottieUWPNote: 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... 这篇关于洛蒂 UWP 支持的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 10-11 03:25