CreateJS – Performing Animation and Transforming Function

Exclusive offer: get 50% off this eBook here
Getting Started with CreateJS

Getting Started with CreateJS — Save 50%

Design and develop astounding animated web applications using CreateJS with this book and ebook

$17.99    $9.00
by Afshin Mehrabani | February 2014 | Open Source Web Development

In this article by Afshin Mehrabani, author of the book Getting started with CreateJS, we are going to talk about and use the Animation and Transforming function of CreateJS. In this article, we use TweenJS and EaselJS to create basic animation in browsers.

You can then use these functions to create more innovative animations.

In this article, we will cover the following topics:

  1. Creating animations with CreateJS
  2. Understanding TweenJS
  3. Understanding the TweenJS API
  4. Creating simple animations
  5. Transforming shapes

(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:


Getting Started with CreateJS Design and develop astounding animated web applications using CreateJS with this book and ebook
Published: February 2014
eBook Price: $17.99
Book Price: $29.99
See more
Select your format and quantity:

About the Author :


Afshin Mehrabani

Afshin Mehrabani is an open source programmer. He is studying to be a computer software engineer. He started programming and web development when he was 12 years old, as well as starting with PHP. Later, he joined the Iran Technical and Vocational Training Organization. He secured the first place and received a gold medal in a competition which was conducted across the entire country in the area of web development. He became a member of the Iran National Foundation of Elite after producing a variety of new programming ideas.

He was a software engineer at the Tehran Stock Exchange and is now the head of the web development team in the Yara Company. He cofounded the Usablica team in early 2012 to develop and produce usable applications. He is the author of IntroJs, WideArea, flood.js and some other open source projects.

He has contributed to Socket.IO, Engine.IO, and some other open source projects. He is also interested in creating and contributing to open source applications, writing programming articles, and challenging himself with new programming technologies.

He has written different articles about JavaScript, Node.js, HTML5, and MongoDB that have been published on different academic websites. Afshin has 5 years of experience in PHP, Python, C#, JavaScript, HTML5, and Node.js in many financial and stock trading projects.

Books From Packt


Instant typeahead.js [Instant]
Instant typeahead.js [Instant]

Instant Zepto.js [Instant]
Instant Zepto.js [Instant]

Ext JS 4 First Look
Ext JS 4 First Look

Instant Node.js Starter [Instant]
Instant Node.js Starter [Instant]

Backbone.js Testing
Backbone.js Testing

Learning Ext JS 3.2
Learning Ext JS 3.2

 Instant Ember.js Application Development How-to [Instant]
Instant Ember.js Application Development How-to [Instant]

Instant AngularJS Starter [Instant]
Instant AngularJS Starter [Instant]


Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software