2

我有一个颜色列表，需要将其作为文档正文背景颜色进行动画处理。

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

现在，使用mootools 的 colorToHex() 自定义函数，我最终得到以下代码：

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

问题

  1. （上述代码块的优化）从性能优化的角度来看，有没有更好的方法来执行这个动画？

  2. （与 jQuery 相比） jQuery 对应物会更高效、更优雅吗？

4

2 回答 2

3

好的，我有 2 分钟的时间来检查它并尝试让它变得更好:)

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

..btw，我在您的版本中发现了一些问题：

  • selected = ~~(Math.random() * bgs.length);getRandom()您还没有定义选择，+ MooTools 中有一个可用于数组的内置方法。

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

  • 为什么你不使用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);

});

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

于 2012-07-16T12:27:25.043 回答
0

答案1：

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

此外，就性能而言，（您引用的那个）建议的方法colorToHexcsuwldcat在整个动画中成本最高。我强烈建议您在bgs数组中使用十六进制代码。如果这不是一个选项，您必须在同一页面上使用colourNameToHex()函数。Greg

最后，periodical( _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 核心，而不是分层框架）的性能相媲美。

于 2012-07-17T00:00:34.907 回答