changeant de couleur en termes de toile de gradient de html5

Question

J'ai un fond que je veux être une couleur unie, mais les changements de couleur avec le temps.

• La couleur doit être (2 254 253) au démarrage du projet.
• Il devrait se terminer par (2 120 253) à la fin du projet.
• Et toutes les couleurs au fur et à mesure que le projet progresse.

Celui-ci est facile à faire parce que la seule chose que je dois changer ici est combien de vert ajouter. Mais comment puis-je le faire avec n'importe quelle couleur 2?

Answer 1

Ce changement est juste un changement linéaire.

donc donné deux couleurs

var rgb1 = [100,200,10]; 
var rgb2 = [200,10,100]; 

La couleur à un instant t qui est compris entre 0 et 1

var colour = [ 
    ((rgb2[0] - rgb1[0]) * t + rgb1[0]) | 0, // the | 0 floors the value 
    ((rgb2[1] - rgb1[1]) * t + rgb1[1]) | 0, 
    ((rgb2[2] - rgb1[2]) * t + rgb1[2]) | 0, 
] 

Si vous avez un temps absolu en ms vous pouvez convertir en t normalisée (0-1) comme suit

// do at start of time 
startTime = performance.now(); 
endTime = performance.now() + 10000; // in ten seconds 

// for each update 
t = (performance.now() - startTime)/(endTime - startTime); 
t = t > 1 ? 1 : t; // make sure you dont go past the end 

// get the color 
var colour = [ 
    ((rgb2[0] - rgb1[0]) * t + rgb1[0]) | 0, // the | 0 floors the value 
    ((rgb2[1] - rgb1[1]) * t + rgb1[1]) | 0, 
    ((rgb2[2] - rgb1[2]) * t + rgb1[2]) | 0, 
] 

// as a CSS colour 
var cssColour = "rgb(" + colour[0] + "," + colour[1] + "," + colour[2] + ")";