在 xamarin.forms 中应用动画

Posted 2023-03-25

【中文标题】在 xamarin.forms 中应用动画

【英文标题】：Applying animation in xamarin.forms

【发布时间】：2018-11-05 06:08:04

【问题描述】：

有什么方法可以实现动画 https://codemyui.com/circular-water-fill-loading-animation/ 在 Xamarin.forms 中？

【问题讨论】：

您可以查看 Lottie airbnb.design/lottie 和 Xamarin 包装器 github.com/martijn00/LottieXamarin 来处理 svg 动画。如果不是，恐怕您将不得不自己编写代码。也许在 SkiaSharp docs.microsoft.com/en-us/xamarin/graphics-games/skiasharp

的帮助下

Lottie 可以通过将控件包装到 Xamarin Forms 用于 android、ios（可能还有 UWP）的 Xamarin Forms。但是 Lottie.SkiaSharp 会很棒。

【参考方案1】：

有什么办法可以像...一样实现动画

简短的回答是；是的。

更长的答案；这取决于你真正需要什么，只有你能回答。

“快速方法”（至少对我而言）是使用 Xamarin.Forms 的 WebView 并将 html/svg/css/JScript 嵌入到本机应用程序项目中，并设置一个 javascript 界面来控制完成百分比（ water.style.transform 元素）。

https://developer.xamarin.com/samples/xamarin-forms/WorkingWithWebview/

当然，您可以使用 SkiaSharp、Lottie 等重新实现它，并创建一个跨平台的 Forms 控件，或者将其实现为每个平台上的“本机”控件。

注意：我是 Lottie 的忠实粉丝，我个人会采用这种方法，但他们不支持原生 UWP。目前支持 iOS、Android、Web。

我在您链接到的 PEN 示例上编辑了颜色等，并将 html/js/css 添加到 Forms 的解决方案中，设置了 JS 界面，结果在 Forms 的 WebView（iOS 的 UIWebView 和 Android 的WebView，未测试 UWP Edge，但应该可以正常工作）：

【参考方案2】：

Lottie 是我的首选，但您可以将动画与 Nuget XamAnimation 一起使用。它最难创造，但它也很好。