uniapp中使用svga动画

1、首先什么是svga动画
SVGA（http://svga.io/index.html）是一种跨平台的开源动画格式，同时兼容 iOS / Android / Flutter / Web。
SVGA 除了使用简单，性能卓越，同时让动画开发分工明确，各自专注各自的领域，大大减少动画交互的沟通成本，提升开发效率。动画设计师专注动画设计，通过工具输出 svga 动画文件，提供给开发工程师在集成 svga player 之后直接使用。
更直观的svga动画可以看直播间内老铁给主播刷礼物的特效

这里提供一个SVGA动画预览网站
需要本地svga文件拖入，即可查看动画效果

2、本次开发需求是基于uniapp平台，所以在此记录
uniapp插件市场提供了一个 lime-svga 插件 (https://ext.dcloud.net.cn/plugin?id=8134)
按照插件使用方法，一般推荐使用方法二
使用步骤如下：

<view class="content" style="height: 750rpx"><l-svga ref="svga"></l-svga>
</view>

需要给容器设置高度，不然动画会显示不出来

在 onReady 生命周期里获取svga容器对象

this.$refs.svga.render(async (parser, player) => {const videoItem = await parser.load("https://static-6d65bd90-8508-4d6c-abbc-a4ef5c8e49e7.bspapp.com/static/angel.svga");await player.setVideoItem(videoItem);// 设置当前动画的循环次数，0代表无限循环 默认 0player.loops = 1// 设置动画缩放模式，可选值为 Fill / AspectFill / AspectFitplayer.setContentMode(() => {contentMode: 'Fill' })// 开始播放动画，reverse = true 时则反向播放。player.startAnimation()// 监听动画进度player.onPercentage((percentage)=> {// 由于有动画未完成时需要显示其他效果的需求，所以监听动画播放进度// svga动画播放进度大于 70% 时，显示卡牌if(percentage*100 > 70) {this.svgaShow = false}})// 监听动画完成player.onFinished(() => {console.log('动画结束')})
})

其他属性
Player

loop=0 设置当前动画的循环次数，0代表无限循环
clearsAfterStop = true 属性，为 true 时，表示动画停止播放后默认清空画布。
fillMode = "Forward" 属性，为 Forward 时，表示动画播放结束后保留在最后一帧。为 Backward 时，表示保留在第一帧。
async setVideoItem(videoItem?: VideoEntity): Promise<any> 设置需要播放的 VideoEntity 动画实体
setContentMode(contentMode: string) 设置动画缩放模式，可选值为 Fill / AspectFill / AspectFit。
startAnimation(reverse: boolean = false) 开始播放动画，reverse = true 时则反向播放。
startAnimationWithRange(range: Range, reverse: boolean = false) 开始播放动画，在指定 Range 内播放。
pauseAnimation() 暂停播放动画。
stopAnimation(clear?: boolean) 停止播放动画，当 clear 为 true 时，清空画布。
clear() 清空画布
stepToFrame(frame: number, andPlay: boolean = false) 跳转动画的指定帧，andPlay 为 true 时，从该帧开始播放动画。
stepToPercentage(percentage: number, andPlay: boolean = false) 跳转动画的指定进度百分比，andPlay 为 true 时，从该帧开始播放动画。
async setImage(src: Uint8Array | string, forKey: string): Promise<any> 使用图片替换指定元素
setText(dynamicText: DynamicText, forKey: string) 添加文本到指定元素上
clearDynamicObjects() 清空所有替换元素。
onFinished(callback: () => void) 监听动画完成
onFrame(callback: (frame: number) => void) 监听动画播放过程中，当前帧的变化。
onPercentage(callback: (percentage: number) => void) 监听动画播放过程中，当前进度的变化。

uniapp中使用svga动画相关推荐

H5 中使用SVGA 动画
一.html有支持SVG的标签,但是不支持SVGA 二.怎么做? 用的是开源的 https://gitcode.net/mirrors/svga/SVGAPlayer-Web/-/blob/maste ...
uni-app中自定义图表（canvas实现chart图表）开发篇（5）-圆环进度条添加动画效果
这里增加一篇介绍下进度条动画效果如何添加,前几篇的进度值被修改后,切换效果比较生硬.另外也在第四篇基础上,对图形略作修改.在查看uniapp文档时,没有发现重绘执行函数,小程序中有Canvas.req ...
vue 项目中使用svga格式动画图标效果 incorrect header check解决办法
1. 什么是SVGA SVGA 是一种跨平台的开源动画格式,同时兼容 iOS / Android / Web.SVGA 除了使用简单,性能卓越,同时让动画开发分工明确,各自专注各自的领域,大大减少动画 ...
ajax 导致 css 延迟_在H5，小程序，uni-app中使用animate.css
动画过渡效果对于程序的重要性是毋容置疑的,过渡动画的流畅真的能给人一种程序很顺畅的感觉.ios系统基本上不管是什么操作都喜欢运用动画过渡,所以给人一种超流畅的感觉!在项目中我们也会经常被要求在元素切换 ...
uniapp中隐藏Android虚拟按键
前言: uniapp中如何隐藏Android虚拟按键 (如下图) 解决: 通过h5-plus中的方法,plusready 后调用 https://www.html5plus.org/doc/zh_cn ...
AEJoy —— 详解 AE 如何将 png 序列帧导出为 SVGA 动画文件
效果预览我在 PC 上用 OpenGL 实现了一个 svga 预览的程序 "闪烁"是原序列帧设计的问题 1.导入 png 序列帧至AE 从菜单栏 "导入" - ...
如何在uni-app中选择一个合适的UI组件库
uni-app框架转眼已经发布了一年多,使用uni-app的开发者也是与日俱增.因为uni-app是一个跨端框架,所以我们大多使用它就是为了同时一套代码跨多端,选择uni-app 可以算是眼下一个比较 ...
svga文件预览_SVGA文件格式——SVGA动画制作和文件转换
什么是SVGA SVG,它的英文全称为Scalable Vector Graphics,即可伸缩矢量图形. SVGA,就是Scalable Vector Graphics Animetion,即可伸缩 ...
uni-app中，小程序或h5页面背景音乐的播放与暂停
在uni-app中写小程序或h5页面时,用到背景音乐,以及图标的旋转动画一.创建music.js 放在static或新建文件夹 const bgm = uni.createInnerAudioCon ...

uniapp中使用svga动画

uniapp中使用svga动画相关推荐

最新文章

热门文章