I recently needed some simple animation effects for a project, basically gradually changing the background colour from "hot" to "normal" on certain topics. I have a backend that processes realtime information and logs it on a webpage which is streaming (using the perl-based Meteor server). What I wanted to do is that new log entries "glow" with a hot color, gradually changing to normal over time, typically 15 minutes in my case. Dojo has objects named animateProperty for doing this, which works great. There is a catch however. By default, those animations run at 100 frames/second, which is fine if all you're doing is animating a few items for typically less than a second. If you want to animate a page with 50 entries with animations lasting 15 minutes each, it is not so great. It works fine, but it eats a lot of unecessary cpu cycles.
Digging through the Dojo sourcecode, I found a simple solution. Here's an example to illustrate:
anims[0] = dojo.animateProperty(
{
node: dojo.byId("line0"), duration: 60*1000*15,
properties: {
backgroundColor: { start: "#7f0000", end: "black" }
}
}
).play ();
Reading through the Dojo sourcecode (dojo.js.uncompressed.js), one of the first thing animateProperty does is to create an underlying dojo._Animation instance and passing all the arguments to it's constructor:
var anim = new d._Animation(args);
Looking into the dojo._Animation definition, it has some instance variables as well. Of special interest is:
// rate: Integer
// the time in milliseconds to wait before advancing to next frame
// (used as a fps timer: rate/1000 = fps)
rate: 10 /* 100 fps */,
So by simply modifying the rate when creating the animateProperty instance, we can control how often we want the animation to do actual work (the timeout of the timer advancing frames I guess). The solution then becomes:
