小白龙博客 | 小白龙博客

Svga动画

2022-07-01 05:51:09

2025-01-11 14:44:33

官方文档

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;
    },
  }

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

暂无评论，欢迎留下你的评论