本仓库已经停止维护,你仍然继续阅读源码及创建分叉,但本仓库不会继续更新,也不会回答任何 issue。
This repo has stopped maintenance, you can still continue to read the source code and create forks, but this repo will not continue to be updated, nor will it answer any issues.
Language: 中文
SVGAPlayer 现已支持在微信小程序播放动画,详情请参阅。
SVGAPlayer 2.0.0 only supports below browsers.
SVGAPlayer 2.0.0 also supports below Game Engines.
<script src="https://cdn.jsdelivr.net/npm/svgaplayerweb@2.3.1/build/svga.min.js"></script>
to your.htmlnpm install svgaplayerweb --save
require('svgaplayerweb')
to xxx.js
<!--[if lt IE 10]>
<script src="https://github.com/svga/SVGAPlayer-Web/raw/master/./build/svga.ie.min.js"></script>
<![endif]-->
<!--[if gte IE 10]><!-->
<script src="https://github.com/svga/SVGAPlayer-Web/raw/master/./build/svga.min.js"></script>
<!--<![endif]-->
If your need to play audios, add howler.min.js
to your html.
<script src="https://cdn.jsdelivr.net/npm/howler@2.0.15/dist/howler.core.min.js"></script>
Notice: audio plays needs browser support, some browser requires user interaction before playing.
Both Prebuild & NPM, if you need to support SVGA-Format 1.x, add JSZip script to html.
<script src="https://github.com/svga/SVGAPlayer-Web/raw/master//s1.yy.com/ued_web_static/lib/jszip/3.1.4/??jszip.min.js,jszip-utils.min.js" charset="utf-8"></script>
You may create Player and Parser by yourself.
<div id="demoCanvas" style="styles..."></div>
var player = new SVGA.Player('#demoCanvas');
var parser = new SVGA.Parser('#demoCanvas'); // Must Provide same selector eg:#demoCanvas IF support IE6+
parser.load('rose_2.0.0.svga', function(videoItem) {
player.setVideoItem(videoItem);
player.startAnimation();
})
Assign canvas element properties as below.
<div src="https://github.com/svga/SVGAPlayer-Web/raw/master/rose_2.0.0.svga" loops="0" clearsAfterStop="true" style="styles..."></div>
Animation will play after Web-Page onload.
You can replace specific image by yourself, ask your designer tell you the ImageKey.
player.setImage('http://yourserver.com/xxx.png', 'ImageKey');
You can add text on specific image, ask your designer tell you the ImageKey.
player.setText('Hello, World!', 'ImageKey');
player.setText({
text: 'Hello, World!',
family: 'Arial',
size: "24px",
color: "#ffe0a4",
offset: {x: 0.0, y: 0.0}
}, 'ImageKey'); // customize text styles.
You use SVGA.Player controls animation play and stop.
You use SVGA.Parser load VideoItem from remote or Base64 string.
Only Cross-Domain allow files could be loaded.
If you eager to load resources from Base64 or File, deliver as load(File)
or load('data:svga/2.0;base64,xxxxxx')
.
As known, some Android OS lack Blob support, add Blob Polyfill by yourself.
<script src="https://github.com/svga/SVGAPlayer-Web/raw/master//cdn.bootcss.com/blob-polyfill/1.0.20150320/Blob.min.js"></script>