The Curve

Every dojo.Animation needs a curve. If you call animateProperty or it’s shorthand anim, you don’t have to provide the curve for yourself, dojo will do it for you – if you build an animation using new dojo.Animation(), you have to provide your own curve. You can think of the curve as of a line that the animation walks on. The line is already present before the animation starts to walk it, and it can always take a break and pause in the middle and eventually continue walking where it had stopped. To create a curve, you need to call new dojo._Line(start, end). In return, you get an object with three properties: end, start and a getValue() method.

var anim = new dojo.Animation({
	curve: new dojo._Line(0,100)
});

Easing

The curve will then be modified by a easing function. By default, this is the linear dojo._defaultEasing. Easing breathes a bit of life into the curve, you can say. Other properties of dojo.Animation that affect the curve are rate and duration. rate is the timespan between two frames. To calculate the targeted fps, use (1000/rate). By default, dojo aims at 50 fps.

var anim = new dojo.Animation({
	curve: new dojo._Line(0,100),
	easing: dojo.fx.easing.quadInOut
});

Waking Life

To get some numbers out of dojo.Animation, let’s let it go wild and play(). When using animateProperty or the likes, you just fire and forget. In our case, we need to get the numbers. To achieve this, we connect to our animation’s onAnimate event. This is fired on every frame of the animation. When your connected function is called, you get – who would have guessed – the current value of the curve. Now you have a function called at a given rate, for a given period of time and you get get a numeric value that is already calculated for you. Decent!

dojo.connect(anim,'onAnimate',function(curveValue){
	// do something
});

To see some curves in action, go to this test page, open the console and type play(1); and play(2); and check the source code to see what’s happening.

Multidimensional Curves

dojo._Line generates only one-dimensional curves. But, there is dojox.fx._core, which contains an (old) version of dojox.fx._Line, which is capable of creating multi-dimensional curves. To use it, you have to explicitely dojo.require("dojox.fx._core"). It’s a bit odd, but the _core file contains only the _Line, and it is not loaded when requiring “dojox.fx”. Well, whatever, you can pass arrays of numbers into dojox.fx._Line:

new dojox.fx._Line([0,2],[100,6]);

Now you have a multi-dimensional curve. Or, if you could say, you have two curves in one. You can (technically) pass an unlimited amount of numbers into dojox.fx._Line. When you hand this curve to a dojo.Animation, it will animate all dimensions of the curve. And it will modify all dimensions of the curve according to easing, rate and duration. If you connect a function to onAnimate, it will now recieve an array of numbers.

var anim = new dojo.Animation({
	curve: new dojox.fx._Line([0,2],[100,6]),
	easing: dojo.fx.easing.quadInOut
});

Head over to the test page again, and type play(3); into the console. Now, the width of the bars is also animated – by the same animation function that calculates the height of the bars.

What now?

If your mind is still not blown away with ideas about how to use this, let me give you a start:

• animate position, width and height of a browser window and use it as a screensaver for some unknowing, yet thankful visitor…
• take some CSS 2D and 3D transisitions/transforms and animate away…
• canvas! No need to say another word…
• Still too banal? Go WebGL! Grab some 3DContext and animate an evil ball of jelly jumping around!

In short: dojo’s animation system allows you to not only animate CSS properties, but gives you a good tool for  animations in general. You get the curves on the one hand, but you also get the “player” for these curves, including play/pause/stop/gotoPercent methods. And dojo.fx.easing has a lot of easing functions in stock.

Screenshot

One of the things that fascinated me most about computers since I was a teen, was their ability to simulate a three-dimensional space where one could move around in.

That’s why I was so intrigued when I read Jacob Seidelin’s post about “Creating pseudo 3D Games“. I had to play around with it, as I wanted to have mouse control in it, but performance was so bad that it was impossible. So I laid aside that idea. Eventually, he continued this project and used it for something pretty awesome called “WolfenFlickr“, where you can walk around and look at Flickr photos, attached to walls. As I said, pretty awesome.

Anyway, what I wanted was mouse navigation and strafe keys, as you have it in shooters – this kind of moving around always gives me the feeling of being “free“ in a way. Experiencing that freedom in a web page (w/o flash, of course) was still on my mind.

And the I stumbled upon Ben Joffe’s textured Canvascape 3D-Walker. The performance of the canvas element drawing the image slices was better than letting the browser render single elements for each slice – much better. In fact, the idea of mouse control immeadiately popped up again and I had to give it a try. And – it worked! Of course it has some drawbacks (that is, when the cursor leaves the browser window, there’s no more control…), but it gave me that feeling of freedom while moving around!

Fooling around with the canvas element was fun and tought me about it’s image methods. And I hope to find more time to take it further…

Of course there’s an aweful lot of work ahead if one would want this to be pretty (it’s all bricks now, no interaction, perspective issues, no smooth movement on strafe, and so on…) and performance is still an issue with high-res textures, but it is a lot of fun moving around.

Here’s what I added to Ben Joffe’s Walker:

• mouse control
• strafe movement
• walk and crouch
• high-res textures

I dropped IE-Support for this and disabled the mini map for performance reasons.

You’ll need Chrome/Chromium to see it in action in high details mode, but it’s definitely worth it!

Go give it try! Move the mouse cursor into the center of your browser window, press “M“ and enjoy!

PS: Chromium builds for Mac can be found here.

Note: The modifications are all just minor, all credits for this go out to Ben Joffe!