Big Blue Blob pt-br Explainer

Explicação do desafio Grande mancha azul

Objetivo do desafio:
Usar o método de aceleração .ease() para modificar a taxa de mudança de uma animação ao longo do tempo.

Passo a passo da solução:
O método de aceleração .ease() define a velocidade de .transition() de uma animação ao longo do tempo. Por exemplo, um valor de aceleração linear significa que há uma taxa de mudança constante ou que a animação não acelera ou desacelera durante sua duração. Essa é a configuração padrão para .transition(). Um valor de easeQuadIn significa que há uma velocidade de mudança acelerada ou que a animação começa lentamente, mas se acelera ao longo de sua duração. Um valor de easeCubicOut significa que há uma velocidade de mudança desacelerada ou que a animação começa rapidamente, mas desacelera à medida que o tempo avança.

No código com o qual você começa, existe uma função, changeSize e um manipulador de eventos. A função changeSize aplica uma animação a blob, mudando seu raio, 'r', no decorrer de 1 segundo. O manipulador de eventos chama a função changeSize quando blob é acessado. Como a aceleração não é definida, o padrão é linear. Neste desafio, você mudará a aceleração no blob.

Para concluir o desafio, acrescente o método de aceleração .ease(), a blob depois de .transition(). Use d3.easeElastic como argumento. Agora, quando você tocar no blob, sua velocidade de mudança será não linear.

Solução do código de exemplo:
(Toque abaixo para revelar)

function changeSize() {
    blob.transition().duration(1000).attr('r',35 + pickRandom(100)).ease(d3.easeElastic);
}

blob.on('click',changeSize);

Conceitos de JavaScript: Variável, Função, Manipulador de Eventos
Conceitos de D3: Atributo, .transition(), .duration(), .ease()
Código Adicional (código oculto executado antes do código do desafio):
[detalhes]

let color = [...Array(36)].map((_,i)=>`hsl(${10*i},100%,50%)`);

let blob = svg.append('circle').attr('r',35).attr('cx',window.innerWidth/2).attr('cy',window.innerHeight/2).attr('fill','deepskyblue');

[/details]