Portuguese, Brazilian subtitles

← PS 03-12 Animação

Get Embed Code
7 Languages

Showing Revision 6 created 09/01/2013 by Gislene Kucker Arantes.

  1. Vamos ver a solução para isso que
    é um pouco complicado. Primeiramente
  2. no topo do nosso arquivo declaramos
    duas variáveis, FrameRate e Frame. Agora,
  3. FrameRate representa quantas vezes
    queremos chamar a função animate.
  4. Frame é uma variável que vamos usar para
    representar qual o frame atual
  5. que está no flip book. Visto que já temos
    as matrizes dos frames disponíveis, o próximo
  6. passo é percorrer os assets predefinidos,
    e carregar cada uma das
  7. imagens definidas nos array dos frames.
    Isso segue os 3 passos do processo que
  8. vimos antes: criar uma imagem nova,
    definir o resultado OnLoad e ai, o código.
  9. Assim que estiver pronto podemos chamar
    essa função SetInterval, no qual
  10. chamaremos a função animate no FrameRate
    que foi fornecido antes. Agora a
  11. função animate tem uma pequena
    lógica difícil dentro dela, Primeiro,
  12. temos nosso contador que definimos.
    Usamos isso para definir qual imagem sai
  13. das matrizes dos frames que temos
    que desenhar no canvas, e claro, na nossa
  14. posição de 192 por 192. Uma vez desenhado
    o frame atual na verdade temos que
  15. incrementá-lo, e este é de onde vem
    o pedacinho da matemática. O que
  16. fazemos é incrementar o contador e então
    modulá-lo pelo length do frame.
  17. O que vai ocorrer aqui é que
    se o frame ficar maior que o frame.length,
  18. o modulo da função terá um laço
    de volta a 0 sem que a gente tenha todos
  19. os outros se as declarações forem complexas.
    Isso é um pedacinho de matemática que você
  20. deveria colocar em seu código. Seu chefe
    ficará impressionado com isso. Se você
  21. seguiu todo o código, deveria ver algo
    desse tipo rodando na
  22. tela. Se você notar, alguma coisa que não
    esteja certo. Você
  23. pega cada um dos frames desenhados um
    sobre o outro, criando esse tipo de
  24. efeito halo. Existe uma razão para isso.
    Vale a pena notar que o canvas
  25. não se limpa em cada frame. Ao invés disso
    ele permiti que você continue
  26. acumulando pixels nele. Para se livrar
    desse efeito ghosting, você
  27. tem que colocar essa linha que deixamos
    de fora da nossa função anterior
  28. de volta, este é o context.clearRect.
    O que ele fará é limpar todos
  29. pixels para os valores padrões permitindo
    que se desenhe de volta no topo. Então
  30. você não vai ter as imagens anteriores
    desenhadas no topo de cada um. O
  31. resultado é um belo, robô bacana rodando
    em torno da sua tela
  32. O resultado com ClearRect é
    esse maravilhoso fascinante robô andando.