Drop The Ball es-419 Explainer

Explicador de Deja caer la pelota

Objetivo de este acertijo: Hacer que el globo se mueva hacia el suelo cuando lo pulses.

Tutorial de la solución: Si queremos lograr que una forma haga algo al pulsarla, usamos .on('click',...). Primero, anexamos .on('click',...) a balloon. El segundo argumento (...) debe ser una función. En este acertijo, podemos usar una función de flecha () => {}. Ahora solo debemos agregar nuestros comandos al interior del bloque {} de la función de flecha que causa que el globo baje. Las animaciones se crean con .transition(). Para comenzar, usamos balloon.transition(). Luego, debemos dar algunos detalles sobre cómo queremos animar el globo. Para que se mueva hacia la parte inferior de la pantalla, definimos el atributo 'cy' en 165. Luego, podemos reducir la velocidad del movimiento definiendo .duration() en 2000.

Tarjeta de repaso:
El acertijo Miedo escénico debe ayudarte a practicar las habilidades que necesitas para completar Deja caer la pelota. 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 JavaScript: bloque de código (función de flecha)

Conceptos de D3: .duration(), .on('click',), .transition()

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);
1 Like