An HTML5 synfig files player.
JavaScript Python
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
assets
build
libs
src
tools
README
prerender.html
renderplay.html
sifPlayer.html
sifPlayer_test.html

README

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.