Falling Down es-419 Explainer

Explicador de Cómo cae

Objetivo de este acertijo: Usar .transition() para animar una forma SVG.
Tutorial de la solución: El método .transition() anima los cambios hechos en una forma SVG mediante la aplicación de nuevos atributos con el tiempo.

Sin .transition(), los cambios que se hacen en una forma SVG se aplicarían de forma instantánea.

Para completar el acertijo, agregue .transition() al final de circle dentro de la declaración de la función fall(), luego usa .attr() para definir los atributos para circle para la transición.

Al usar .transition(), los nuevos atributos deben estar en la misma línea que .transition() para que la animación funcione correctamente.

Solución del código de ejemplo:

let circle = svg.append('circle').attr('fill', 'red').attr('r', 15).attr('cx', 150).attr('cy', 15);

function fall() {
    circle.transition().attr('cy', 200).attr('r', 30);
}

circle.on('click', fall);

**Conceptos de JavaScript: funciones, variables, propiedades, controladores de eventos, funciones de devolución de llamada
Conceptos de D3: .attr(), .transition(), .append()

1 Like