记录一次svga动画的使用-优快云博客

本文链接：https://blog.youkuaiyun.com/oldolder/article/details/133923433

本文讲述了在开发过程中使用SVGA替代Lottie解决iOS设备图片资源加载问题的经历，包括Lottie在iOS上的限制、如何将SVGA转换为base地址以及使用image-tool插件的实践过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在需求中，可能存在大量动画效果，在考虑实现效果时，因为某些原因选择了使用svga，简单记录下遇到的问题

首先最开始选择的是lottie，但是使用lottie时，如果有需要图片资源时，远程图片资源在ios是无法显示的，需要把路径改为base地址，后续觉得动画效果会越来越多，为了避免每次都去改json的图片地址，因此只能抛弃了这个方法，选择了svga

现在插件市场上选择了当前用的这款svga插件插件地址，
后来在使用时，发现在ios真机运行时，也是需要base地址的，但是此时只需要把svga文件转成base地址就可以识别，而不用像json文件那种改源文件

那么为了转base地址，就需要用到另一插件image-tool,
用这个插件，把后台返回的svga地址转成json，然后直接使用，就可以正常在ios上进行播放了

<svga :clearsAfterStop="false" canvasId="nms1" v-if="svgaUrl1 && fileType == 'svga'" :loops="1"
 @onFinished="onFinished" ref="svga" pageWidth