Question

I have a list of colors, that needs to be animated as a document body background-color.

var bgs = [
    "BlanchedAlmond",
    "Blue",
    "BlueViolet",
    "Brown",
    "BurlyWood",
    "CadetBlue",
    "Chartreuse",
    "Chocolate",
    "Coral",
    "CornflowerBlue",
    "Cornsilk",
    "Crimson",
    "Cyan",
    "DarkBlue",
    "DarkCyan"
];

Now, using colorToHex() custom function for mootools, I ended up with the following code:

window.addEvent('domready', function() {
  var current;
  (function() {
    selected = ~~(Math.random() * bgs.length);

    // is it a right way to avoid the repetition?
    current = (selected == current) ? ((bgs.length-1) % (selected+1)) : selected;
    // -1 is to avoid the edge case,
    // +1 is to avoid the NaN in case select is 0

    $(document.body).set('tween', {duration: '1500'})
      .tween("background-color",bgs[current].colorToHex());
  }).periodical(1000);
});

Questions

1. ^{(optimization of the aforementioned chunks of code)} From the performance optimization perspective, is there a better way to perform this animation?

2. ^{(vs. jQuery)} Would the jQuery counterpart be more efficient and elegant?

Answer 1

Answer 1:

I agree with stecb; You can cache the values and make use of getRandom(). But in order to continue the animation indefinitely, you don’t want to delete the element from array. Therefore, to avoid the duplicate selection consecutively, you just need to switch the places of (cached_length-1) and (selected+1).

Also, the method colorToHex suggested by csuwldcat (the one you cited) is most costly in the entire animation in terms of performance. I would highly suggest you use Hex code in the bgs array. If that is not an option, the you must use colourNameToHex() function by Greg on the same page.

Finally periodical( _interval ) is for setting the delay between the adjacent tween ops whereas duration is the time taken by one color transition. Mootools also provides a delay() function to pause the sequential flow. But in this case, use of priodical() to fire the transition after fixed interval makes sense.

Here is another version of your code:

window.addEvent('domready', function() {
    var cached_length = bgs.length;
    var myElement = new Fx.Tween(document.body, {duration: '1500'});
    var current, selected;
    (function() {
       selected = ~~(Math.random() * bgs.length);
       current = (selected == current) ?
                         ((selected + 1) % (cached_length - 1)) : selected;

       /* console.info("current: "+bgs[current]); */
       myElement.start("background-color",bgs[current]); // if you use Hex codes 
                                                        // instead of color names
    }).periodical(1000);
});

Answer 2:

Since jQuery would require a plugin jQuery.Color to animate the background-color, that kind of an extra layered complexity may effect the performance, but it cannot compete the performance of Mootools (which is an extended Javascript core as opposed to a layered framework).