Explicação de Para chegar ao outro lado
Objetivo deste desafio: Fazer a galinha circular atravessar a estrada com segurança.
Passo a passo da solução: Este desafio é todo sobre a propriedade duration(). É usado após uma transition() para definir o tempo necessário para que a transição seja concluída. O número que você coloca entre parênteses de duration(), chamado de argumento, é a quantidade de milissegundos (ms) que a transição deve durar. Cada segundo é igual a 1000 ms, portanto, se quiser que a transição dure 2 segundos, você usaria .duration(2000). Quanto maior o número, mais lenta será a transição, pois ela tem que espalhar a mesma quantidade de animação por um tempo maior. Basta brincar com o valor de duração da galinha para que ela se desvie de todo o tráfego. Se for muito lenta (mais de 4100 ms), será atingida pelo caminhão. Se for muito rápida, atingirá a moto azul (menos de 1400 ms) e talvez a vermelha (1400 ms-2500 ms). Isso significa que há um ponto ideal entre 2500 ms e 4100 ms. A definição da função startTraffic() está oculta, mas o que ela faz é definir as transições para todos os veículos. Assim, quando você clica na galinha, o .on('click',...) executa a função cross. Em seguida, a função cross executa a função startTraffic e finalmente passa para a transição da galinha.
Solução do código de exemplo:
(Toque abaixo para revelar)
function cross() {
startTraffic();
chicken.transition()
.duration(3000)
.attr('cy', 10);
}
chicken.on('click', cross);
Conceitos de JavaScript: Bloco de Código (função), Expressão de Membro, Identificadores
Conceitos de D3: .transition(), .duration(), .attr(‘cy’,), .on(‘click’,)
Código Adicional (código oculto executado antes do código do desafio):
[detalhes]
var greenerGrass = svg.append('rect').attr('width',500).attr('height',30).attr('fill','green');
var grass = svg.append('rect').attr('width',500).attr('height',100).attr('y',180).attr('fill','darkgreen');
var chicken = svg.append('circle').attr('r',15).attr('cx',150).attr('cy',165).attr('fill','lightyellow');
var bike = svg.append('rect').attr('width',75).attr('height',20).attr('fill','blue').attr('x',150).attr('y',30);
var car = svg.append('rect').attr('width',100).attr('height',50).attr('fill','red').attr('x',-100).attr('y',55);
var truck = svg.append('rect').attr('width',150).attr('height',65).attr('fill','white').attr('x',355).attr('y',110);
function startTraffic(){
bike.transition().duration(3000).attr('x',-100);
car.transition().duration(2000).attr('x',400);
truck.transition().duration(4000).attr('x',-200);
}
[/details]