拉去最新代码

README.md

@@ -1,184 +1,49 @@
-# SVGAPlayer-Web
+# 扩展【按需扩展】
 
-Language: [中文](README.zh.md)
+[官方文档](README.official.md)
 
-## News
+### 动态文本
 
-* 2.1.0
-    * Add reverse animation play mode.
-    * Add range animation play mode.
+你可以在指定元素上添加文本，询问你的动画设计师以获取 ImageKey。
 
-* 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```.
-
-## 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](CreateJS.README.md)
-* LayaBox [Usage](LayaBox.README.md)
-
-## Install
-
-### Prebuild JS
-
-1. Add ```<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/svga.min.js"></script>``` to your.html
-
-### NPM
-
-1. ```npm install svgaplayerweb --save```
-2. Add ``` require('svgaplayerweb') ``` to ```xxx.js```
-
-### IE6 ~ IE9
-
-* IE6+ only supports 2.x format.
-* You couldn't use npm to install SVGA library.
-
-1. Add [SVGAPlayerWeb.swf](https://github.com/yyued/SVGAPlayer-Web/blob/master/tests/SVGAPlayerWeb.swf) to your.html locate directory.
-2. Add following code to your.html
-
-```
-<!--[if lt IE 10]> 
-    <script src="../build/svga.ie.min.js"></script>
-<![endif]-->
-<!--[if gte IE 10]><!-->
-    <script src="../build/svga.min.js"></script>
-<!--<![endif]-->
-```
-
-### 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="//s1.yy.com/ued_web_static/lib/jszip/3.1.4/??jszip.min.js,jszip-utils.min.js" charset="utf-8"></script>
-```
-
-## Usage
-
-### Load Animation Mannally
-
-You may create Player and Parser by yourself.
-
-1. Add Div Tag.
-
-```html
-<div id="demoCanvas" style="styles..."></div>
-```
-
-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();
-})
-```
-
-### Load Animation Automatically
-
-Assign canvas element properties as below.
-
-```html
-<div src="rose_2.0.0.svga" loops="0" clearsAfterStop="true" style="styles..."></div>
-```
-
-Animation will play after Web-Page onload.
-
-### Replace Animation Images Dynamically
-
-You can replace specific image by yourself, ask your designer tell you the ImageKey.
-
-```
-player.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 操作必须在 startAnimation 之前执行。
 
 ```
 player.setText('Hello, World!', 'ImageKey');
 ```
+option:
+* text
+* size //默认 14px
+* family  //默认 Helvetica,Sans-Serif
+* color
+* offset [object]
+    * x
+    * y
+* align //默认 center； left|center|right
+* font  //优先于 size 或者 family
+* stroke [object] //描边
+    * width
+    * color
+    * style //inside|out
+* textShadow [object] //文字阴影
+    * color //支持 #fffff ，linear-gradient
+    * offsetX
+    * offsetY
+    * blur
 
 ```
+
 player.setText({ 
-    text: 'Hello, World!', 
+    text: 'Hello, World!, 
     size: "24px", 
     color: "#ffe0a4",
     offset: {x: 0.0, y: 0.0}
-}, 'ImageKey'); // customize text styles.
+}, 'ImageKey'); // 可自定义文本样式
 ```
-
+可以通过 font字段根据canvas.font 的规则去添加配置，也可以单独通过size 或者 family 去配置字体样式
 ## Classes
 
-### SVGA.Player
-
-You use SVGA.Player controls animation play and stop.
+#### Methods(个人需求添加)
+* startAnimationWithRangeList(rangeList:[range:{location:number,length:number,reverse:boolean=false}]) -播放[location.location+length]指定区间帧动画，对区间动画进行拼接，全部执行完才调用 onfinish。
 
-#### 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, 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
-* 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.
-
-### SVGA.Parser
-
-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
-
-### 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>
-```

README.official.md

@@ -0,0 +1,184 @@
+# SVGAPlayer-Web
+
+Language: [中文](README.zh.md)
+
+## News
+
+* 2.1.0
+    * Add reverse animation play mode.
+    * Add range animation play mode.
+
+* 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```.
+
+## 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](CreateJS.README.md)
+* LayaBox [Usage](LayaBox.README.md)
+
+## Install
+
+### Prebuild JS
+
+1. Add ```<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/svga.min.js"></script>``` to your.html
+
+### NPM
+
+1. ```npm install svgaplayerweb --save```
+2. Add ``` require('svgaplayerweb') ``` to ```xxx.js```
+
+### IE6 ~ IE9
+
+* IE6+ only supports 2.x format.
+* You couldn't use npm to install SVGA library.
+
+1. Add [SVGAPlayerWeb.swf](https://github.com/yyued/SVGAPlayer-Web/blob/master/tests/SVGAPlayerWeb.swf) to your.html locate directory.
+2. Add following code to your.html
+
+```
+<!--[if lt IE 10]> 
+    <script src="../build/svga.ie.min.js"></script>
+<![endif]-->
+<!--[if gte IE 10]><!-->
+    <script src="../build/svga.min.js"></script>
+<!--<![endif]-->
+```
+
+### 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="//s1.yy.com/ued_web_static/lib/jszip/3.1.4/??jszip.min.js,jszip-utils.min.js" charset="utf-8"></script>
+```
+
+## Usage
+
+### Load Animation Mannally
+
+You may create Player and Parser by yourself.
+
+1. Add Div Tag.
+
+```html
+<div id="demoCanvas" style="styles..."></div>
+```
+
+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();
+})
+```
+
+### Load Animation Automatically
+
+Assign canvas element properties as below.
+
+```html
+<div src="rose_2.0.0.svga" loops="0" clearsAfterStop="true" style="styles..."></div>
+```
+
+Animation will play after Web-Page onload.
+
+### Replace Animation Images Dynamically
+
+You can replace specific image by yourself, ask your designer tell you the ImageKey.
+
+```
+player.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.
+
+```
+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.
+```
+
+## Classes
+
+### SVGA.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 (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, 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
+* 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.
+
+### SVGA.Parser
+
+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
+
+### 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>
+```