svga使用

ZJTL發表於2024-03-15
SVG

父元件

<template>
    <svga-canvas-talk ref="svgaCanvasWalkRef"></svga-canvas-talk>
</template>

<script>
import SvgaCanvasTalk from '@/components/SvgaCanvasTalk.vue'

export default {
    components: { SvgaCanvasTalk },
}
</script>

子元件

<template>
  <canvas id="talk-svga" class="container" ref="talkCanvas"></canvas>
</template>
<script>
  import SVGA from 'svgaplayerweb'
  import { Parser, Player } from 'svga'
  export default {
    props: {
      svgaUrl: {
        default: 'img/talk.svga',
        type: String,
      },
    },
    data() {
      return {
        player: undefined,
        parser: undefined,
      }
    },
    created() {},
    mounted() {
      // this.playRibbonSvga()
      this.init(this.svgaUrl)
    },
    methods: {
      async init(url) {
        this.parser = new Parser()
        const svga = await this.parser.load(url)
        this.player = new Player(document.getElementById('talk-svga'))
        await this.player.mount(svga)
        this.startAnimation()
        this.player.onStart = () => console.log('onStart')
        this.player.onResume = () => console.log('onResume')
        this.player.onPause = () => console.log('onPause')
        this.player.onStop = () => console.log('onStop')
        this.player.onEnd = () => console.log('onEnd')
      },
      //開始播放
      startAnimation() {
        if (!this.player) return
        this.player.start()
      },
    },
  }
</script>
<style lang="less" scoped>
  .container {
    text-align: left;
    display: block;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    margin: auto;
    height: 100%;
    overflow: hidden;
  }
</style>

相關文章