Javascript Mootools为背景色设置动画

我有一个颜色列表，需要作为文档正文背景色设置动画

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

现在，使用，我得到了以下代码：

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);
});

问题

（上述代码块的优化）从性能优化的角度来看，是否有更好的方法来执行此动画

（与jQuery相比）jQuery是否会更高效、更优雅

---

好的，我有2分钟的时间来检查它，并试着让它变得更好：）

…以下是工作示例：（以及此处的代码）

…顺便说一句，我在你的版本中发现了一些问题：

• selected=~~（Math.random（）*bgs.length）

  您尚未定义selected，+MooTools中有一个内置的

  getRandom（）

  方法可用于数组

• 为了避免重复和所有的“混乱”，请从该数组中删除该随机元素；）

• 为什么不使用

  onComplete

  tween回调？使用periodic（

  setInterval

  ）与使用回调不同（大多数情况下都不正确）

• 每次运行匿名函数时，您都会（通过

  $

  ）检索未缓存的主体。好的，这是

  主体

  ，但是缓存元素是一个好习惯：）

• 关于q#2，绝对不是

---

以下是我的版本：

// a namespace, more elegant :)
var app = {};

// the array with colors
app.bgs = [
    "BlanchedAlmond",
    "Blue",
    "BlueViolet",
    "Brown",
    "BurlyWood",
    "CadetBlue",
    "Chartreuse",
    "Chocolate",
    "Coral",
    "CornflowerBlue",
    "Cornsilk",
    "Crimson",
    "Cyan",
    "DarkBlue",
    "DarkCyan"
];

// the function to change bg color
app.changeBGColor = function( b ){
  // random select element
  var selected = app.bgs.getRandom();
  // delete that element from the array
  app.bgs.erase(selected);
  // tween background color
  b.tween('background-color',selected.colorToHex());
}

window.addEvent('domready', function() {
  // cache body element
  var b = $(document.body);

  // set tween stuff
  b.set('tween', {
    duration : 1500,
    onComplete : function(){
      if( app.bgs.length ) { // if the array contains elements, change color
        app.changeBGColor(b);
      } else { // otherwise do nothing
        console.log('array empty! end!');
      }
    }
  });

  // start 1st time
  app.changeBGColor(b);

});

---

注：如果你想制作“永远”的动画，只需使用另一个数组（将删除的值推送到哪里），然后在另一个数组为空时交换数组

我同意

stecb

；您可以缓存这些值并使用getRandom（）。但为了无限期地继续动画，您不希望从数组中删除元素。因此，为了避免连续重复选择，只需切换

（cached_length-1）

和

（selected+1）

的位置

另外，在整个动画中，

csuwldcat

（您引用的方法）所建议的colorToHex在性能方面是最昂贵的。我强烈建议您在bgs数组中使用十六进制代码。如果这不是一个选项，则必须在同一页上使用by

Greg

最后，周期（_interval）用于设置相邻两次操作之间的延迟，而持续时间是一次颜色转换所花费的时间。Mootools还提供了一个delay（）函数来暂停顺序流。但在这种情况下，使用priodical（）在固定间隔后触发转换是有意义的

以下是代码的另一个版本：

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);
});

答案2:

由于jQuery需要一个插件

jQuery.Color

来设置背景色的动画，这种额外的分层复杂性可能会影响性能，但它无法与Mootools（相对于分层框架，它是一个扩展的Javascript核心）的性能相抗衡