SIFPLAYER for HTML5 it's a lib to play an unzipped sif file on the html canvas. Sif are the files that produced by the open source vector animation software : Synfig www.synfig.org

It uses the createjs.TweenJS (MIT license) for the tweens. www.createjs.com The example uses the Ticker.js from the createjs.EaselJS lib www.createjs.com

It's published under the MIT license.

It is not complete future. It supports the types of layers: Region Outline (without point width) Circle Import (image) Group layer Scale Translate Rotate Zoom Stretch Linear Gradient (without the params zigzag and loop) Radial Gradient (without the params zigzag and loop) Timeloop

The blend methods that much the globalCompositeOperation of the context2d

Composite       =>  source-over
Straight        =>  copy
Onto            =>  source-atop
Straight Onto   =>  source-in
Behind          =>  destination-over
Alpha Over      =>  destination-out
Alpha Brighter  =>  destination-in

The convert that you can use.

Vector converts to: radial composite composite add subtract scale

Real converts to: add subtract scale cos sine expotential dotproduct logarithm reciprocal

Angle converts to: add subtract scale atan2 cos dotproduct (remember that this is using two Math.sqrt) vectorAngle

Integer converts to: add subtract scale

Bool converts to: and

Run the sifPlayer.html to see it in realtime rendering. Run the prerender.html to see it rendering and then playing.

Use prerender if your animation is heavy.

There is a min version and an example of how to use in the build folder

Also in the /assets/ are sifparser.html you can run it to have an understanding of how the data looks like. But keep in mind that the defs will change in the init of the SifObject to be accessed by the id of the defs.

    How to use it :

---For simple method check the prerender.html You only need one function call => sifPlayer.img.playSif('the sif file', 'the name of your canvas element', 'the frames per seccond you wand to render and play'. e.g.
sifPlayer.img.playSif('assets/test.sif', 'canvas', 60);

--- Advanced and realtime rendering information.

var def = {width: 320, height: 240, sifPath: 'assets/'}; var sifobj = sifPlayer.SifObject( xmlDoc, def);

As you can see the first param is an XML Document object. The def param is an javascript object everything that you may wand to add to the SifObject like the x position that will be the upper left corner of the SifObject in the context the width that you wand the SifObject to have And the necessary sifPath that you will need if you use imagies. With sifPath SifObject will know where to search for the imagies that your sif animation used.

sifobj.draw() //will draw the sifobj in the sifobj.dCanvas canvas. sifobj.dCanvas //is the canvas that sifobject is drawing it's self.

sifobj.tick(delta) //moves the sifobject's timeline 'delta' milliseconds.

sifobj.setPosition( pos ) // set the position of sifobject's timeline to the 'pos' millisecs.

To draw a sifobject on a context just use the sifobject's dCanvas as an image.

ctx.drawImage( sifobj.dCanvas, 10 , 10 );

Just remember that you must draw your sifobject first.

For example : sifobj.tick( 65 ); //First move it sifobj.draw(); //Then make the internal draw. ctx.drawImage( sifobj.dCanvas, 10 , 10 ); // then draw it on your context.

The desc. The sifObject contains a propertie name desc. Fesc is a reference of all the layers by name. For example I wand the canvas of the Group Layer named 'myGroup' I can get it this way: sifobj.desc['myGroup'].dCanvas

Also if you wand your animation to loop you can tell the timeline loop sifobj.timeline.loop = true;

For more information about the timeline see the createjs tweenjs documentations.

Don't forget that .sif files are xml files.