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. （vs. jQuery） jQueryの対応物はより効率的でエレガントでしょうか？

4

2 に答える 2

3

わかりました、私はそれをチェックしてそれをより良くしようとするために2分を持っていました:)

..ここに実際の例があります： http：//jsbin.com/evofuw/2 （そしてここのコードhttp://jsbin.com/evofuw/2/edit#javascript）

..ところで、私はあなたのバージョンでいくつかの問題を見つけました：

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

});

ps。'永久に'をアニメーション化する場合は、別の配列（削除された値をプッシュする場所）を使用し、他の配列が空のときに配列を交換します

于 2012-07-16T12:27:25.043 に答える
0

回答1：

私は同意しstecbます; 値をキャッシュしてgetRandom（）を利用できます。ただし、アニメーションを無期限に続行するために、配列から要素を削除する必要はありません。したがって、連続して選択が重複しないようにするには、(cached_length-1)との場所を切り替えるだけです(selected+1)。

また、（あなたが引用した）メソッドcolorToHexはcsuwldcat、パフォーマンスの点でアニメーション全体で最もコストがかかります。bgs配列で16進コードを使用することを強くお勧めします。それがオプションでない場合は、同じページでcolourNameToHex（）関数を使用する必要があります。Greg

最後に、 periodic（ _interval ）は隣接するトゥイーン操作間の遅延 を設定するためのものですが、 durationは1つの色の変化にかかる時間です。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 に答える