SVGA使用手册

SVGA动画播放

一、SVAG介绍

​ SVGA 是一种跨平台的开源动画格式，同时兼容 iOS / Android / Web。SVGA 除了使用简单，性能卓越，同时让动画开发分工明确，各自专注各自的领域，大大减少动画交互的沟通成本，提升开发效率。动画设计师专注动画设计，通过工具输出 svga 动画文件，提供给开发工程师在集成 svga player 之后直接使用。动画开发从未如此简单！SVGA 除了使用简单，性能卓越，同时让动画开发分工明确，各自专注各自的领域，大大减少动画交互的沟通成本，提升开发效率。

二、安装

• cdn引用

  <script src="https://cdn.jsdelivr.net/npm/svgaplayerweb@2.0.7/build/svga.min.js"></script>
  

• npm安装

  npm install svgaplayerweb --save
  // 添加 const SVGA = require('svgaplayerweb'); 或 import SVGA from 'svgaplayerweb'; 至 xxx.js
  

• 直接下载svga.min.js文件：https://github.com/svga/SVGAPlayer-Web

三、使用指南

1. 手动加载： 自行创建Player和Parser并加载动画

   // 1、添加div容器
   <div id="demoCanvas" style="styles..."></div>
   // 2、加载动画
   var player = new SVGA.Player('#demoCanvas');
   var parser = new SVGA.Parser('#demoCanvas'); // 如果你需要支持 IE6+，那么必须把同样的选择器传给 Parser。
   parser.load('svga文件路径', function(videoItem) {
        
        
    	// 创建动画   
       player.setVideoItem(videoItem);
    	// 开始动画 后面api会讲到   
       player.startAnimation();
   })
   

2. 自动加载： 为vanvas元素添加src属性，动画会在页面加载完成后播放

   <div src="rose_2.0.0.svga" id="demoCanvas" style="styles..."></div>
   new SVGA