Skip to content

S
svge-egret
Commit c7e42d1a authored by wjf's avatar wjf
Browse files
Options

l

parent 91796154
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 2 additions and 509 deletions
CreateJS.README.md deleted 100644 → 0
View file @ 91796154
# SVGAPlayer-Web
## Install
### Add CreateJS library
```html
<script src="https://code.createjs.com/easeljs-0.8.2.min.js"></script>
```
### Prebuild JS
1. Goto [https://github.com/yyued/SVGAPlayer-Web/tree/master/build](https://github.com/yyued/SVGAPlayer-Web/tree/master/build) Download svga.createjs.min.js
2. Add ```<script src="svga.createjs.min.js"></script>``` to xxx.html
### NPM
1. ```npm install svgaplayerweb --save```
2. Add ``` require('svgaplayerweb/build/svga.createjs.min') ``` to ```xxx.js```
### SVGA-Format 1.x support
Both Prebuild & NPM, if you need to support SVGA-Format 1.x, add JSZip script to html.
```html
<script src="http://assets.dwstatic.com/common/lib/??jszip/3.1.3/jszip.min.js,jszip/3.1.3/jszip-utils.min.js" charset="utf-8"></script>
```
## Usage
```js
var displayObject = new SVGA.CreatejsPlayer('./samples/rose_2.0.0.svga');
displayObject.onError(function(err) {
console.error(err)
})
displayObject.setFrame(0, 0, 500, 500)
var stage = new createjs.Stage('CanvasID');
stage.addChild(displayObject);
```
### Replace Animation Images Dynamically
You can replace specific image by yourself, ask your designer tell you the ImageKey.
* The Replacing Image MUST have same WIDTH and HEIGHT as Original.
* setImage operation MUST set BEFORE startAnimation.
```
displayObject.setImage('http://yourserver.com/xxx.png', 'ImageKey');
```
### Add Text on Animation Image Dynamically
You can add text on specific image, ask your designer tell you the ImageKey.
* setText operation MUST set BEFORE startAnimation.
```
displayObject.setText('Hello, World!', 'ImageKey');
```
```
displayObject.setText({
text: 'Hello, World!,
size: "24px",
color: "#ffe0a4",
offset: {x: 0.0, y: 0.0}
}, 'ImageKey'); // customize text styles.
```
## Classes
### CreatejsPlayer
You use SVGA.CreatejsPlayer 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 (url: string, autoPlay: boolean);
* 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, font: 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
* onError(callback: (error: Error) => void): void; - call after load failure.
* 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.
## Issues
### Android 4.x Breaks
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>
```
ISSUE_TEMPLATE.md deleted 100644 → 0
View file @ 91796154
## Attention
* Do not ask any usage question, issue board is a issue board, accept library bugs only.
* If you are facing any usage problem, read the README again.
## Issue Template
Issue Description(What's your problem)
How To Reappear(How to reappear the issue)
Any Attachment(Provide a sample about your issue)
------ 中文分割线 ------
## 注意
* 不要在 Issue 板块提问使用问题，Issue 板块只接受 Bug 反馈。
* 如果遇到使用上的问题，仔细阅读 README。
## Issue 模板
请尽量使用英文提交 Issue
请确切回答：问题的描述、重现方式、附件（提供一个 Demo 以重现问题）
LICENSE deleted 100644 → 0
View file @ 91796154
This diff is collapsed.
LayaBox.README.md deleted 100644 → 0
View file @ 91796154
# SVGAPlayer-Web
## Install
### Patch laya.webgl.js library
1. Goto [https://github.com/yyued/SVGAPlayer-Web/tree/master/patch/layabox](https://github.com/yyued/SVGAPlayer-Web/tree/master/patch/layabox) Download laya.webgl.js
2. Replace to {LayaProjectDir}/bin/libs/laya.webgl.js
### Prebuild JS
1. Goto [https://github.com/yyued/SVGAPlayer-Web/tree/master/build](https://github.com/yyued/SVGAPlayer-Web/tree/master/build) Download svga.layabox.min.js
2. Add ```<script src="svga.layabox.min.js"></script>``` to index.html
3. Optional add ```index.d.ts``` to your project.
### SVGA-Format 1.x support
If you need to support SVGA-Format 1.x, add JSZip script to html.
```html
<script src="http://assets.dwstatic.com/common/lib/??jszip/3.1.3/jszip.min.js,jszip/3.1.3/jszip-utils.min.js" charset="utf-8"></script>
```
## Usage
```js
const displayObject = new SVGA.LayaboxPlayer('res/svga/rose_2.0.0.svga')
displayObject.setFrame(0, 0, 750, 750);
Laya.stage.addChild(displayObject as any)
```
### Replace Animation Images Dynamically
You can replace specific image by yourself, ask your designer tell you the ImageKey.
* The Replacing Image MUST have same WIDTH and HEIGHT as Original.
* setImage operation MUST set BEFORE startAnimation.
```
displayObject.setImage('http://yourserver.com/xxx.png', 'ImageKey');
```
### Add Text on Animation Image Dynamically
You can add text on specific image, ask your designer tell you the ImageKey.
* setText operation MUST set BEFORE startAnimation.
```
displayObject.setText('Hello, World!', 'ImageKey');
```
```
displayObject.setText({
text: 'Hello, World!,
size: "24px",
color: "#ffe0a4",
offset: {x: 0.0, y: 0.0}
}, 'ImageKey'); // customize text styles.
```
## Classes
### Player
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 (url: string, autoPlay: boolean); - first params could be '#id' or CanvasHTMLElement
* startAnimation(reverse: boolean); - 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, font: 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
* onError(callback: (error: Error) => void): void; - call after load failure.
* 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.
README.md
View file @ c7e42d1a
......@@ -10,6 +10,8 @@
<script src="//s1.yy.com/ued_web_static/lib/jszip/3.1.4/??jszip.min.js,jszip-utils.min.js" charset="utf-8"></script>
```
修改自原github项目 https://github.com/yyued/SVGAPlayer-Web
#白鹭引擎使用 在白鹭的js后加下面脚本
<script src="libs/svga.egret.min.js"></script>
......
index.d.ts deleted 100644 → 0
View file @ 91796154
export as namespace SVGA;
declare global {
const SVGA: {
VideoEntity: typeof VideoEntity,
Parser: typeof Parser,
Player: typeof Player,
CreatejsPlayer: typeof CreatejsPlayer,
LayaboxPlayer: typeof LayaboxPlayer,
}
}
export class VideoEntity {
videoSize: { width: number, height: number }
FPS: number
frames: number
}
export class Parser {
load(url: string, success: (videoItem: VideoEntity) => void, failure?: (err: Error) => void): void
}
export class Player {
loops: number;
clearsAfterStop: boolean;
fillMode: "Forward" | "Backward"
constructor(canvas: string | HTMLCanvasElement | HTMLDivElement)
setVideoItem(videoItem: VideoEntity): void
setContentMode(contentMode: "Fill" | "AspectFill" | "AspectFit"): void
setClipsToBounds(clipsToBounds: boolean): void
startAnimation(reverse?: boolean): void
startAnimationWithRange(range: {location: number, length: number}, reverse?: boolean): void
pauseAnimation(): void
stopAnimation(clear?: boolean): void
clear(): void
stepToFrame(frame: number, andPlay?: boolean): void
stepToPercentage(percentage: number, andPlay?: boolean): void
setImage(urlORbase64: string, forKey: string, transform?: number[]): void
setText(textORMap: string | {
text: string,
size?: string,
family?: string,
color?: string,
offset?: { x: number, y: number }
}, forKey: string): void
clearDynamicObjects(): void
onFinished(callback: () => void): void
onFrame(callback: (frame: number) => void): void
onPercentage(callback: (percentage: number) => void): void
drawOnContext(ctx: CanvasRenderingContext2D, x: number, y: number, width?: number, height?: number): void
}
\ No newline at end of file
tests/createjs.html deleted 100644 → 0
View file @ 91796154
<html>
<body style="text-align: center">
<div id="test">
<canvas id="demoCanvas" width="750" height="750" style="background-color: #000000"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/createjs@1.0.1/builds/1.0.0/createjs.min.js"></script>
<script src="http://assets.dwstatic.com/common/lib/??jszip/3.1.3/jszip.min.js,jszip/3.1.3/jszip-utils.min.js" charset="utf-8"></script>
<script src="../build/svga.createjs.min.js"></script>
<script>
var sprite = new SVGA.Player('./samples/angel.svga');
sprite.onError((err) => {
console.error(err)
})
var stage = new createjs.Stage('demoCanvas');
sprite.setFrame(0, 0, 750, 750);
// sprite.setContentMode("AspectFill")
stage.addChild(sprite);
stage.update();
</script>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment