how to understand the syntax of kineticjs?

Question

This is the first time around that I am using some js,otherwise I always rely on hardcoding.Probably this is the reason why I am facing some issues in understanding the syntax of kineticjs. I saw some

 1. Tween
 2. layer(add)
 3. stage(add)
 4. var rect=new kinetic.rect{//some code with property:value,}

I am familiar with constructor and creating instances of it.But I am finding it difficult to understand the syntax of kineticjs.What are the above things used for,i have no idea.I tried searching but I din`t get what I was looking for. I have a project in which I need to increase the height of bezier curve with transition.Kineticjs seems to be the only solution for this. So my question is how to define my own custom function in kineticjs and how to call it with respect to the kineticjs syntax?

this is what I have done so far!!!

Answer 1

1. Tweens are used to animate a node from one state into another state. For example, you can use Tweens to animate a rectangle from position x=10 to x=50

2. this adds a node to a layer. You can add groups and shapes to layers

3. this adds a layer to the stage. Layers are tied to an HTML5 canvas

4. this instantiates a new rectangle. Here's the full documentation on rectangles: http://kineticjs.com/docs/Kinetic.Rect.html

For more info, take a look at the "how it works page"

https://github.com/ericdrowell/KineticJS/wiki

Answer 2

Try to watch this youtube video. Its a presentation from the founder of kineticjs. He talk about HTML5 graphics frameworks in generale in the start, but if you go to time 39:45, then he talks about exactly the things you are asking about. He is giving a live coding example which makes it very easy to understand. Check it out:

http://www.youtube.com/watch?v=ZS6QqNJ0VRA