Aula 7 - Fazendo movimentos de onda.

O que você irá aprender nesta aula?

1. Como animar uma figura usando movimento ondular.
   1.1 A função wave.

1- Como animar uma figura usando movimento ondular.

Antes, vamos relembrar como desenhamos um círculo na tela:

import Playground exposing (..)

main =
  animation view

view time =
  [ circle blue 100 ]

Imagine que você queira criar uma animação nesta figura, fazendo com que ela fique "pulsando" (aumentando e diminuindo seu diâmetro ao longo do tempo).

No exemplo acima o diâmetro do círculo está fixo em 100. Para atingir nosso objetivo, precisamos fazer com que este valor seja variável e mude de acordo com o tempo (aquela variável time que vimos na aula passada).

Uma das formas de implementar isso é utilizando uma função chamada wave (que significa onda em inglês).

Abra mais uma vez o site https://elm-lang.org/try, copie e execute o código a seguir.
Por enquanto não se preocupe em interpretar todo o código, apenas veja o resultado para entender melhor qual nosso objetivo.

import Playground exposing (..)

main =
  animation view

view time =
  [ circle blue (wave 50 100 7 time)
  ]

1.1 - A função wave.

Como você deve ter observado, substituímos o valor do diâmetro do círculo, que no primeiro exemplo era uma constante com valor 100, para uma chamada para função wave passando 4 parâmetros.
O resultado desta chamada irá definir o tamanho do diâmetro do nosso círculo.

A função wave recebe 4 parâmetros. Os 2 primeiros correspondem ao valor mínimo e o tamanho máximo. Já os 2 últimos parâmetros estão relacionados com a velocidade que você quer que os valores sejam alterados.
No nosso exemplo, o valor 7 indica quantos segundos deve demorar o ciclo total e o time é a hora atual (que recebemos como parâmetro na função view e apenas repassamos o mesmo valor).

Agora releia o código anterior e tente entender melhor o que está acontecendo. Altere os valores 50, 100 e 7 para outros valores quaisquer e veja o resultado. Mas antes de executar, tente imaginar como ficará a animação.

E agora?

Agora chegou a hora de você colocar as mãos na massa e praticar mais um pouco!

Siga para os desafios da Aula 7 e bons estudos.