Explicador de Recógelo
Objetivo de este acertijo: Hacer que el globo vuelva a la parte superior de la pantalla antes de caer nuevamente cada vez que lo pulses.
Tutorial de la solución: La clave de este acertijo es saber dónde colocar los nuevos comandos. Para que el globo suba a la parte superior, simplemente debemos usar balloon.attr('cy', 35). Es un poco complicado pensar a dónde debería ir si te imaginas pulsar el globo por primera vez. Imaginemos que lo hemos solucionado de alguna manera, y ya pulsamos el globo algunas veces mientras cae. El hecho de que el círculo está animando la transición, significa que transition cambia constantemente el atributo 'cy'. Para que 'cy' sea 35, tendremos que usar un interrupt. Ahora, veamos dónde poner nuestro .interrupt().attr('cy',35). Tenemos 3 opciones de dónde colocar el comando: antes de .transition(), parte de .transition() (adjunto a él) o después de .transition(). Si lo ponemos después, cuando se ejecute la función, la siguiente línea de código interrumpirá inmediatamente la transición. Si lo ponemos como parte de la transición, interrupt y attr parece ser ignorado. Si colocamos interrupt().attr('cy', 35) antes de la transición, la pelota se envía a la parte superior de la pantalla y comienza a caer nuevamente.
Tarjeta de repaso:
El acertijo Revienta tu burbuja debe ayudarte a practicar las habilidades que necesitas para completar Recógelo. Cuando lo resuelvas, intenta averiguar qué hace cada parte del código y cuándo es importante el orden de las llamadas de función.
Solución del código de ejemplo:
(Pulsa a continuación para revelar)
Dado que esta parte del tema final del curso Animaciones II y evalúa sus conocimientos, no hay solución del código de ejemplo.
Conceptos de D3: .attr('cy',), .interrupt()
Código adicional (código oculto que se ejecuta antes del código del acertijo):
var position = [];
for (var i=35; i<=window.innerWidth-35; i+=5) {
position.push(i);
}
svg.append('rect').attr('fill','silver').attr('y',165+35).attr('width',window.innerWidth).attr('height',window.innerHeight-200);