svga-前端如何使用svga动画

• 前言

  今天由于公司开发的直播间有发送礼物的需求，这里由于svga动画相对于gif图更加可控，所以使用svga动画，现在做个记录

• 正文

  定义

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

  使用

  1. 导入
  • 预编译 JS

  添加 <script src="https://cdn.jsdelivr.net/npm/svgaplayerweb@2.3.1/build/svga.min.js"></script> 到 your.html 页面

  • NPM
    npm install svgaplayerweb --save

  添加 const SVGA = require('svgaplayerweb'); 或 import SVGA from 'svgaplayerweb'; 至 xxx.js

  2. 添加 Div 容器

  <div id="de