Mootools animate background-color

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

Вопросы

1. ^{(оптимизация вышеупомянутых кусков кода)} из оптимизация производительности, есть ли лучший способ выполнить эту анимацию?

2. ^{(по сравнению с JQuery)} бы быть аналогом Jquery более эффективным и элегантный?

Answer 1

Ответ 1:

Я согласен с stecb; Вы можете кэшировать значения и использовать getRandom(). Но для продолжения анимации на неопределенный срок вы не хотите удалять элемент из массива.Поэтому, чтобы избежать повторного выбора последовательно, вам просто нужно переключить места (cached_length-1) и (selected+1).

Кроме того, метод colorToHex, предложенный csuwldcat (тот, который вы указали) является наиболее дорогостоящим во всей анимации с точки зрения производительности. Я настоятельно рекомендую вам использовать шестнадцатеричный код в массиве bgs. Если это не вариант, вы должны использовать colourNameToHex() function по Greg на той же странице.

Наконец журнала ( _ интервал) для установки задержки между смежных Tween ОПС, тогда как продолжительность это время, затраченное на одного цветового перехода. 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, а не многоуровневой структурой).

Answer 2

Хорошо, у меня было 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); 

}); 

пс. если вы хотите, чтобы оживить «навсегда», просто использовать другой массив (где раздвинуть удаленные значения), а затем поменять местами массив, когда другой один пуст