Mootools anime la couleur de fond

Question

J'ai une liste de couleurs, qui doit être animée comme couleur de fond d'un corps de document.

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

Maintenant, en utilisant colorToHex() custom function for mootools, j'ai fini avec le code suivant:

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

Questions

1. ^{(optimisation des morceaux précités du code)} De la perspective d'optimisation des performances, existe-t-il une meilleure façon d'effectuer cette animation?

2. ^{(par rapport à jQuery)} la contrepartie jQuery serait plus efficace et élégant?

Answer 1

Réponse 1:

Je suis d'accord avec stecb; Vous pouvez mettre en cache les valeurs et utiliser getRandom(). Mais pour continuer l'animation indéfiniment, vous ne voulez pas supprimer l'élément du tableau.Par conséquent, pour éviter la sélection en double consécutivement, vous avez juste besoin de changer les lieux de (cached_length-1) et (selected+1).

En outre, la méthode colorToHex suggérée par csuwldcat (celle que vous avez citée) est la plus coûteuse dans toute l'animation en termes de performance. Je vous suggère fortement d'utiliser le code hexadécimal dans le tableau bgs. Si ce n'est pas une option, vous devez utiliser colourNameToHex() function par Greg sur la même page.

Enfin périodique ( _ intervalle) est pour le réglage du retard entre les ops d'interpolation adjacents, tandis que la durée est le temps pris par une transition de couleur. Mootools fournit également une fonction delay() pour mettre en pause le flux séquentiel. Mais dans ce cas, l'utilisation de priodical() pour déclencher la transition après un intervalle fixe est logique.

Voici une autre version de votre code:

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

Réponse 2:

Depuis jQuery, il faudrait un plugin jQuery.Color pour animer l'arrière-plan de couleur, ce genre d'un supplémentaire en couches La complexité peut affecter la performance, mais elle ne peut pas concurrencer les performances de Mootools (qui est un noyau Javascript étendu par opposition à un framework en couches).

Answer 2

Ok, j'avais 2 minutes pour vérifier et essayer de faire mieux :)

..here est l'exemple de travail: http://jsbin.com/evofuw/2 (et le code ici http://jsbin.com/evofuw/2/edit#javascript)

.. BTW, j'ai trouvé quelques problèmes dans votre version:

• selected = ~~(Math.random() * bgs.length); vous n'avez pas défini sélectionné, + il y a une méthode intégrée dans un getRandom() disponible pour Arrays dans MooTools.

• pour éviter les répétitions et tout ce « désordre » que vous avez, supprimer cet élément aléatoire de ce tableau;)

• Pourquoi vous n'êtes pas en utilisant la fonction de rappel onComplete entrepont? L'utilisation de périodiques (setInterval) n'est jamais la même chose que l'utilisation de rappels (et la plupart du temps n'est pas correcte).

• Chaque fois que vous exécutez cette fonction anonyme, vous récupérez (par $) le corps qui n'est pas mis en cache. Ok, c'est le body mais c'est une bonne habitude de mettre en cache des éléments :)

• A propos de q # 2, certainement pas. :)

---

Voici ma version:

// 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. si vous voulez animer « pour toujours », il suffit d'utiliser un autre tableau (où pousser les valeurs supprimées), puis échanger tableau lorsque l'autre est vide