Explicação de Rebote
Objetivo deste desafio: Mudar a função de aceleração para fazer a ball fazer rebote em vez de cair.
Passo a passo da solução: Quando um atributo é alterado, fica claro como será o início e o fim, mas não fica claro como devem ser todas as etapas intermediárias.
Se você desenhasse 2 pontos em um pedaço de papel e lhe dissessem para conectá-los, como você poderia fazer isso? Uma linha reta. Mas também uma linha ondulada, ou que tal um caminho que atravessa o ponto de chegada algumas vezes até finalmente aterrissar de vez? O caminho do início ao fim de uma transição é determinado por sua função de aceleração.
Para definir a aceleração, você usa .ease() e anexa à .transition() (ou uma das outras chamadas anexadas à .transition()). O valor que fica entre parênteses é na verdade uma função, mas pode-se pensar nela como um caminho com início e fim. A biblioteca d3 tem algumas funções integradas que você pode usar, como easeQuad e easeBack. Para acessar essas funções, você usa d3.easeQuad e d3.easeBack.
Há uma chamada de função easeBounce que faz com que o caminho pareça uma bola que salta. Vai do início ao fim, depois volta até o meio caminho, depois até o fim, depois volta apenas um pouco, depois volta até o fim, e assim por diante. Para aplicar este efeito de rebote à transição de ball, você usa .ease(d3.easeBounce)
Solução do código de exemplo:
(Toque abaixo para revelar)
function bounce() {
ball.transition().duration(1000).ease(d3.easeBounce).attr('cy', 175);
}
ball.on('click', bounce);
Conceitos de JavaScript: Bloco de código (função)
Conceitos de D3: .attr('cy',), .duration(), .ease(), .on('click',...), .transition()
Código Adicional (código oculto executado antes do código do desafio):
[detalhes]
svg.append('rect').attr('width',window.innerWidth).attr('height',window.innerHeight-225).attr('y',225).attr('fill','maroon');
let ball = svg.append('circle')
.attr('r',50)
.attr('cx',window.innerWidth/2)
.attr('cy',50)
.attr('fill',`hsl(${pickRandom(360)},100%,50%)`);
[/details]