Javascript, Dojo and long-running animations

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:

  anims[0] = dojo.animateProperty(
    {
      node: dojo.byId("line0"), duration: 60*1000*15,
      properties: {
        backgroundColor: { start: "#7f0000", end: "black" }
      },
      rate: 15*1000
     }).play ();

What I've done here is asked for an animation lasting 15 minutes, with one frame every 15 seconds. After doing this, cpu usage went from 20-30% on one CPU to neglible/undetectable. Seems to work great.
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:

  anims[0] = dojo.animateProperty(
    {
      node: dojo.byId("line0"), duration: 60*1000*15,
      properties: {
        backgroundColor: { start: "#7f0000", end: "black" }
      },
      rate: 15*1000
     }).play ();

What I've done here is asked for an animation lasting 15 minutes, with one frame every 15 seconds. After doing this, cpu usage went from 20-30% on one CPU to neglible/undetectable. Seems to work great.