Cómo utilizar el bucle de animación sobre lienzo de javascript para la programación html5 y css3

Una animación en javascript en general, requiere una organización especial llamada bucle de animación. La estructura básica del bucle de animación en la programación HTML 5 y CSS 3 funciona de la misma en cualquier idioma:

1. Inicialización.

   Video: Animación usando sprites con javascript y CSS

   Crear los activos, incluyendo el fondo y cualquiera de los objetos que va a utilizar. Los objetos que se pueden manipular en tiempo real se llaman normalmente sprites. Generalmente esto se hace cuando el programa se ejecuta en primer lugar, para ahorrar tiempo durante la ejecución principal. También puede establecer las constantes de tamaño de imagen, tamaño de la pantalla, velocidad de fotogramas y otros valores que no cambian durante la ejecución del juego.

2. La determinación de una velocidad de fotogramas.

   Video: Cómo utilizar el método substring de javascript

   Animaciones y juegos funcionan llamando a una función en repetidas ocasiones a una velocidad prescrita. En general, tendrá algún tipo de función que se llama repetidamente. En javascript, normalmente se utiliza el setInterval () función para especificar una función que será llamada repetidamente.

   La velocidad de fotogramas indica con qué frecuencia se llama la función especificada. Juegos y animaciones normalmente se ejecutan a velocidades de cuadro entre 10 y 30 fotogramas por segundo. Una velocidad de fotogramas más rápido es más suave, pero puede no ser fácil de mantener con un poco de hardware.

3. Evaluar el estado actual.

   Cada sprite es realmente un elemento de datos. Durante cada cuadro, determinar si ha ocurrido algo importante: ¿el usuario pulse una tecla? Es un elemento supone que mover? Realizó un sprite de salir de la pantalla? Hicimos dos sprites conk entre sí?

4. Modificación de datos del sprite.

   Cada sprite tiene generalmente posición o datos de rotación que puede ser modificado durante cada trama. Por lo general, esto se hace a través de transformaciones (traslación, rotación y escala), aunque a veces puede pasar de una imagen en su lugar.

5. Borrado del fondo.

   Una animación es en realidad una serie de imágenes dibujadas rápidamente en el mismo lugar. Por lo general, tendrá que limpiar el fondo al comienzo de cada cuadro para borrar la última imagen del marco.

6. Volver a dibujar todos los sprites.

   Cada sprite es re-dibujado usando sus nuevos datos. Los sprites parecen moverse porque se ven envueltas en una nueva ubicación o la orientación.