一. SVGA介绍

​SVGA 是一种跨平台的开源动画格式,同时兼容 iOS / Android / Web。SVGA 除了使用简单,性能卓越,同时让动画开发分工明确,各自专注各自的领域,大大减少动画交互的沟通成本,提升开发效率。动画设计师专注动画设计,通过工具输出 svga 动画文件,提供给开发工程师在集成 svga player 之后直接使用。动画开发从未如此简单!SVGA 除了使用简单,性能卓越,同时让动画开发分工明确,各自专注各自的领域,大大减少动画交互的沟通成本,提升开发效率。

二.安装我们需要的依赖

三、使用

首先我们约定好forKey。forKey会控制我们的文本和图片需要放在svga动画的什么位置
 如果是需要圆形图片要做下处理

  播放svga动画的函数

根据自己使用的场景,我目前场景是进场动画(所以我监听用户进来的id、如果只播放一次可以放在mounted生命周期中调用

注: forKey就是之前约定好的

  • setText(text: string | {text: string, family: string, size: string, color: string, offset: {x: float, y: float}}, forKey: string); - 设定动态文本
  • setImage(image: string, forKey: string, transform: [a, b, c, d, tx, ty]); 设定动态图像, transform 是可选的, transform 用于变换替换图片

四.SVGA的属性和方法

SVGA中文文档

五.制作不易,点个赞再走吧

Logo

技术共进,成长同行——讯飞AI开发者社区

更多推荐