Big Blue Blob es-419 Explainer

Explicación del acertijo Gran mancha azul

Objetivo de este acertijo:

Usar el método de aceleración .ease() para modificar la velocidad del cambio de una animación con el tiempo.

Tutorial de la solución:

El método de aceleración .ease() define la velocidad de .transition() de una animación con el tiempo. Por ejemplo, un valor de aceleración de linear significa que hay una velocidad de cambio constante o que la animación no se acelera ni se desacelera durante su duración. Esta es la configuración predeterminada para .transition(). Un valor de easeQuadIn significa que hay una velocidad de cambio acelerada, o que la animación comienza lentamente pero se acelera a lo largo de su duración. Un valor de easeCubicOut significa que hay una velocidad de cambio desacelerada, o que la animación comienza rápido pero se desacelera a medida que avanza.

En el código con el que comienzas, hay una función, changeSize, y un controlador de eventos. La función changeSize aplica una animación a blob, y cambia su radio, 'r', en el transcurso de 1 segundo. El controlador de eventos llama a la función changeSize cuando se pulsa blob. Dado que la aceleración no está definida, queda por defecto en linear. En este acertijo, cambiarás la aceleración en blob.

Para completar el acertijo, agrega el método de aceleración, .ease(), a blob después de .transition(). Usa d3.easeElastic como un argumento. Ahora, cuando pulses blob, su velocidad de cambio será no lineal.

Solución del código de ejemplo:

(Pulsa a continuación para revelar)


function changeSize() {

blob.transition().duration(1000).attr('r',35 + pickRandom(100)).ease(d3.easeElastic);

}

blob.on('click',changeSize);

Conceptos de JavaScript: variable, función, controlador de eventos

Conceptos de D3: atributo, .transition(), .duration(), .ease()

Código adicional (código oculto que se ejecuta antes del código del acertijo):


let color = [...Array(36)].map((_,i)=>`hsl(${10*i},100%,50%)`);

let blob = svg.append('circle').attr('r',35).attr('cx',window.innerWidth/2).attr('cy',window.innerHeight/2).attr('fill','deepskyblue');