vue 中svga 实现礼物特效

官网api http://svga.io/integrated.html
svga 展示获取svga信息 http://svga.io/svga-preview.html
1.0 安装 SVGA（）

  //npm
  npm install svgaplayerweb --save
  // script  引入方式 在vue 中不常用
  <script src="https://cdn.jsdelivr.net/npm/svgaplayerweb@2.1.0/build/svga.min.js"></script>

2.0 使用
svga.vue

<template>
<div class="container">
  <div id="demoCanvas" class="svga" ref="canvas"></div>
</div>
</template>
<script>
import SVGA from 'svgaplayerweb'
export default{
    data(){
       return {
        // 只是用于展示svga 图片信息 此页面中没有应用到
        svgaInfo :{
                "version": "2.0",
                "FPS": 20,
                "frames": 75,
                "videoSize": {
                    "width": 480,
                    "height": 480
               }
            }
     }
    },
    created(){},
    mounted(){
      this.svgaUrl = 'https://woshimiimage.mvoicer.com/image/item/img/1560828651416.svga'；
      this.player = new SVGA.Player('#demoCanvas');
      this.parser = new SVGA.Parser('#demoCanvas');
     /**如果你需要支持 IE6+，那么必须把同样的选择器传给 Parser。   
      *SVGA.Parser 用于加载远端或 Base64 动画，并转换成 VideoItem。
      * 跨域的 SVGA 资源需要使用 CORS 协议才能加载成功。
      */
     this.svgaInitial()
     this.setFill()
   },
    methods:{
 /**
        setFill(){
        var $_canvas = this.$refs.canvas,
        w = window.innerWidth, // --->414
        h = window.innerHeight, //--->736
        screen_proportion = h/w, // --->1.7777777777777
        svga_proportion = 16/9; // --->1.7777777777777
        if(screen_proportion > svga_proportion){//长屏幕
            $_canvas.style.width = h/svga_proportion+'px';
            $_canvas.style.left = (w-h/svga_proportion)/2+'px';
        }else{
            $_canvas.style.height = w*svga_proportion+'px';
            $_canvas.style.top = (h-w*svga_proportion)/2+'px';
         }
       },
*/
      // svga 最初化
      svgaInitial(){
          var that = this ;
            that.parser.load(that.svgaUrl,function(videoItem){
            let arr  =Object.entries(videoItem.images);  //---> 将对象转化成数组
            that.giftsLen = arr.length ;
            that.player.loops = 0; // 动画循环次数  0 无限循环 
            that.player.setVideoItem(videoItem);
            that.player.startAnimation(); // 开始动画 
            that.releaseGift(arr.splice(0,arr.length-1),that.giftsLen) ;
            that.player.onFrame(function(i){
                if(i>30){
                    // that.player.stopAnimation() //---> 停止动画
                }
            })
            that.player.onFinished(function(){
                console.log('动画结束了执行相应的函数')
                // window.location.href ="https://www.baidu.com" 
            })
            if(that.giftsLen>0){
               //  that.enter(arr,that.giftsLen) --->根据实际需求选择性调用 有动画拼接的时候调用该函数
            }
           },(err)=>console.log(err))
      },
      releaseGift (data,len){
          // ---->自定义动画中文本的样式如下
          var _that = this
           data.forEach((item,index) => {
               console.log(item[0])
            // _that.player.setImage(item[1],`${item[0]}`);
            let form = "hello" // ---> 文本
            _that.player.setText({
                 text:form,
                 size:form.length > 2 ? "50px" :"100px",
                 color:"linear-gradient(to right, #e1d7b4, #bfae7d)",
                 family:"Impact", // ---> family 设置之后 text 才会生效  反之 不生效
                 offset:{
                    x:0,
                    y:0
                 },
                 textShadow:{
                    color:'rgba(0, 0, 0, 0.01)',
                    offsetX:0,
                    offsetY:3,
                    blur:3
                }
            },`${item[0]}`)
        })
   },
/**
   enter(gift,len) {
        switch(len){
            case 1:
                this.player.startAnimationWithRange({location:0,length:200});
            break;
            case 2:
                this.player.startAnimationWithRangeDouble([{location:0,length:150},{location:200,length:50}]);
            break;
            case 3:
               this.player.startAnimationWithRangeDouble([{location:0,length:150},{location:250,length:50}]);
            break;
            case 4:
               this.player.startAnimationWithRangeDouble([{location:0,length:150},{location:300,length:50}]);
            break;
            case 5:
               this.player.startAnimationWithRangeDouble([{location:0,length:150},{location:350,length:50}]);
            break;
           //startAnimationWithRangeDouble()方法 : 多段拼接播放
        }
  }
*/
 }
}
</script>
<style>
</style>

api 介绍 ：
方法

• 构造函数（画布）；第一个参数可以是'#id'或CanvasHTMLElement
• startAnimation（）; 从零帧开始动画。
• startAnimationWithRange（范围：{位置：数字，长度：数字}，反向：布尔=假）： 在[位置，位置+长度]帧范围内开始动画。
• pauseAnimation（）; 在当前帧上暂停动画。
• stopAnimation（）; 停止动画，在clearsAfterStop === true时清除内容
• setContentMode（mode：“ ScaleToFill” |“ AspectFill” |“ AspectFit”）： 特定比例模式（不常用）
• setClipsToBounds（clipsToBounds：boolean）：如果开箱即用，则剪辑。
  明确（）; 强制清除内容。
• stepToFrame（frame：int，andPlay：Boolean）; -停止到特定的帧，同时播放动画，而andPlay === true
• stepToPercentage（percentage：float，andPlay：Boolean）：停止到特定的百分比，同时播放动画，而andPlay === true
• setImage（image：string，forKey：string，transform：[a，b，c，d，tx，ty]）： 动态替换动画图像，变换是可选的，变换可以调整替换图像。
• setText（text：string | {text：string，family：string，size：string，color：string，offset：{x：float，y：float}}，forKey：string）： 在动画图像上动态添加文本（自定义文本样式）
• clearDynamicObjects（） ：清除所有动态对象。
  回调方法
• onFinished（callback：（）=> void）：动画停止后调用。
• onFrame（function(i){console.log(i)}）：void： -在渲染动画特定的帧后调用。
• onPercentage（）：无效; -在渲染特定动画百分比后调用。
  注 ：在回调方法中执行相应的方法
  Android 4.x中断
  众所周知，某些Android操作系统缺少Blob支持，请自行添加Blob Polyfill。
  <script src="//cdn.bootcss.com/blob-polyfill/1.0.20150320/Blob.min.js"></script>
  参考文章:https://yuchengkai.cn/react/#%E4%BB%8B%E7%BB%8D