(For more resources related to this topic, see here.)

Creating animations with CreateJS

As you may already know, creating animations in web browsers during web development is a difficult job because you have to write code that has to work in all browsers; this is called browser compatibility. The good news is that CreateJS provides modules to write and develop animations in web browsers without thinking about browser compatibility. CreateJS modules can do this job very well and all you need to do is work with CreateJS API.

Understanding TweenJS

TweenJS is one of the modules of CreateJS that helps you develop animations in web browsers. We will now introduce TweenJS.

The TweenJS JavaScript library provides a simple but powerful tweening interface. It supports tweening of both numeric object properties and CSS style properties, and allows you to chain tweens and actions together to create complex sequences.—TweenJS API Documentation

What is tweening?

Let us understand precisely what tweening means:

Inbetweening or tweening is the process of generating intermediate frames between two images to give the appearance that the first image evolves smoothly into the second image.—Wikipedia

The same as other CreateJS subsets, TweenJS contains many functions and methods; however, we are going to work with and create examples for specific basic methods, based on which you can read the rest of the documentation of TweenJS to create more complex animations.

Understanding API and methods of TweenJS

In order to create animations in TweenJS, you don't have to work with a lot of methods. There are a few functions that help you to create animations. Following are all the methods with a brief description:

• get: It returns a new tween instance.
• to: It queues a tween from the current values to the target properties.
• set: It queues an action to set the specified properties on the specified target.
• wait: It queues a wait (essentially an empty tween).
• call: It queues an action to call the specified function.
• play: It queues an action to play (un-pause) the specified tween.
• pause: It queues an action to pause the specified tween.

The following is an example of using the Tweening API:

var tween = createjs.Tween.get(myTarget).to({x:300},400).
set({label:"hello!"}).wait(500).to({alpha:0,visible:false},1000).
call(onComplete);

The previous example will create a tween, which:

• Tweens the target to an x value of 300 with duration 400ms and sets its label to hello!.
• Waits 500ms.
• Tweens the target's alpha property to 0with duration 1s and sets the visible property to false.
• Finally, calls the onComplete function.

Creating a simple animation

Now, it's time to create our simplest animation with TweenJS. It is a simple but powerful API, which gives you the ability to develop animations with method chaining.

Scenario

The animation has a red ball that comes from the top of the Canvas element and then drops down.

In the preceding screenshot, you can see all the steps of our simple animation; consequently, you can predict what we need to do to prepare this animation.

In our animation,
we are going to use two methods: get and to.

The following is the complete source code for our animation:

var canvas = document.getElementById("canvas");
var stage = new createjs.Stage(canvas);
var ball = new createjs.Shape();
ball.graphics.beginFill("#FF0000").drawCircle(0, 0, 50);
ball.x = 200;
ball.y = -50;
var tween = createjs.Tween.get(ball) to({
y: 300
}, 1500, createjs.Ease.bounceOut);
stage.addChild(ball);
createjs.Ticker.addEventListener("tick", stage);

In the second and third line of the JavaScript code snippet, two variables are declared, namely; the canvas and stage objects. In the next line, the ball variable is declared, which contains our shape object. In the following line, we drew a red circle with the drawCircle method. Then, in order to set the coordinates of our shape object outside the viewport, we set the x axis to -50 px.

After this, we created a tween variable, which holds the Tween object; then, using the TweenJS method chaining, the to method is called with duration of 1500 ms and the y property set to 300 px. The third parameter of the to method represents the ease function of tween, which we set to bounceOut in this example.

In the following lines, the ball variable is added to Stage and the tick event is added to the Ticker class to keep Stage updated while the animation is playing. You can also find the Canvas element in line 30, using which all animations and shapes are rendered in this element.

Transforming shapes

CreateJS provides some functions to transform shapes easily on Stage. Each DisplayObject has a setTransform method that allows the transforming of a DisplayObject (like a circle).

The following shortcut method is used to quickly set the transform properties on the display object. All its parameters are optional. Omitted parameters will have the default value set.

setTransform([x=0] [y=0] [scaleX=1] [scaleY=1] [rotation=0] [skewX=0]
 [skewY=0] [regX=0] [regY=0])

Furthermore, you can change all the properties via DisplayObject directly (like scaleY and scaleX) as shown in the following example:

displayObject.setTransform(100, 100, 2, 2);

An example of Transforming function

As an instance of using the shape transforming feature with CreateJS, we are going to extend our previous example:

var angle = 0;
window.ball;
var canvas = document.getElementById("canvas");
var stage = new createjs.Stage(canvas);
ball = new createjs.Shape();
ball.graphics.beginFill("#FF0000").drawCircle(0, 0, 50);
ball.x = 200;
ball.y = 300;
stage.addChild(ball);
function tick(event) {
angle += 0.025;
var scale = Math.cos(angle);
ball.setTransform(ball.x, ball.y, scale, scale);
stage.update(event);
}
createjs.Ticker.addEventListener("tick", tick);

In this example, we have a red circle, similar to the previous example of tweening. We set the coordinates of the circle to 200 and 300 and added the circle to the stage object. In the next line, we have a tick function that transforms the shape of the circle. Inside this function, we have an angle variable that increases with each call. We then set the ballX and ballY coordinate to the cosine of the angle variable. The transforming done is similar to the following screenshot:

This is a basic example of transforming shapes in CreateJS, but obviously, you can develop and create better transforming by playing with a shape's properties and values.

Summary

In this article, we covered how to use animation and transform objects on the page using CreateJS.

Resources for Article:

Further resources on this subject:

• Introducing a feature of IntroJs [Article]
• So, what is Node.js? [Article]
• So, what is Ext JS? [Article]