Bounce Back es-419 Explainer

Explicación de Rebote

Objetivo de este acertijo: Cambiar la función de aceleración para que ball rebote en lugar de caer.

Tutorial de la solución: Cuando se cambia un atributo, está claro cómo será el inicio y el final, pero no queda claro cuáles deben ser todos los pasos intermedios.

Si dibujaras 2 puntos en un papel y te pidieran que los conectaras, ¿cómo podrías hacerlo? Una línea recta. Pero también una línea ondulada, o ¿qué tal una trayectoria que pase por todos lados y cruce el punto final varias veces antes de finalmente quedarse ahí para siempre? La trayectoria de comienzo a fin de una transición determina su función de aceleración.

Para definir la aceleración, usas .ease() y lo anexas a .transition() (o una de las otras llamadas anexadas a.transition()). El valor que va en el paréntesis es en realidad una función, pero puedes pensar en él como una trayectoria de principio a fin. La biblioteca d3 tiene algunas funciones incorporadas que puedes usar, como easeQuad y easeBack. Para acceder a estas funciones, usas d3.easeQuad y d3.easeBack.

Hay una función llamada easeBounce que hace que la trayectoria se vea como una pelota rebotando. Va del Principio al Final, luego se devuelve hasta la mitad, luego al Final, luego se devuelve un poquito, luego nuevamente hasta el Final, y así sucesivamente. Para aplicar este efecto de rebote a la transición de ball, usas .ease(d3.easeBounce)

Solución del código de ejemplo:
(Pulsa a continuación para revelar)

function bounce() {
  ball.transition().duration(1000).ease(d3.easeBounce).attr('cy', 175);
}
ball.on('click', bounce);

Conceptos de JavaScript: bloque de código (función)

Conceptos de D3: .attr('cy',), .duration(), .ease(), .on('click',...), .transition()
Código adicional (código oculto que se ejecuta antes del código del acertijo):

svg.append('rect').attr('width',window.innerWidth).attr('height',window.innerHeight-225).attr('y',225).attr('fill','maroon');

let ball = svg.append('circle')
.attr('r',50)
.attr('cx',window.innerWidth/2)
.attr('cy',50)
.attr('fill',`hsl(${pickRandom(360)},100%,50%)`);