Explicador de Sube las apuestas
Objetivo de este acertijo: Acelerar la velocidad del globo mientras cae, y eliminarlo si toca el suelo.
Tutorial de la solución: Para cambiar la forma en que una transición mueva una forma del punto A al B, usamos .ease(). La función .ease() toma 1 argumento que está almacenado en la biblioteca d3. En este caso, solo hay una función de aceleración enumerada: .easeQuadIn. Para aplicar la nueva función de aceleración, simplemente debemos adjuntar .ease(d3.easeQuadIn) a .transition(). Para que el globo “reviente” si toca el suelo, debemos usar .remove(). Sabemos que el globo toca el suelo cuando termina la transición, así que también podemos simplemente agregar.remove() a .transition(). La transición solo sabe eliminar balloon al final, incluso si usas .transiton().remove()...
Tarjetas de repaso:
Este último acertijo podría evaluar un poco tu memoria. Aprendiste sobre .ease() y .remove() en el primer curso Animaciones. Si completas Cortar los lazos, debes poder solucionar Sube las apuestas. Si quieres practicar un poco más, intenta resolver Tira una chuza y Gravedad extraña del último curso.
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: .ease(), .remove()
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);