Svga动画

2022-06-30 21:51:09
2024-07-22 09:27:02

官方文档

http 复制代码
https://www.npmjs.com/package/svga.lite

安装命令

shell 复制代码
npm i svga.lite -S

在需要的组件导入

js 复制代码
import { Downloader, Parser, Player } from "svga.lite";
const downloader = new Downloader();
const parser = new Parser({ disableWorker: true });

视图

vue 复制代码
<canvas
        class="ticket"
        id="canvas1"
        v-show="showF"
\></canvas>

SVGA资源

放到imges.js文件

hxml 复制代码
svgaAdree:"http://fstatic.cat1314.com/uc/svga/668fdef93df143447846793448d48cb4_1626786582.svga",

样式

css 复制代码
.ticket{
   width: 7.21rem;
   height: 6.64rem;
}     

方法

js 复制代码
  data() {
    return {
      showF: false,
    };
  },
js 复制代码
  mounted() {
    this.svgaGo(this.images.svgaAdree);
  }
js 复制代码
  methods: {
    async svgaGo(adress) {
      let canvas = document.getElementById("canvas1");
      const fileData = await downloader.get(adress);
      const data = await parser.do(fileData);
      let player = new Player(canvas);
      await player.mount(data);

      player.start();
      this.showF = true;
    },
  }
目录
暂无评论,欢迎留下你的评论

运营需要亿点资金维持,您的支持,是小白龙创作的动力!!!

昵称
留言
赞赏金额