WEB播放SVGA

本文介绍的是web页面，使用npm插件播放svga的实例，基本上做web的都会遇到svga动画的播放，因为svga相对来说效果好，内存占用小，比较轻量。在使用svga的插件时，调整页面样式显示比较繁琐，本篇文章就是封装一次插件，可以跟写普通元素一样，进行样式调整。

注：该插件支持远程资源，不支持本地。

1、安装插件

npm insall svgaplayerweb

2、封装插件

<template>
    <div 
    :id="svId" 
    :class="className || ''" 
    :style="styleObj || {}"
    >
        
    </div>
</template>

<script>
 import SVGA from "svgaplayerweb";
let svgaId = 0; // id序号

export default {
    props:[
        "src",              // String  资源路径 http|https 开头 测试地址： http://sl.file.diaodiaosocial.com/1595325777179.svga
        "className",         // String class-name 静态class 
        "loops",            // Number  循环播放次数 默认为最大正整数
        "onFrame",          // Function 每帧执行回调
        "styleObj",         // Object  style-obj 绑定的style样式
        "mode",             // String  可选 "ScaleToFill" | "AspectFill" | "AspectFit"
        "onlyTag"           // String  only-tag 唯一标识，每帧/执行完毕 函数回调时标识，用户同一动画，多出显示
    ],

    data() {
        return {
            svId: `svga-id-${svgaId++}` // 动态生成id,处理页面多个svga的情况
        }
    },

    created() {
        this.$nextTick(()=>{
            try {
            	// 创建player
                let player = new SVGA.Player(`#${this.svId}`);
                player.loops = this.loops || Number.MAX_SAFE_INTEGER;
                player.clearsAfterStop=false;
                // 创建解析者
                let parser = new SVGA.Parser(`#${this.svId}`); 
                parser.load(this.src, (videoItem)=> {
                    player.setVideoItem(videoItem);
                    player.setContentMode(this.mode || "AspectFit");
                    player.startAnimation();
                    player.onFinished(() => this.onFinished?.(this.onlyTag));
                    player.onFrame((frame) => this.onFrame?.(frame,this.onlyTag));
                }); 
            } catch (error) {
                console.error(error);
            }
        });
        
    },
}
</script>

<<style lang="less">
    
</style>

3、组建引入

将该内容放到vue入口文件，也就main.js中，进行引用

// 引入自定义的组件
import SvgaComponent from "./SvgaComponent.vue";
import Vue from 'vue';

Vue.component('svga', SvgaComponent);

4、组件使用

 <svga :src="svgaSrc" class-name="svga-icon"></svga>
 // 根据自己页面定义样式
 .svga-icon {
    width: .13rem;
    height: .13rem;
}

以上就是对插件的封装与使用，基本上能满足项目内的需求，可以根据自己项目的需求进行改动，比如播发一次后自动销毁之类的。