svgaplayerweb-iosfix - npm explorer

变更项

手机端H5项目引用该仓库时，IOS端存在问题，XMLHttpRequest报错。
分析发现，IOS端会将本地文件转换为file:///......路径文件，安卓端为https://......路径文件，代码调用XMLHttpRequest转换文件为arrayBuffer格式，IOS因协议
问题报错。
因此本仓库做出调整，兼容IOS系统文件格式转换，详细步骤如下：
1. 先使用工具将svga文件转换为base64字符串格式保存至项目txt文件中。
2. 在项目中引入文件字符串源数据，替换paser.load中的第一个参数路径即可。
例：
``





Archived



本仓库已经停止维护，你仍然继续阅读源码及创建分叉，但本仓库不会继续更新，也不会回答任何 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.



SVGAPlayer-Web



Language: 中文



SVGAPlayer 现已支持在微信小程序播放动画，详情请参阅。



支持本项目



1. 轻点 GitHub Star，让更多人看到该项目。



News



* Lite Version

* 2.3.0 - Add audio support.



Can I Use



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.



* CreateJS Usage

* LayaBox Usage



Install



$3



1. Add

 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: "Fill" | "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.

变更项





Archived



本仓库已经停止维护，你仍然继续阅读源码及创建分叉，但本仓库不会继续更新，也不会回答任何 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.



SVGAPlayer-Web



Language: 中文



SVGAPlayer 现已支持在微信小程序播放动画，详情请参阅。



支持本项目



1. 轻点 GitHub Star，让更多人看到该项目。



News



* Lite Version

* 2.3.0 - Add audio support.



Can I Use



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.



* CreateJS Usage

* LayaBox Usage



Install



$3



1. Add

 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: "Fill" | "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.