Question

我有一个颜色列表，需要将其设置为文档正文背景颜色。

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

现在，使用colorToHex() custom function for mootools，我最终得到了以下代码：

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对应的高效

Answer 1

好的，我有2分钟检查它并试着让它变得更好:)

..这是工作示例：http://jsbin.com/evofuw/2（以及此处的代码http://jsbin.com/evofuw/2/edit#javascript）

..顺便说一句，我发现你的版本存在一些问题：

selected = ~~(Math.random() * bgs.length);您尚未定义选定内容，+ MooTools中的数组可使用内置getRandom()方法。
为了避免重复以及你所做的所有“混乱”，从该数组中删除该随机元素;）
为什么你没有使用onComplete补间回调？使用期刊（setInterval）永远不会与使用回调相同（并且大部分时间都不正确）。
每次运行匿名函数时，您都会检索（$）未缓存的正文。好吧，这是body，但缓存元素是一个好习惯：）
关于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);

});

PS。如果你想要'永远'动画，只需使用另一个数组（在哪里推送已删除的值），然后在另一个数组为空时交换数组

Answer 2

回答1：

我同意stecb;您可以缓存值并使用getRandom（）。但是为了无限期地继续动画，您不希望从数组中删除该元素。因此，要连续避免重复选择，您只需切换(cached_length-1)和(selected+1)的位置。

此外，csuwldcat（您引用的那个）建议的方法 colorToHex 在整个动画中的性能最高。我强烈建议你在 bgs 数组中使用Hex代码。如果这不是一个选项，则必须在同一页面上使用Greg 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); });。

最后期刊（ _ 间隔）用于在相邻的补间操作之间设置延迟，而 duration 是一次颜色转换所需的时间。 Mootools还提供 delay（）功能来暂停顺序流。但在这种情况下，使用 priodical（）来在固定间隔之后触发转换是有意义的。

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

jQuery.Color

回答2：

由于jQuery需要一个插件{{1}}来设置背景颜色的动画，这种额外的分层复杂性可能会影响性能，但它无法与Mootools的性能竞争（是一个扩展的Javascript核心，而不是分层框架。）

Mootools动画背景颜色

2 个答案: