Slow Down es-419 Explainer

Puzzle Explainer
#1

Explicador de Baja la velocidad

Objetivo de este acertijo:
Usar el método de duración, .duration(), para cambiar la velocidad de una animación SVG.

Tutorial de la solución:
El método de duración, .duration(), define la cantidad de tiempo, en milisegundos, que tarda en completarse una .transition(). Mientras más alto sea el número, más lenta será la animación.

En el código con el que comienzas, hay una función, move, y un controlador de eventos que llama a move cuando se pulse shapes. La función move hace dos cosas: cambia la posición de los círculos de su posición 'cx' a 400 en el transcurso de 1000 milisegundos (1 segundo) y, al mismo tiempo, cambia los cuadrados de su posición 'x' a -400 en el transcurso de 1000 milisegundos (1 segundo). En este acertijo, disminuirás la velocidad de esa animación ajustando la .duration() de .transition() a un número más alto.

Para completar el acertijo, cambia el argumento de cada método de duración, .duration(), a 4000 (4 segundos). Ahora, cuando pulses las formas, no se moverán tan rápido como antes.

Solución del código de ejemplo:

function move() {
    circles.transition()
.duration(4000)
.attr('cx',400)

    squares.transition()
.duration(4000)
.attr('x', 400)
}

shapes.on('click', move);

Conceptos de JavaScript: variable, controlador de eventos, función
Conceptos de D3: atributo, .duration(), .transition()
Código adicional (código oculto que se ejecuta antes del código del acertijo):

for (let i =0; i<10; i++){
    let color = d3.rgb(pickRandom(255), pickRandom(255), pickRandom(255))
let circle = svg.append('circle')
.attr('r',10 + Math.random()*25)
.attr('cx',Math.random()*window.innerWidth)
.attr('cy',Math.random()*window.innerHeight)
.attr('fill',color)
.attr('opacity',`${0.2*pickRandom(9)}`);
}

for (let i =0; i<10; i++){
    let color = d3.rgb(pickRandom(255), pickRandom(255), pickRandom(255))
let square = svg.append('rect')
.attr('width',30 + Math.random()*6)
.attr('height',30 + Math.random()*6)
.attr('x',Math.random()*window.innerWidth)
.attr('y',Math.random()*window.innerHeight)
.attr('fill',color)
.attr('opacity',`${0.5*pickRandom(9)}`);
}

            

let circles = d3.selectAll('circle')
let squares = d3.selectAll('rect')

let shapes = d3.selectAll('circle, rect')
1 Like
#2
#3