Language: [中文](README.zh.md)
npm install svgaplayerweb-cc to your.html
$3
1. `npm install svgaplayerweb --save`
2. Add ` require('svgaplayerweb') ` to `xxx.js`
$3
* IE6+ only supports 2.x format.
* You couldn't use npm to install SVGA library.
1. Add SVGAPlayerWeb.swf to your.html locate directory.
2. Add following code to your.html
`
`
$3
If your need to play audios, add `howler.min.js` to your html.
`html
`
Notice: audio plays needs browser support, some browser requires user interaction before playing.
$3
Both Prebuild & NPM, if you need to support SVGA-Format 1.x, add JSZip script to html.
`html
`
Usage
$3
You may create Player and Parser by yourself.
1. Add Div Tag.
`html
`
2. Load Animation
`js
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();
})
`
$3
Assign canvas element properties as below.
`html
`
Animation will play after Web-Page onload.
$3
You can replace specific image by yourself, ask your designer tell you the ImageKey.
`
player.setImage('http://yourserver.com/xxx.png', 'ImageKey');
`
$3
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.
`
Classes
$3
You use SVGA.Player controls animation play and stop.
#### Properties
* int loops; - Animation loop count, defaults to 0 means infinity loop.
* BOOL clearsAfterStop; - defaults to true, means player will clear all contents after stop.
* string fillMode; - defaults to Forward，optional Forward / Backward，fillMode = Forward，Animation will pause on last frame while finished，fillMode = Backward , Animation will pause on first frame.
#### Methods
* constructor (canvas); - first params could be '#id' or CanvasHTMLElement
* startAnimation(reverse: boolean = false); - start animation from zero frame.
* startAnimationWithRange(range: {location: number, length: number}, reverse: boolean = false); - start animation in [location, location+length] frame range.
* pauseAnimation(); - pause animation on current frame.
* stopAnimation(); - stop animation, clear contents while clearsAfterStop === true
* setContentMode(mode: "ScaleToFill" | "AspectFill" | "AspectFit"); - Specific Scale Mode
* setClipsToBounds(clipsToBounds: boolean); - Clips if image render out of box.
* clear(); - force clear contents.
* stepToFrame(frame: int, andPlay: Boolean); - stop to specific frame, play animation while andPlay === true
* stepToPercentage(percentage: float, andPlay: Boolean); - stop to specific percentage, play animation while andPlay === true
* setImage(image: string, forKey: string, transform: [a, b, c, d, tx, ty]); - Replace Animation Images Dynamically, transform is optional, transform could adjust replacing image.
* setText(text: string | {text: string, family: string, size: string, color: string, offset: {x: float, y: float}}, forKey: string); - Add Text on Animation Image Dynamically
* clearDynamicObjects(); - clear all dynamic objects.
#### Callback Method
* onFinished(callback: () => void): void; - call after animation stop.
* onFrame(callback: (frame: number): void): void; - call after animation specific frame rendered.
* onPercentage(callback: (percentage: number): void): void; - call after animation specific percentage rendered.
$3
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')`.
#### Methods
* constructor();
* load(url: string, success: (videoItem: VideoEntity) => void, failure: (error: Error) => void): void;
Issues
$3
As known, some Android OS lack Blob support, add Blob Polyfill by yourself.
`
``