View On Github

Basic Tweening

The simplest way to Tween an Object is by using the built in Tween method. The syntax is exactly the same as Tweenlite.


	var c = new JS3Circle();
	c.x = 75;
	c.y = 25;
	stage.tween(c, 3, {x:800, alpha:0});


Chaining Tweens

You can also chain tweens together by specifying a callback to fire when the animation completes.


	var c = new JS3Circle();
	stage.tween(c, 3, {x:800, onComplete:function(){
	    stage.tween(c, 1, {alpha:0});
	}});


Tween Syntax

For a full list of the properties and callbacks you can pass to the Tween function, visit the API section.

Animating with Runners

A second and more powerful way to animate is by using Runners which are just functions that execute on a timed delay.
Simply pass a function to the stage run method and specify how often to call it in seconds.
The snippet below draws a circle and moves it ten pixels to the right every time 1/4 of a second.


	var c = new JS3Circle();
	function update()
	{
	    c.x += 10;
	    if (c.x >= 800) c.x = 75;
	}
	stage.addChild( c );
	stage.run(update, .25);


You can also specify how many times to call the function you passed to the run method.
The snippet below moves the circle fifty pixels to the right every time 1/2 second. It does this 5 times and then stops.


	var c = new JS3Circle();
	    c.size = 75; c.fillColor = "#ddd"; c.strokeColor = "#ccc"; c.strokeWidth = 2;
	stage.addChild( c );
	function update()
	{
	    c.x +=50;
	}
	stage.run(update, .5, 5);


Optionally you can also pass a fourth argument to run specifying a callback to execute when all calls to run's update function have completed.
The following snippet calls the update function every 1/2 second, fives times and then executes the callback "onUpdateComplete".


	function update()
	{
	    c.x +=50;
	}
	function onUpdateComplete()
	{
	    console.log('done!');
	}
	stage.run(update, .5, 5, onUpdateComplete);


Quick Tip : Calling run with just an update function and no other arguments will execute "update" on every frame tick, similar to the AS3 OnEnterFrame.
At any time if you'd like to stop calling the function you passed to run simply pass the function to stop


	stage.stop(update);


The run method returns a JS3RunnerObject with the following properties that you can change at any time :


	delay           : Number        // how often to call the runner function in seconds
	repeatCount     : Number        // total number of times to call the runner function
	onComplete      : Function      // callback to execute when all calls to the runner function have completed


Animating Multiple Sprites

The following snippet creates two circles and slowly bounces them around the Stage.
The "drawCircle" function just returns a basic circle and the "update" function called on every frame moves each circle along in its current direction.
If the circle hits the boundaries of the Stage, its direction is reversed.


  // draw a circle and set a unique directionX & directionY value on it //
	function drawCircle()
	{
	    var c = {};
	    c.size = 15; c.x = Math.random()*stage.width; c.y = Math.random()*stage.height;
	    c.fillColor = "#ddd"; c.strokeColor = "#ccc"; c.strokeWidth = 2;
	    c.dirX = Math.round(Math.random()) == 0 ? -1 : 1;
	    c.dirY = Math.round(Math.random()) == 0 ? -1 : 1;
	    return c;
	}
  // update function to bounce the circles around the canvas //
	function update()
	{
	    var i = stage.numChildren;
	    while ( i-- ){
	        var c = stage.getChildAt(i);
	        if (c.x >= stage.width || c.x <= 0) c.dirX *=-1;
	        if (c.y >= stage.height || c.y <= 0) c.dirY *=-1;
	        c.x += c.dirX;
	        c.y += c.dirY;
	    }
	}
  // attach two circles to the stage //
	var c1 = new JS3Circle(drawCircle());
	stage.addChild( c1 );
	var c2 = new JS3Circle(drawCircle());
	stage.addChild( c2 );
  // finally call the update function on every frame //
	stage.run(update);


Awesome, you're ready for the next section. Click here to learn about setting up for Interactivity & Mouse Events.