<canvas id="can" width="200" height="200"></canvas>
<script>
//attach a runner to the canvas
var can = document.getElementById("can");
var runner = new Runner().setCanvas(can);
//create a rect and a circle
var r = new Rect().set(0,0,50,50).setFill("green");
var c = new Circle().set(100,100,30).setFill("blue");
//add the shapes to a group
var g = new Group().add(r).add(c);
//make the rectangle go left and right every 5 seconds
var anim = new Anim(g,"x",0,150,5);
runner.addAnim(anim);
//set the group as the root of the scenegraph, then start
runner.root = g;
runner.start();
</script>
x or width.
Properties are accessed with getters. For example, to access the width
property on a rectangle, call rect.getWidth(). Properties are set
with setters. For example, to set the width property
on a rectangle, call rect.setWidth(100). Most functions, especially
property setters, are chainable. This means you
can set a bunch of properties at once like this:
var c = new Rect()
.setX(50)
.setY(50)
.setWidth(100)
.setHeight(200)
.setFill("green")
.setStrokeWidth(5)
.setStroke("black")
;
The base class for all nodes. All nodes have a parent and can potentially have children if they implement hasChildren.
Marks this node as dirty, so it is scheduled to be redrawn
Returns if this node is dirty, meaning it still needs to be completely redrawn
Clears the dirty bit. usually this is called by the node itself after it redraws itself
by default nodes don't contain anything
by default nodes don't have children
Represents the maximum bounds of something, usually the visible bounds of a node.
An offscreen area that you can draw into. Used for special effects and caching.
get the Canvas 2D context of the buffer, so you can draw on it
Get an canvas ImageData structure.
Return the red component at the specified x and y.
Return the green component at the specified x and y.
Return the blue component at the specified x and y.
Return the alpha component at the specified x and y.
Set the red, green, blue, and alpha components at the specified x and y.
Set the data structure back into the canvas. This should be the same value you got from getData().
Clear the buffer with transparent black.
A node which draws its child into a buffer. Use it to cache children which are expensive to draw.
Transforms the child inside of it with a translation and/or rotation.
A parent node which holds an ordered list of child nodes. It does not draw anything by itself, but setting visible to false will hide the children.
Add the child n to this group.
Remove the child n from this group.
Remove all children from this group.
Always returns false. You should call contains on the children instead.
Always returns true, whether or not it actually has children at the time.
Convert the x and y in to child coordinates.
Returns the number of child nodes in this group.
Returns the child node at index n.
A node which draws an image. Takes a string URL in it's constructor. ex: new ImageView("blah.png")
The base mouse event. Has a reference to the node that the event was on (if any), and the x and y coords. Will have more functionality in the future.
Get the node that this mouse event actually happened on.
A PropAnim is a single property animation. It animates a property on an object over time, optionally looping and reversing direction at the end of each loop (making it oscillate).
Indicates if this animation has started yet
Animates a shape along a path. The Path can be composed of lines or curves. PathAnim can optionally loop or reverse direction at the end. Create it with the node, path, and duration like this: new PathAnim(node,path,10);
Returns true if the animation is currently running.
The core of Amino. It redraws the screen, processes events, and executes animation. Create a new instance of it for your canvas, then call start() to start the event loop.
Start the scene. This is usually the last thing you call in your setup code.
Add an animation to the scene.
Add a function callback to the scene. The function will be called on every frame redraw.
Listen to a particular type of event on a particular target. eventTarget may be null or "*" to listen on all nodes.
Do the function later, when the next frame is drawn.
gets the drawing context of the canvas. You must have already called _setCanvas()_ first.
A class with some static utility functions.
convert the canvas into a PNG encoded data url. Use this if your browser doesn't natively support data URLs