Due to usability improvements to ASKKEN™ I had to add some animations. However creating animations by hand turned out to be a quite hard and repetitive job. I soon realized that I need some abstraction for managing animations in a smart way.

Since I don’t have much experience in the animation business, I did some research and found a really good introduction to Motion Tweening by Robert Penner.
I also found an existing library for Processing called Shapetween. However, I favoured the approach Robert Penner takes for his ActionScript Motion Tweening Library. Letting a Motion Tween directly manipulate properties on objects totally makes sense to me (at least for Processing.js).

Fortunately Philippe Maegerman has already put together a Javascript version of Robert Penner’s tweening library. So all I had to do is adapting the code for use with Processing.js.

Here’s what I came up with:

Motion Tweening

This first example shows the application of two different Tweens for manipulating x and y coordinates of the graphical object. Please click on the canvas to start/restart the Tween.

The code for this example is quite simple. Two Tween objects are created and bound to the object (most often “this”) and property that should be manipulated. You also specify start and end values, the desired easing function and the Tween’s duration (in seconds).

An easing function thereby is a mathematical function used to transform data. Provided a number between 0 and 1, an easing function will return a number usually between 0 and 1 corresponding to the nature of that function.

There are a couple of easing functions to choose from:

• Tween.backEaseIn
• Tween.backEaseOut
• Tween.backEaseInOut
• Tween.elasticEaseIn
• Tween.elasticEaseOut
• Tween.elasticEaseInOut
• Tween.bounceEaseOut
• Tween.bounceEaseIn
• Tween.bounceEaseInOut
• Tween.strongEaseInOut
• Tween.regularEaseIn
• Tween.regularEaseOut
• Tween.regularEaseInOut
• Tween.strongEaseIn
• Tween.strongEaseOut
• Tween.strongEaseInOut
• … more to come

Color Tweening

But Tweening is not restricted to motion. You can use the same approach to change a color over time.

In this example the blue level of a colored object is tweened from 255 downto 0 within two seconds.

In the wild

Additionally here’s the result of my animated donut chart, which will be integrated in the next version of ASKKEN™. It makes heavy use of Tweens.

You can find a dedicated demo page at http://quasipartikel.at/donut and get the source code from Github.

Finally

There’s a dedicated demo for the tweening library as well. And *surprise* you can get the source code at Github. Well, I have to put some more documentation to the example page.

Please let me know what you think. There’s so much room for ideas and improvements.
I’d be happy to get your feedback. If you’d like to contribute, I’d be even happier.

infovis javascript processing.js

This entry was posted on Monday, November 30th, 2009 at 9:00 pm and is filed under Code, Webscience. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.