Language: 中文
-
2.0.7
- Improve: Add IE6+ Support via Flash Player.
-
2.0.6
- Bug-fix: setImage on safari leads inifity loop.
- Improve: BezierPath drawing performance.
- Improve: Now can set image and text anytime. set image can be any size, it will be resize by SVGAPlayer.
-
2.0.0
- Add SVGA-Format 2.0.0 support.
- Add npm support, use
npm install svgaplayerweb --save
.
SVGAPlayer 2.0.0 only supports below browsers.
- Edge / IE 6+
- Safari / Chrome
- iOS 6.0+ / Android 4.0+
SVGAPlayer 2.0.0 also supports below Game Engines.
- Add
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/svga.min.js"></script>
to your.html
npm install svgaplayerweb --save
- Add
require('svgaplayerweb')
toxxx.js
- IE6+ only supports 2.x format.
- You couldn't use npm to install SVGA library.
- Add SVGAPlayerWeb.swf to your.html locate directory.
- Add following code to your.html
<!--[if lt IE 9]>
<script src="../build/svga.ie.min.js"></script>
<![endif]-->
<!--[if gte IE 10]><!-->
<script src="../build/svga.min.js"></script>
<!--<![endif]-->
Both Prebuild & NPM, if you need to support SVGA-Format 1.x, add JSZip script to html.
<script src="//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.
- Add Div Tag.
<div id="demoCanvas" style="styles..."></div>
- Load Animation
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="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!,
size: "24px",
color: "#ffe0a4",
offset: {x: 0.0, y: 0.0}
}, 'ImageKey'); // customize text styles.
You use SVGA.Player controls animation play and stop.
- 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.
- constructor (canvas); - first params could be '#id' or CanvasHTMLElement
- startAnimation(); - start animation from zero frame.
- 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, font: string, size: string, color: string, offset: {x: float, y: float}}, forKey: string); - Add Text on Animation Image Dynamically
- clearDynamicObjects(); - clear all dynamic objects.
- 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.
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')
.
- constructor();
- load(url: string, success: (videoItem: VideoEntity) => void, failure: (error: Error) => void): void;
As known, some Android OS lack Blob support, add Blob Polyfill by yourself.
<script src="//cdn.bootcss.com/blob-polyfill/1.0.20150320/Blob.min.js"></script>