Posted on by & filed under Content - Highlights and Reviews, Web Development.

When you are creating code-based animations, sooner or later you get to a point where you can’t work without a specific component: tweening engines.

What is tweening? Originating from the creation of comics, tweening derives from “in-betweening” and refers to the technique of creating a subset of images in between two images to generate the illusion that the first image smoothly morphs into the second one.

From a coding perspective, this means that tweening allows the developer to have values evolve from one value to another over a certain amount of time. Those values, usually numbers, are very often bound to a graphic effect, such as the X/Y coordinates of a graphic or the size of certain elements–-any effect, you name it.

Furthermore, many tweening engines allow you to control the way the value evolves from A to B. For example, you can dictate that the value evolves faster at first and slower later (also called ease in) or that the value “bounces” to the final value.

Many tweening engines have been written in multiple languages, ranging from C++ over ActionScript to JavaScript and many others. There is no “right” or “best” engine. All of them cover the same basis just in a slightly different syntax. It is simply a matter of what you prefer.

The main point here is that it is very important to familiarize yourself with a tweening engine because it can make everything, from simple movements to complex particle systems, easier.

In the example that follows, I will review some basics points that apply to almost every tweening engine. Between different tweening engines, what changes is the syntax, but the idea is the same. The Tweening Engine I used is called Tween.js and can be found on Github at: https://github.com/sole/tween.js. This is a very small, compact tween engine but it delivers all of the necessities.

First off, we need to create a Tween and give it some values to start with. These are the values we want to tween over a period of time:

Next, we need to tell our tween what the final values should be once the tween is complete and how long the tween will take:

So here we dictated that we want to tween an x and y value over 2000 milliseconds. Now we have to start that tween by calling:

This calls the tween to start now (i.e., instantaneously). Alternatively, this library also allows you to define the tween to start later using:

Of important note here is that every tween engine needs some sort of ticker. A ticker is a function that is called over and over again to update all of the values. Many engines have that built in. Some, like this one, do not, so you need to do it manually.

I always use the requestAnimationFrame. Let’s say I have that embedded, so now I can write:

This updates all created tweens as fast as the browser can. The update function must not be called on a regular basis. The tweens themselves will still be accurate since the calculation of the values is time based, not frame based.

Now you can either read the values at any given point and use them, or hook into the tween to give you a callback for every time that the values change.

There are several hooks. You can also listen to the callback when the tween is completed:

One more helpful tip: Almost all tweening engines allow you to change the easing of the tween. The easing of your tween doesn’t have to be linear; you can set it to quadratic, cubic, bounce (etc.) equations.

This is just a short introduction to tweening, its uses and what it can do for you. As you can see, just a few lines of code can give you an enormous amount of animating possibilities. I encourage you to pick a tweening engine of your choice and experiment with it. See what you can come up with!

Safari Books Online has the content you need

Check out these JavaScript books that are available from Safari Books Online:

HTML5 Games Most Wanted: Build the Best HTML5 Games gathers the top HTML5 games developers and reveals the passion they all share for creating and coding great games. You’ll learn programming tips, tricks, and optimization techniques alongside real-world code examples that you can use in your own projects. You won’t just make games—you’ll make great games.
WebGL: Up and Running is a quick introduction to WebGL, the new standard for 3D rendering on the web. With WebGL, web developers can create games animations, data visualizations, product displays, and more using JavaScript, a web browser, and a standard web technology stack. If you’re familiar with JavaScript, this concise book will help you gain a working knowledge of WebGL through clear and simple examples.
Flash Professional CS5 is such a powerful program that it can seem overwhelming to new or occasional users. With Flash Professional CS5 Visual QuickStart Guide, readers get a solid grounding in the fundamentals of the most recent version of the software. Highlights include working with new-style text in the text-layout framework (practically a mini-page layout program inside Flash), working with the new Color panel and other updated interface features, a look at the deco tool’s expanded pattern set, plus creating ActionScript using Flash’s improved automatic-code-completion features and code snippets.

About this author

Mathias Paumgarten, co-author of HTML5 Games Most Wanted, is a web developer who focuses on front-end and interaction development. Starting with a background in Flash development, he now focuses mainly on JavaScript. He found his passion for the web and code-based animation at a very young age and made his way from a small town in Austria all the way to New York City where he currently works for Firstborn Multimedia as a Creative Developer. Part of his work can be found at https://github.com/MathiasPaumgarten and http://www.mathias-paumgarten.com/.

Tags: Javascript, requestAnimationFrame, tweening,

Comments are closed.