记录一次svga动画的使用

在需求中，可能存在大量动画效果，在考虑实现效果时，因为某些原因选择了使用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="342rpx" pageHeight="342rpx" :src="svgaUrl1"></svga>
<c-lottie class="lottie" v-if="jsonUrl && fileType == 'json'" ref="cLottieRef" :data='jsonUrl'
	@Complete="onComplete($event)" width="342rpx" height="342rpx" :loop="true"></c-lottie>

			async init() {
    
    
				const res = await -自己的请求 -
				if (res.event == 100) {
    
    
					if (res.data.skin) {
    
    
						this.fileType = res.data.skin.substring(res.data.skin.length - 4, res.data.skin.length)
						// 因为此时我这边有两种情况的文件（还有少量的json文件没有改成svga，所以两种情况都要处理）
						if (this.fileType == 'svga') {
    
    
							// 如果是svga 就需要转一下base
							this.toBase64(res.data.skin)
						} else {
    
    
							// json的话是我之前就已经改过源文件，放到远程了
							uni.request({
    
    
								url: res.data.skin,
								success: res => {
    
    
									this.jsonUrl = res.data
								}
							})
						}
					}
				}
			},
			// 转base操作
			async toBase64(url) {
    
    
				const newUrl = await uni.downloadFile({
    
    
					url
				})
				// pathToBase64 这个方法是image-tool里的方法，需要引入一下
				pathToBase64(newUrl.tempFilePath).then(res => {
    
    
					this.svgaUrl1 = res
				}).catch(err => {
    
    
					console.log(err)
				})
			},

效果如下：