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]