---
# System prepended metadata

title: SVGA 引用方法與解說
tags: [設計規範書]

---


# SVGA 引用方法與解說

## 整合於common.js共用函式引用方法 
**注意!! 一個標籤只能存放一個 SVGA**
### 1. 新增一個 div標籤
```
<div id="demoCanvas" ref="demoCanvas" style="styles..."></div>
```
### 2. 加載動畫 
```
import { ref, onMounted } from 'vue';
// 引入SVGA檔案
import svgaFile from '@/assets/HeartControl.svga'
// 引入 common.js 共用函式檔案
import common from "@/utils/common";
// 解構取出 setSvga 函式
const {  setSvga } = common(); 

const demoCanvas = ref(null) // 用於存放 dom元素

onMounted(()=>{
    // 加載並播放指定的 SVGA ，和指定DOM標籤
    setSvga(svgaFile,demoCanvas.value)
})

```

---
## 解說原理如下：
### 1. 新增一個 div標籤
```
<div id="demoCanvas" ref="demoCanvas" style="styles..."></div>
```
### 2. 加載動畫 
```
import { ref, onMounted } from 'vue';
// 引入套件方法
import { Parser, Player } from 'svgaplayerweb';
// 引入SVGA檔案
import svgaFile from '@/assets/HeartControl.svga'

const demoCanvas = ref(null)  // 用來存放 canvas DOM 元素的引用

// 設置 SVGA動畫 的解析和加載
// (svga檔案,dom標籤)
const setSvga = (svgaFile,domTag) => {
    // 創建實例，將關聯指定 dom 標籤
    const player = new Player(domTag);
    // 如果你需要支持 IE6+，那麼必須把同樣的選擇器傳给 parser
    const parser = new Parser();

    // 使用 Parser 實例解析 SVGA檔案；videoItem => 解析後的SVGA檔案
    parser.load(svgaFile, function (videoItem) {
        // 實例播放設置
        player.setVideoItem(videoItem);
        // 實例開始播放
        player.startAnimation();
    })
}


onMounted(()=>{
    // 加載並播放指定的 SVGA
    setSvga(svgaFile,demoCanvas.value)
})

```