@artdeco/snapsvg-animator v0.3.1
@artdeco/snapsvg-animator
@artdeco/snapsvg-animator is fork of Browser Adapter for Animate CC plugin exporting animated SVG using the Snap.SVG JavaScript library to render content.
The fork compiles the project with Closure Compiler and fixes some bugs.
yarn add @artdeco/snapsvg-animatorTable Of Contents
API
The package is available by importing its default function:
import snapsvgAnimator from '@artdeco/snapsvg-animator'The compiled version that sets SVGAnim on window is found in @artdeco/snapsvg-animator/svg-anim.min.js.
SVGAnim
| Name | Type | Description |
|---|---|---|
| constructor | new () => SVGAnim | Constructor method. |
| s | _snap.Element | The snap instance. |
| play | () => ? | Play the canvas. |
| stop | () => ? | Stop the timeline. |
Data: The data type.
| Name | Type | Description |
|---|---|---|
| DOMDocument* | DOMDocument | The DOMDocument. |
DOMDocument
| Name | Type | Description |
|---|---|---|
| Shape* | !Array<Shape> | The shapes. |
| Bitmaps* | !Array<{ charid: string, bitmapPath: string }> | The bitmaps. |
| Timeline* | !Array<Timeline> | The array of timelines. |
| Text* | !Array<Text> | The Text. |
{ linkageName: string, charid: string, frameCount: string, Label: !Array<string>, name: string, Frame: !Array<Frame> } Timeline
{ num: string, Command: Array<Command> } Frame
{ cmdType: string, charid: string, objectId: string, placeAfter: string, transformMatrix: string, script: string, scriptId: string, name: string, bounds: string, visibility: string, colorMatrix: string, maskTill: string, Name: string } Command
Shape
| Name | Type | Description |
|---|---|---|
| charid* | string | The charid. |
| path* | !Array<ResourcePath> | The paths. |
{ color: string, colorOpacity: string, d: string, strokeWidth: string, fill: string, strokeLinecap: string, image: ResourceImage, strokeLinejoin: string, pathType: string, stroke: string, linearGradient: Gradient, radialGradient: Gradient } ResourcePath
{ patternTransform: string, bitmapPath: string, width: string, height: string } ResourceImage
{ x1: string, y1: string, x2: string, y2: string, cx: string, cy: string, fx: string, fy: string, r: string, stop: !Array<{ stopColor: string, stopOpacity: string, offset: string }> } Gradient
Text
| Name | Type | Description |
|---|---|---|
| charid* | string | The charid. |
| path* | !Array<{ color: string, colorOpacity: string, d: string, strokeWidth: string, fill: string, strokeLinecap: string, strokeLinejoin: string, pathType: string, stroke: string }> | The paths. |
MovieClip
| Name | Type | Description |
|---|---|---|
| constructor | new () => MovieClip | Constructor method. |
| getY | () => ? | Returns the Y coordinate. |
| getX | () => ? | Returns the X coordinate. |
| executeFrameScript | * | executeFrameScript |
| mouseover | * | mouseover |
| mouseout | * | mouseout |
| mousedown | * | mousedown |
| mousemove | * | mousemove |
| play | * | play |
| stop | * | stop |
| gotoAndStop | * | gotoAndStop |
| gotoAndPlay | * | gotoAndPlay |
| click | * | click |
| addChild | (child: !MovieClip, placeAfter: number) => ? | Adds a child DisplayObject instance to this DisplayObjectContainer instance. |