Drop the Ball pt-br Explainer

Explicação de Solte a bola

Objetivo deste desafio: Fazer a bola se mover em direção ao chão quando você tocar nela.

Passo a passo da solução: Se quisermos fazer uma forma fazer algo quando tocamos nela, usamos .on('click',...). Em 1º lugar, anexamos .on('click',...) a balloon. O 2º argumento (o ...) deveria ser uma função. Neste desafio, podemos usar uma função de seta () => {}. Agora só precisamos adicionar nossos comandos ao interior do bloco da função de seta {} que fazem a bola se mover para baixo. As animações são criadas usando .transition(). Usamos balloon.transition() para começar. Depois precisamos dar alguns detalhes sobre como queremos animar a bola. Para que ela se mova para a parte inferior da tela, definimos o atributo 'cy' como 165. Então, podemos retardar o movimento definindo a .duration() como 2000.

Cartão de revisão:
O desafio Medo de palco deve ajudá-lo a exercitar as habilidades necessárias para completar o Solte a bola. 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 JavaScript: Bloco de código (Função de seta)

Conceitos de D3: .duration(), .on('click',), .transition()

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);

Se alguém precisar de ajuda, segue a solução da segunda parte do código…

3 Likes

valeu amigo deu certo