Lottie UWP 支持
Lottie UWP support
我在 iOS 和 UWP 上与 Lottie 一起尝试 Xamarin.Forms,现在我完全困惑了。因为我的 UWP 应用程序不显示动画,我搜索了一下,发现 Lottie 不支持 UWP。但是因为 Nuget 可以从我的 UWP 应用程序中引用,所以我查看了那个 Nuget 的描述,Lottie 团队写道,它是。
那么现在正确的是什么?如果支持 UWP,是否需要执行其他步骤?
这似乎是 nuget 描述中的 "typo",如果您查看 martijn00 的源代码,他绑定了 iOS 和 Android Lottie 本机库(不是网页版)
有一个 html/js 版本的 Lottie (lottie-web
),您可以通过 Xamarin.Forms' WebView
在 iOS、Android、UWP。
设置非常简单,您不需要任何自定义 packages/add-ins。只有一个 JavaScript 文件 (lottie.js
)、基于 json 的动画文件和一些简单的 html.
回复:https://github.com/airbnb/lottie-web
在 lottie-web
中使用本地文件的示例
将您的文件放在每个本地应用程序本地资源中,Android 的资产 (AndroidAsset
),iOS (BundleResource
) 的资源等...
├── lottie.html
├── lottie.js
└── lottieLogo.json
注意:这些文件应该pre-compressed/minimized最大加载效率
注意:您可以 "link" 它们来自单一来源,因此您实际上不会在整个解决方案中拥有多个副本。
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: "Whosebug",
});
var anim = bodymovin.loadAnimation(animation);
</script>
</body>
</html>
lottie.js
lottieLogo.json
- 你的Lottiejson动画数据文件
将 html、javascript 和 json 组合成一个字符串可以避免在处理本地文件时对各种 platforms/browsers 的 XMLHttpRequest/CORS 安全性 ( file://localhost/....
),否则每个平台的嵌入式浏览器控件设置必须mod'd。
注意:使用 .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 端口,我个人没有使用过,但应该可以添加自定义表单渲染器并将其集成到 martijn00 Xamarin.Forms Lottie 包装器以添加 UWP 支持:
https://github.com/azchohfi/LottieUWP
注意:您可能需要查看此端口的 Github 问题,因为似乎并非所有动画都受支持(?)并且还有其他未解决的问题...
Microsoft 已在 Windows 上正式支持 Lottie 的 UWP 应用程序。
https://github.com/windows-toolkit/Lottie-Windows
但是,尚不支持某些功能。您可以检查此 table 以查看您正在使用的功能是否已在 UWP 中得到支持:https://airbnb.io/lottie/supported-features.html
我在 iOS 和 UWP 上与 Lottie 一起尝试 Xamarin.Forms,现在我完全困惑了。因为我的 UWP 应用程序不显示动画,我搜索了一下,发现 Lottie 不支持 UWP。但是因为 Nuget 可以从我的 UWP 应用程序中引用,所以我查看了那个 Nuget 的描述,Lottie 团队写道,它是。
那么现在正确的是什么?如果支持 UWP,是否需要执行其他步骤?
这似乎是 nuget 描述中的 "typo",如果您查看 martijn00 的源代码,他绑定了 iOS 和 Android Lottie 本机库(不是网页版)
有一个 html/js 版本的 Lottie (lottie-web
),您可以通过 Xamarin.Forms' WebView
在 iOS、Android、UWP。
设置非常简单,您不需要任何自定义 packages/add-ins。只有一个 JavaScript 文件 (lottie.js
)、基于 json 的动画文件和一些简单的 html.
回复:https://github.com/airbnb/lottie-web
在 lottie-web
中使用本地文件的示例
将您的文件放在每个本地应用程序本地资源中,Android 的资产 (AndroidAsset
),iOS (BundleResource
) 的资源等...
├── lottie.html
├── lottie.js
└── lottieLogo.json
注意:这些文件应该pre-compressed/minimized最大加载效率
注意:您可以 "link" 它们来自单一来源,因此您实际上不会在整个解决方案中拥有多个副本。
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: "Whosebug",
});
var anim = bodymovin.loadAnimation(animation);
</script>
</body>
</html>
lottie.js
lottieLogo.json
- 你的Lottiejson动画数据文件
将 html、javascript 和 json 组合成一个字符串可以避免在处理本地文件时对各种 platforms/browsers 的 XMLHttpRequest/CORS 安全性 ( file://localhost/....
),否则每个平台的嵌入式浏览器控件设置必须mod'd。
注意:使用 .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 端口,我个人没有使用过,但应该可以添加自定义表单渲染器并将其集成到 martijn00 Xamarin.Forms Lottie 包装器以添加 UWP 支持:
https://github.com/azchohfi/LottieUWP
注意:您可能需要查看此端口的 Github 问题,因为似乎并非所有动画都受支持(?)并且还有其他未解决的问题...
Microsoft 已在 Windows 上正式支持 Lottie 的 UWP 应用程序。
https://github.com/windows-toolkit/Lottie-Windows
但是,尚不支持某些功能。您可以检查此 table 以查看您正在使用的功能是否已在 UWP 中得到支持:https://airbnb.io/lottie/supported-features.html