Explicação de Pegue-o
Objetivo deste desafio: Fazer o balão voltar para a parte superior da tela antes de cair novamente sempre que você tocar nele.
Passo a passo da solução: A chave para este desafio é saber onde colocar os novos comandos. Para fazer o balão ir para a parte superior, simplesmente usaríamos balloon.attr('cy', 35). É um pouco complicado pensar aonde deve ir se você está imaginando tocar no balão logo na primeira vez. Vamos imaginar que conseguimos fazê-lo funcionar de alguma forma e que já tocamos no balão algumas vezes enquanto ele estava caindo. Como o círculo está animando a transição, isso significa que o atributo 'cy' está sendo alterado constantemente pela transition. Para fazer o 'cy' ir até 35, vamos precisar usar um interrupt. Agora vamos descobrir onde colocar nosso .interrupt().attr('cy',35). Temos 3 opções de onde colocar o comando: antes da .transition(), parte da .transition() (anexado a ela), ou depois da .transition(). Se o colocarmos depois, quando a função for executada, a transição será imediatamente interrompida pela próxima linha de código. Se colocarmos isso como parte da transição, a interrupção e o attr parecem ser ignorados. Se colocarmos interrupt().attr('cy', 35) antes da transição, o balão é enviado para a parte superior da tela e começa a cair novamente.
Cartão de revisão:
O desafio Estourar a bola deve ajudá-lo a praticar as habilidades necessárias para completar o desafio Pegue-o. Quando você resolver, tente descobrir o que cada parte do código faz e quando a ordem das chamadas de função é importante.
Solução do código de exemplo:
(Toque abaixo para revelar)
Como isso é parte do tópico final do curso Animações II e está testando seus conhecimentos, não há solução do código de exemplo.
Conceitos de D3: .attr('cy',), .interrupt()
Código Adicional (código oculto executado antes do código do desafio):
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);
