直播礼物动画，可以这样使用这个库(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: github.com/svga/SVGAPl…