Aula 8 - Fazendo movimentos de zigzag.

O que você irá aprender nesta aula?

1. Como animar uma figura usando movimento de zigzag.
   1.1 A função zigzag.

1- Como animar uma figura usando movimento de zigzag.

Vamos partir do desenho de um círculo na tela, deslocando-o um pouco para esquerda.

import Playground exposing (..)

main =
  animation view

view time =
  [ circle blue 100 
        |> move -200 0
  ]

Imagine que você queira criar uma animação nesta figura, fazendo com que ela fique fazendo "zigzag" (alternando sua direção).

No exemplo acima a posição do círculo está fixa em -200 no eixo horizontal e 0 no vertial.
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).

Para, por exemplo, criar uma animação onde o círculo fique se movendo da esquerda para direita, precisamos variar sua posição na horizontal. Ou seja, substituir o valor -200 por um valor que se altere de forma linear ao longo do tempo. E a função zigzag cumpre justamente esta tarefa.

1.1 - A função zigzag.

zigzag é uma função parecida com a wave. Ela também recebe quatro parâmetros, sendo que os dois primeiros indicam os valores mínimo e máximo que queremos obter. O terceiro também é um número e indica a quantidade de segundos que a animação deve demorar para completar (ou seja, o intervalo de tempo que deve transcorrer para que o valor varie entre o valor mínimo e o máximo e volte até o valor mínimo novamente).

Agora que você já conhece a função zigzag e sua finalidade, você consegue imaginar como seria o código para que nosso círculo fique se movendo da esquerda para direita entre a posição -200 e 200 em um intervalo de 5 segundos?

import Playground exposing (..)

main =
  animation view

view time =
  [ circle blue 100 
        |> move (zigzag -200 200 5 time) 0
  ]

Mais uma vez, não podemos esquecer os parênteses, já que queremos que o primeiro parâmetro da função move seja o resultado da função zigzag. Para isso, precisamos indicar para o computador (através do uso dos parênteses) que ele deve primeiro processar e calcular o valor da função zigzag para em seguida processar a função move.

E aí? Já está começando a imaginar as possibilidades para criar jogos com essas funções? 😃

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 8 e bons estudos.