Tengo un bucle que cambia el color de fondo de una página, pero las transiciones son demasiado toscas. Me preguntaba si hay una manera de aplicar un efecto para suavizarlos. Algo así como "facilidad" al usar CSS.
let x = document.body; let color = ["blue", "green", "yellow", "red"]; setInterval(function() { for(let y = 0; y < 4; y++){ x.style.backgroundColor = color[Math.floor(Math.random() * 3)]; } }, 1000); body { background-color: black; }Usar la propiedad de transition css
CSS
let x = document.body; let color = ["blue", "green", "yellow", "red"]; setInterval(function() { for(let y = 0; y < 4; y++){ x.style.backgroundColor = color[Math.floor(Math.random() * 3)]; } }, 1000); body { background-color: black; transition: background-color 2s; }JS
let x = document.body; let color = ["blue", "green", "yellow", "red"]; setInterval(function() { for(let y = 0; y < 4; y++){ x.style.backgroundColor = color[Math.floor(Math.random() * 3)]; x.style.transition = 'background-color 2s'; } }, 1000); body { background-color: black; }La transición CSS (como en la respuesta de Pablo) es probablemente la solución más fácil.
Sin embargo, los colores adquieren un tono grisáceo durante la transición. Este es un efecto secundario de la interpolación de color RGB. Artículo de blog relevante que explica las interpolaciones de color en detalle: aquí .
Una solución alternativa es usar un algoritmo de interpolación de color diferente en javascript.
La biblioteca javascript d3-interpolate proporciona una variedad de algoritmos de interpolación de color.
El fragmento a continuación muestra cómo hacer una transición suave de los colores usando la función d3.interpolateLab .
let x = d3.select('body'); let color = ["blue", "green", "yellow", "red"]; setInterval(function() { for(let y = 0; y < 4; y++){ let currentColor = x.style('background-color') x.transition() .duration(800) .styleTween('background-color' , function() { return d3.interpolateLab( currentColor , color[Math.floor(Math.random() * 3)] ) }) } }, 1000); body { background-color: black; } <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>