Inicio Noticias Lienzo de JavaScript - Animación

Lienzo de JavaScript – Animación

Página 1 de 3

¿La animación sobre lienzo es sencilla, no? Continúe dibujando los dibujos. En este extracto de JavaScript Bitmap Graphics With Canvas vemos cómo funciona.

Ahora disponible como libro de bolsillo o libro electrónico de Amazon.

Gráficos de mapa de bits de JavaScript
Con lona

Contenido

Gráficos JavaScript Introducción a las rutas de dibujo del lienzo
Extracto: Rutas básicas
Extracto: trazo y relleno de curvas de Bézier
Extraer: propiedades del trazo
Extraer: rellenar transformaciones y agujeros
Extraer: transformaciones de texto
Resumen: texto, tipografía y SVG
Resumen: recorte, composición y efectos Unicode
Resumen: Recorte y composición básicos que generan mapas de bits
Resumen: Introducción a los mapas de bits
Extracto: Animación ** ¡NUEVO! WebWorkers y OffscreenCanvas
Extracto: OffscreenCanvas
Manipulación de bits en matrices escritas Archivos JavaScript, BLOB, URL y Fetches
Extraer: blobs y archivos
Extracto: lectura / escritura de archivos locales Procesamiento de imágenes
Extracto: ImageData
Extracto: la API de filtro
3D WebGL 2D WebGL
Extracto: convoluciones de WebGL

En el libro pero no incluido en este extracto:

El objeto de imagen que dibuja una imagen ImageBitmap

Animación

Uno de los usos principales de Canvas es crear animaciones simples. El principio de animación es bien conocido. Muestre una imagen por un tiempo breve, cambie la imagen, muestre la nueva imagen, etc. ¿Qué tan rápido debería mostrar las nuevas imágenes? La respuesta es que una nueva imagen cada 1/25 de segundo generalmente crea la impresión de movimiento, pero en la mayoría de los casos los programas intentan mostrar una nueva imagen cada vez que el hardware actualiza el marco de la pantalla. Esta es la velocidad más rápida posible y generalmente produce una animación suave.

JavaScript tiene un método que llamará a una función lo antes posible después de cada actualización de marco. El método requestAnimationFrame llamará a una función que usted proporcione para que tenga el mayor tiempo posible para actualizar los gráficos antes de la próxima actualización de pintura para generar el marco. La función es:

var id = requestAnimationFrame (animado);

La identificación devuelta se puede usar para deshacer una animación usando:

cancelAnimationFrame (id);

A la función, llamada animar en este ejemplo, se le pasa un único parámetro que es el tiempo, generalmente en milisegundos, al inicio del marco medido por la carga de la página web.

El método requestAnimationFrame es lo suficientemente simple de entender, pero tiene algunos puntos sutiles. La primera es que la función animada debe terminar con una llamada a requestAnimationFrame si se va a llamar para cada fotograma. En otras palabras, requestAnimationFrame ejecuta la función solo una vez al comienzo del siguiente marco. La cantidad de tiempo que la función necesita para ejecutarse es tanto tiempo entre cuadros como el motor de JavaScript puede proporcionarlo. Al final de un marco, el motor maneja todos los eventos y actividades pendientes y luego llama a la función requestAnimationFrame, que está animada en nuestro ejemplo.

La función puede ejecutarse durante el tiempo que desee, pero si se ejecuta durante más tiempo del que queda hasta el siguiente fotograma, la actualización no se realiza y los cambios son visibles en el siguiente fotograma una vez finalizado. Si hay varias funciones requestAnimationFrame pendientes, todas obtienen la misma marca de tiempo, que es solo un indicador del marco para el que deben prepararse. Como era de esperar, si alguna de las funciones tarda más de un fotograma, se salta el siguiente fotograma.

Todo esto significa que es recomendable mantener las funciones requestAnimationFrame reducidas a una por aplicación y reducir el tiempo de procesamiento.

¿Qué tan corto es?

La respuesta simple es menos de 16 ms.

Si prueba el siguiente programa:

tiempo =[]; cuenta = 20; función animada

podrá ver una muestra de los tiempos entre cuadros para el navegador en particular al que está apuntando.

Para Chrome, en el momento de redactar este artículo, los resultados eran en su mayoría 16,66 milisegundos, que se acerca al tiempo entre fotogramas de 60 fps. Sin embargo, ocasionalmente verá valores de 50 ms e incluso 500 ms. Estos se deben a que el navegador tiene que hacer algo más además de cumplir con su solicitud. No hay nada que pueda hacer para solucionar estos problemas y, en su mayoría, los usuarios no los detectan.

¿Dibujar o BitBlt?

Hay dos formas de obtener una imagen que cambia entre fotogramas. Puede dibujar su imagen usando rutas y así sucesivamente o puede BitBlt un mapa de bits en el lienzo. BitBlt, que se pronuncia bit-blit, es la abreviatura de operación de bloque de bits y, a menudo, se abrevia como blit. Esta es esencialmente una copia de bajo nivel de un grupo de bits almacenados en la memoria en otra área de memoria y, como acabamos de descubrir, podemos hacer esto con drawImage.

Para comparar los dos métodos, animamos un cuadrado giratorio simple primero usando métodos de dibujo y luego haciendo blitting.

Para dibujar un cuadrado giratorio, todo lo que necesitamos es ajustar el sistema de coordenadas para que gire alrededor del centro del cuadrado, consulte el Capítulo 5.

var inc = 0,1; var ctx = document.body.appendChild (
createCanvas (600, 600)). getContext (“2d”); var ruta = nueva ruta2D (); path.rect (-25, -25, 50, 50); ctx.translate (100, 100); requestAnimationFrame (animado);

La función de animación simplemente borra el área de dibujo, gira el sistema de coordenadas y dibuja la ruta:

función animada

Si prueba el programa, verá un cuadrado que gira suavemente. Hay algunos problemas menores con este enfoque, principalmente tener que recordar cuál es el sistema de coordenadas actual. Por lo general, esto se puede evitar mediante guardar y restaurar.


La misma animación obtenida con blitting requiere una única imagen de animación del sprite. Una imagen de animación de sprites es un solo mapa de bits con una forma, el sprite, dibujado en diferentes posiciones para la animación. En este caso, son suficientes 16 subimágenes:

rotcube

La forma en que se crea este mapa de bits no es realmente relevante. Puede utilizar un editor de mapa de bits o puede escribir un programa para generarlo. La idea básica es cargar el mapa de bits y usar requestAnimationFrame para mostrar cada celda de la animación a su vez:

función asíncrona getImage (url) {función animada

En este caso, la función getImage ahora se comporta más como un programa principal asincrónico, que suele ser el caso. La función animada se define internamente para que pueda acceder a las variables locales de getImage. La función getImage recopila las imágenes del sprite y luego llama a requestAnimationFrame para iniciar la animación. La variable i establece qué celda de mapa de bits se muestra.

Si prueba el programa, encontrará que obtiene una animación fluida, aunque no tan fluida como la primera versión. Se necesitarían más celdas para obtener una animación aún más fluida.

La diferencia clave entre los dos enfoques es que el método de dibujo toma tanto tiempo en completarse como en renderizar las rutas involucradas. El método BitBlt siempre toma el mismo tiempo, sin importar cuán complejo sea el objeto. El método de dibujo tiene la ventaja de ser editable dinámicamente, mientras que en la mayoría de los casos el blitting se limita a los sprites que ya ha creado.

Marc Gomez
Vine a por tabaco y ya me quedé aquí. Cuando no estoy en el sótano de Tecnopasion suelo pasear por las calles de Barcelona.
RELATED ARTICLES

Dejar respuesta

Please enter your comment!
Please enter your name here