ios - 如何像 Viber 一样在我的 iOS 应用程序中播放 SVG 动画贴纸？

Question

如何像 Viber 一样在我的 iOS 应用程序中播放 SVG 动画贴纸？

如果您不熟悉 Viber，可以在以下链接中查看来自 Viber 应用程序的 SVG 动画贴纸示例:

http://www.tbyrne.org/viber-animated-svgs

注意:我使用 Xamarin 框架在 C# 中开发我的应用程序，但任何原生(Swift、Objective-C)解决方案也不错。

谢谢

Answer 1

注意:您链接的网站已关闭/没有响应，所以我不知道那些 SVG 文件是什么样的

最快的方法是将 UIWebView 嵌入到您的应用程序中，然后您可以加载本地(嵌入资源)或远程 SVG。它们可以包装在 html 中并使用基于 JavaScript 的动画技术、CSS 动画或基于 SVG/SMIL 的动画:

即:

WebView.LoadRequest(new NSUrlRequest(new NSUrl("https://imgh.us/LoveDota.svg")));

根据您应用的要求和您使用的 SVG，这将是包含动画 SVG 的最快方式。将 UIWebView 嵌入到任何 View 和/或控件的 subview 中的能力非常有效。由于您可以访问 DOM，因此可以即时操作 SVG。

在 iOS WebKit 中播放的 LoveDota.svg:

我建议将 SVG 内容包装在一个 html 文件中，这样您就可以控制缩放比例，将 Javascript 事件回调添加到您的应用程序中，等等...

注意:如果您需要快速测试内容并将其适合您的 UIWebView，请设置 ScalesPageToFit 属性:

WebView.ScalesPageToFit = true;

“较慢”，需要编码:-)，方法是使用很棒的 SVGKit通过 sharpie 绑定(bind)项目进行项目。它不直接支持 SVG 动画，但取决于您用于 SVG 动画开发的工具集，导出 SVG 并使用 SVGKit 输出一系列 CoreAnimation layers 很棒，让你远离使用 WebKit(及其 SVG 交互式 DOM 事件怪癖)。

Xamarin 的 SpriteKit 示例之上的动画 SVG 进度条: