SVGA实现动画效果

SVGA就是美工设计一个动画效果，导出为svga文件，我们可以通过代码修改里面指定图层的图片或文字。 用处：更方便的实现动画效果。

SVGA分析网址： SVGA

uniapp的插件市场中已经有人帮我们将这个功能封装成了插件。  vue项目中也有相应的JS工具，使用非常方便。

这里使用的是：lime-svga 这个插件。

首先引入svga文件

<view class="svga-box" style="width: 900rpx; height:900rpx;">
    <l-svga ref="svgacom" src="https://aaaaa/svgaDemo%20.svga"></l-svga>
</view>

在mounted中替换里面的文字：

mounted() {
	this.$refs.svgacom.render((parser, player) => {
		player.setText({text:"HelloWorld",color:"#fff",size:"20px"},"text1");
	});
},

参数一是替换的文字，参数二指定key（这个key就是对应的图层名称，需要找美工要） 替换的文字是一个对象，指定了文字内容，颜色，大小，也可以使用family指定字体。

案例

1