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