Aula 8 - Fazendo movimentos de zigzag.
O que você irá aprender nesta aula?
- 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.