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.使用 svga 组件加载svga文件

<l-svga src="/static/image/taskHall/signIn-bubble.svga" class="svga" ref="signinSvga1"></l-svga>

2.替换svga中的文字

this.$nextTick(()=>{// 要替换的文字let intro = this.rewardList[days].intro;this.$refs.signinSvga1.render((parser, player)=>{// 将text这个图层的文字进行替换player.setText({text:intro,color:"#fff",size:"30px"},"text");});
})

SVGA实现动画效果相关推荐

SVGA 礼物动画设计相关
1.1 什么是SVGA SVGA 是由 YY 团队开发出来的一种跨平台的开源动画格式,同时兼容 iOS / Android / Web.SVGA 除了使用简单,性能卓越,同时让动画开发分工明确,各自专 ...
微信小程序实现svga格式动画播放
现在微信小程序风靡大燥,很多软件公司和企业都针对小程序进行了各种开发,本着微信小程序简单易用,无需安装的特点,深受很多用户的喜爱. 当下又是直播行业的鼎盛时期,直播带货功能如今已经非常完善,那么,对于 ...
uniapp - 超详细实现播放 svg / svga 格式动画组件插件，用于直播间赠送礼物特效动画或项目动画特效较多的应用（新手小白保姆级教程，提供插件+详细运行示例+使用文档+注意事项+格式说明）
前言网上关于 uniapp 播放 svg / svga 格式动画的教程很乱,基本上全是 BUG 和各种不兼容,很难复制过来自己用. 本文实现了在 uniapp 项目中(完美兼容 H5 / App ...
Android开发——SVGA格式动画内容资源替换
Android开发--SVGA格式动画内容资源替换随着接触的项目类型越来越多,目前格式个样的炫酷动画也随之而来,既然原生动画实现起来复杂,且有一个快捷灵活的动画为何不用呢,那让我们来好好学习一下如何 ...
android 动画x轴旋转,Android Roate3dAnimation实现围绕y轴竖直方向或者绕x轴方向旋转的3d动画效果...
概要: ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Roate3dAnim ...
【骚气的动效】外发光涟漪波纹动画、向外辐射动画效果，通常用于地图上面某一个扩散点效果
第一种:两轮外发光叠加,第二轮外发光结束后再出现第一轮 /* 外发光动画.向外辐射动画效果 */$orangeColor: rgba(251, 193, 105, 0.6); %out-glow {& ...
模仿滴滴单车解锁的时候，从0%到90%的欺骗加载动画效果
/**欺骗加载动画效果-*/var text = '已解锁{value}%';var interval;var __fakeLoading = function (callback, time, pe ...
Javascript动画效果（四）
Javascript动画效果(四) 前面我们自己写了一个小小的关于js动画的插件,下面我们来使用之前的框架来完成我们想要的动画效果.我们经常在淘宝网中看到,鼠标经过某一图片时,该图片有从上滚出而又从下 ...
Android动画效果translate、scale、alpha、rotate详解
动画类型 Android的animation由四种类型组成 XML中 alpha 渐变透明度动画效果 scale 渐变尺寸伸缩动画效果 translate 画面转换位置移动动画效果 rotate 画面 ...

SVGA实现动画效果

案例

SVGA实现动画效果相关推荐

最新文章

热门文章