svga-前端如何使用svga动画
前言
今天由于公司开发的直播间有发送礼物的需求,这里由于svga动画相对于gif图更加可控,所以使用svga动画,现在做个记录
正文
定义
SVGA(http://svga.io/index.html) 是一种跨平台的开源动画格式,同时兼容 iOS / Android / Flutter / Web。
SVGA 除了使用简单,性能卓越,同时让动画开发分工明确,各自专注各自的领域,大大减少动画交互的沟通成本,提升开发效率。动画设计师专注动画设计,通过工具输出 svga 动画文件,提供给开发工程师在集成 svga player 之后直接使用。使用
添加
const SVGA = require('svgaplayerweb');
或import SVGA from 'svgaplayerweb'
; 至 xxx.js<div id="demoCanvas" style="styles..."></div>
var player = new SVGA.Player('#demoCanvas'); var parser = new SVGA.Parser('#demoCanvas'); // 如果你需要支持 IE6+,那么必须把同样的选择器传给 Parser。 parser.load(`${你的svga文件路径}`, function(videoItem) {player.setVideoItem(videoItem);player.startAnimation(); })
这三步就可实现svga动画播放了,如果要使用其他属性,比如只循环播放一次
player.loops=1
,点击暂停播放动画player.pauseAnimation()
,具体请参见第四步 其他属性操作SVGA.Player
SVGA.Player 用于控制动画的播放和停止
Properties
- int loops; - 动画循环次数,默认值为 0,表示无限循环。
- BOOL clearsAfterStop; - 默认值为 true,表示当动画结束时,清空画布。
- string fillMode; - 默认值为 Forward,可选值 Forward / Backward,当 clearsAfterStop 为 false 时,Forward 表示动画会在结束后停留在最后一帧,Backward 则会在动画结束后停留在第一帧。
Methods
- constructor (canvas); - 传入 #id 或者 CanvasHTMLElement 至第一个参数
- startAnimation(reverse: boolean = false); - 从第 0 帧开始播放动画
- startAnimationWithRange(range: {location: number, length: number}, reverse: boolean = false); - 播放 [location, location+length] 指定区间帧动画
- pauseAnimation(); - 暂停在当前帧
- stopAnimation(); - 停止播放动画,如果 clearsAfterStop === true,将会清空画布
- setContentMode(mode: “Fill” | “AspectFill” | “AspectFit”); - 设置动画的拉伸模式
- setClipsToBounds(clipsToBounds: boolean); - 如果超出盒子边界,将会进行裁剪
- clear(); - 强制清空画布
- stepToFrame(frame: int, andPlay: Boolean); - 跳到指定帧,如果 andPlay === true,则在指定帧开始播放动画
- stepToPercentage(percentage: float, andPlay: Boolean); - 跳到指定百分比,如果 andPlay === true,则在指定百分比开始播放动画
- setImage(image: string, forKey: string, transform: [a, b, c, d, tx, ty]); - 设定动态图像, transform 是可选的, transform 用于变换替换图片
- setText(text: string | {text: string, family: string, size: string, color: string, offset: {x: float, y: float}}, forKey: string); - 设定动态文本
- clearDynamicObjects(); - 清空所有动态图像和文本
Callback Method
- onFinished(callback: () => void): void; - 动画停止播放时回调
- onFrame(callback: (frame: number): void): void; - 动画播放至某帧后回调
- onPercentage(callback: (percentage: number): void): void; - 动画播放至某进度后回调
SVGA.Parser
SVGA.Parser 用于加载远端或 Base64 动画,并转换成 VideoItem。
跨域的 SVGA 资源需要使用 CORS 协议才能加载成功。
如果你需要加载 Base64 资源,或者 File 资源,这样传递就可以了
load(File)
或load('data:svga/2.0;base64,xxxxxx')
。Methods
补充
像直播发送礼物存在多个礼物动画,建议只加载一个player,发送不同礼物时,替换svga路径即可
扩展
svga-前端如何使用svga动画相关推荐
- svga文件预览_Android动画SVGA的使用
一.前言 在开发APP的过程中,需要在APP中实现设计同学的UE效果动画,一般都是通过代码实现的,当对于较复杂的动画时,例如直播中刷礼物时的动画,这时利用代码实现会比较复杂.而且Android和iOS ...
- 从零开始学前端:过渡和动画 --- 今天你学习了吗?(CSS:Day20)
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:flex布局 - 今天你学习了吗?(CSS:Day19) 文章目录 从零开始学前端:程序猿小白也可以完全掌 ...
- 前端解放生产力之–动画(Adobe Effects + bodymovin + lottie)
大概很久很久以前,2017年,参加了第二届中国前端开发者大会(FDCon2017),除了看了一眼尤雨溪,印象最深刻的就是手淘渚薰分享的关于H5交互的内容了.时光荏苒,最近再次接触,简单回顾一下. 示例 ...
- svga插件_【SVGA扩展】在AE或Animate中导出SVGA文件的设计师工具(mac+win)及安装教程...
SVGA扩展 – 在AE或Animate中导出SVGA文件的设计师工具 什么是SVGA SVGA 是一种全新的古文字体歌曲音乐swf转换,华为ipad华为ipad手机手机省电模式古风字体播放体验,SV ...
- 前端css动画_很棒的前端资源和CSS动画课程
前端css动画 This is the editorial from our latest HTML/CSS Channel newsletter, you can subscribe here. 这 ...
- 【HTML网页前端开发加载动画案例】
提示:如需转载请联系作者授权才可使用. 目录 前言 一.网页加载动画是什么? 二.案例教学 1.HTML 当我们将css基础操作先做好之后,发现网页并不能完美对应大小,那么我们可以在基础代码定义块内做 ...
- 前端插件 -- WOW.js动画插件
WOW.js动画插件 有的页面在向下滚动的时候,有些元素会产生细小的动画效果.比如需要做到滚动条滑到某个位置时,才能显示动画.wow.js 依赖 animate.css,所以它支持 animate.c ...
- 【前端】移动互联动画
目录 一.CSS动画 (一)2D动画 (二)transition过渡动画 (三)animation动画 (四)3D动画 二.jQuery (一)基础用法 (1)网页中的使用 (2)jQuery使用方法 ...
- 用前端技术实现2d动画和特效(canvas)
1. 作品展示 下面是我实现的一个粒子效果,粒子在区域内随机生成并随机移动 参考代码 采用原生的h5 + css + js实现 2. 原理 何为动画?连续的画面显示就是动画,特效也可以理解为动画. 浏 ...
- 前端开发_HTML5_CSS部分-动画特效(animation)
动画特效(animation) 1.引入 我们之前学习了过渡的特效,那么接下来我们一起来学习一下另一种比较特殊的特效动画. 2.动画特效(animation) (1).概述:CSS 可使用animat ...
最新文章
- 【ACM】连续出现的字符
- V8 —— 你需要知道的垃圾回收机制
- JAVA-封装-静态属性
- 老手机能升级华为鸿蒙,华为正式发布鸿蒙2.0!实现手机、平板等多平台共用一套代码!...
- UVA11019 Martix Matcher --- AC自动机
- 理解大型分布式网站你必须知道这些概念
- html免费天气预报代码,免费自我定制天气预报代码
- 阿里云 远程 mysql_阿里云 远程mysql
- qt为lineedit添加背景图片代码_Qt中事件的理解(2)
- 补办毕业、学历证明流程
- 数学分析第四版上册70页14题
- 多个excel工作簿合并_Excel应用实践14:合并多个工作簿中的数据—示例3
- SAP中生产返工中单独的作业返冲处理分析测试
- Vue复刻华为官网 (二)
- codeforces 1526C1 Potions (Easy Version)
- 索氏提取器使用注意_索氏提取法注意事项
- Mysql ESCAPE 用法
- android百度地图小人头像怎么做,出包女王村雨静-小静-Murasame Oshizu-头像图片-资料介绍-acg人物点评...
- Adobe Acrobat DC 2022 直装版
- EDVR复现过程中的Segmentation Fault及Vimeo-90k数据集的百度盘下载