Cómo utilizar el bucle de animación en la lona de javascript para HTML5 y CSS3 programación

Una animación en javascript generalmente requiere una organización especial llamada bucle de animación. La estructura básica del bucle de animación en la programación HTML5 y CSS3 funciona de la misma en cualquier idioma:

  1. Inicialización.

    Crear los activos, incluyendo el fondo y cualquiera de los objetos que va a utilizar. Los objetos que se pueden manipular en tiempo real normalmente se denominan 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 constantes de tamaño de imagen, tamaño de la pantalla, velocidad de fotogramas, y otros valores que no cambiarán durante la ejecución del juego.

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

    Las animaciones y los juegos funcionan llamando a una función varias veces a una velocidad prescrita. En general, usted tendrá algún tipo de función que se llama repetidamente. En javascript, se utiliza normalmente la 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 suelen correr 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 sprites es realmente un elemento de datos. Durante cada fotograma, determinar si algo importante ha sucedido: ¿El usuario pulse una tecla? Es un elemento supone que mover? Hizo un sprite salir de la pantalla? Hicimos dos sprites conk en la otra?

  4. Modificación de los datos de sprites.

    Cada elemento sprite tiene generalmente la 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 dibujado rápidamente en el mismo lugar. Por lo general, tendrá que borrar el fondo al comienzo de cada cuadro para limpiar la imagen del último fotograma.

  6. Volver a dibujar todos los sprites.

    Cada sprites es re-dibujado usando sus nuevos datos. Los sprites parecen moverse porque están dibujados en una nueva ubicación o la orientación.




» » » » Cómo utilizar el bucle de animación en la lona de javascript para HTML5 y CSS3 programación