直播礼物动画，可以这样使用这个库(1)

大家好我是辉子，遇到有用的东西就记录下来，关注 公众号: 【罗米笔记】，有更好的笔记会及时更新

今天先下介绍第一种在直播中使用动画，在观众刷礼物会播放各种炫酷的礼物特效。当我们拿到设计师的文件之后，就能进行业务逻辑的对接，svga动画可以在网上找，也可以让会ae的设计师制作。

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

演示基于vue3 , 实际上可以用在uni-app，如果有这样的需求的话。当然更好的是放在android/ios这样的效果更好

用法：npm i svga

import {Parser, Player} from 'svga'import {onMounted} from "vue";const parser = new Parser();onMounted(async () => {  const svga = await parser.load(new URL(      // 本地资源路径      `/src/assets/angel.svga`,      import.meta.url  ).href)  const player = new Player(document.getElementById('canvas'))  await player.mount(svga)  player.onStart = () => console.log('onStart')  player.onResume = () => console.log('onResume')  player.onPause = () => console.log('onPause')  player.onStop = () => console.log('onStop')  player.onProcess = () => {    if (player.totalFrames === player.currentFrame + 1) {      player.stop()    }  }  player.onEnd = () => {    player.clear()    parser.destroy()  }  // 开始播放动画  player.start()})​​​​​​​

<canvas id="canvas" style="width: 200px;"></canvas>

Github: https://github.com/svga/SVGAPlayer-Web-Lite