Como usar o loop de animação sobre tela de javascript para html5 e css3 programação
Uma animação em javascript geralmente requer uma organização especial chamado loop de animação. A estrutura básica do loop de animação em HTML5 e CSS3 programação funciona da mesma em qualquer língua:
Inicialização.
Criar os ativos, incluindo o fundo e qualquer um dos objetos que você estará usando. Objetos que serão manipulados em tempo real são normalmente chamados sprites. Geralmente isso é feito quando o programa executado pela primeira vez, para economizar tempo durante a execução principal. Você também pode definir constantes para o tamanho da imagem, tamanho da tela, taxa de quadros e outros valores que não vai mudar durante a execução do jogo.
Determinar uma taxa de quadros.
Animações e jogos funcionam chamando uma função repetidamente a uma taxa prescrita. Em geral, você vai ter algum tipo de função que é chamado repetidamente. Em javascript, você normalmente usa o setInterval () função para especificar uma função que será chamada repetidamente.
A taxa de quadros indica quantas vezes a função especificada será chamado. Jogos e animações normalmente executado a taxas de quadro entre 10 e 30 quadros por segundo. A taxa de quadros mais rápido é mais suave, mas pode não ser sustentável com algum hardware.
Video: Criando um Banner Animado em HTML5 e CSS3 no GWD
Avaliar o estado atual.
Cada Sprite é realmente um elemento de dados. Durante cada quadro, determinar se alguma coisa importante aconteceu: Será que o usuário pressionar uma tecla? É um elemento deveria mudar? Será que um sprite deixar a tela? Será que dois sprites conk para o outro?
Modificando dados Sprite.
Cada entidade gráfica tem geralmente posição ou dados de rotação que pode ser modificada durante cada quadro. Geralmente isso é feito através de transformações (translação, rotação e escala), embora às vezes você pode alternar entre as imagens em seu lugar.
Limpar a fundo.
Uma animação é realmente uma série de imagens desenhadas rapidamente no mesmo lugar. Normalmente você vai precisar para limpar a fundo no início de cada quadro para limpar imagem do último quadro.
Redesenhar todos os sprites.
Cada sprite está re-desenhado com seus novos dados. Os sprites parecem mover-se, porque eles são atraídos em um novo local ou orientação.