Share
HTML es el lenguaje en el que está integrada la web y es una especie de bestia extraña. Aunque originalmente fue pensado como una forma de compartir fácilmente información académica a través de Internet, se ha transformado lentamente para adaptarse al entorno rico en medios que conocemos y amamos. Debido a la naturaleza descuidada de HTML (y JavaScript, el lenguaje de programación que manipula elementos en HTML y los hace interactivos), a veces tenemos que pensar un poco fuera de la caja. En esta serie de tutoriales, te mostraré cómo hacer una animación en varios navegadores usando un método llamado spriting. Y, dado que esta es una oportunidad de aprendizaje, lo haremos todo sin bibliotecas externas (como jQuery).
Esta será una serie de cuatro partes. Explicaré el spriting en sí mismo en la primera parte (este artículo) con un poco de JavaScript básico, pero luego, en plazos posteriores, veremos algunas técnicas intermedias como la encapsulación, el manejo de eventos y el soporte de pantalla táctil..
Entonces empecemos!
La animación se basa en un fenómeno llamado persistencia de la visión, que básicamente dice que si su cerebro ve muchas imágenes fijas similares lo suficientemente rápido, entonces parecerá que es una imagen en movimiento. Cada tipo de película o video utiliza esta técnica básica: se muestran muchos fotogramas ligeramente diferentes en rápida sucesión para hacer que algo parezca que se está moviendo. La película normalmente se ejecuta a 24 cuadros por segundo (₁), mientras que la transmisión de televisión en América del Norte se muestra a 29,97 cuadros por segundo (₂). Entonces, en otras palabras, lo que queremos hacer es crear algo que muestre marcos similares muy rápidamente (varias veces por segundo).
Hay dos razones principales por las que la animación es difícil de usar en la web:
Una forma de evitar estos problemas es hacer una hoja de sprites. En elementos como divs, podemos establecer una imagen de fondo para el div que puede ser más grande que el elemento en sí. También podemos establecer la posición de fondo para que determinemos exactamente qué parte de la imagen más grande se mostrará. Una hoja de sprites es una imagen más grande hecha de varias imágenes más pequeñas que podemos mover para que pueda reemplazar muchas imágenes pequeñas. Eche un vistazo al siguiente ejemplo, usando J, la mascota de mi empresa Joust Multimedia:
Aunque hay diez imágenes diferentes de J, se colocan juntas en un archivo PNG más grande (estamos usando PNG porque pueden mostrar transparencia). Si tenemos un div ese es solo el tamaño de una de las imágenes, y configuramos este PNG como fondo, se verá como una sola imagen.
Ver el hazdm en CodePen.
Si bien esto parece ser un gran problema para mostrar una imagen, este método corrige muy bien los dos problemas que teníamos antes. Con muy poco JavaScript (¡una línea!) Puede cambiar la posición de fondo de un div, y funciona en todo. Además, dado que todos estos marcos están en la misma imagen, solo tomará una solicitud para cargar esa imagen en la página. Entonces, una vez que la página se carga, puede cambiar entre sprites sin ningún problema.
Entonces, ¿cómo configuramos esto para animar fácilmente entonces? El primer paso es crear la hoja de sprites. Usted querrá saber cuáles deberían ser las dimensiones finales de su imagen, y espaciar los sprites en consecuencia en una cuadrícula. Por ejemplo, mi imagen J va a ser de 40px de ancho por 50px de altura, así que alineé mis sprites exactamente 40px aparte horizontalmente y exactamente 50px aparte verticalmente. Probablemente será más fácil si establece su sprite de inicio en la esquina superior izquierda.
Entonces vamos a establecer una div Con un poco de CSS para asegurarse de que todo se vea correctamente:
Y aquí está nuestro CSS para asegurarnos de que el sprite se muestre correctamente:
Accentsconagua
.carácter / * * Es muy importante que establezcamos la altura y el ancho de * nuestros caracteres a la altura y el ancho de los sprites * / altura: 50 px; ancho: 40px; / * * Necesitamos ubicarlos absolutamente para que podamos tener un control * total sobre su posición dentro de la etapa * / position: absolute; izquierda: 100px; arriba: 120px; #j / * * Y ahora configuramos la imagen de fondo para que el div div * sea el primer sprite (en la esquina superior izquierda) * / background-image: url ('j.png'); repetición de fondo: no repetición; posición de fondo: 0 0; Note las siguientes cosas:
div al tamaño de nuestro sprite'no-repetir' '0 0'-Esto mostrará el sprite en la esquina superior izquierda.Ahora, solo tomará una línea de JavaScript para cambiar la posición de fondo para mostrar el siguiente sprite.
document.getElementById ('j'). style.backgroundPosition = '-40px 0px'; Aquí, estamos seleccionando el elemento (con id = 'j'), y estableciendo el atributo de estilo 'backgroundPosition'. Note que está escrito 'backgroundPosition' en JavaScript, y no como 'posición de fondo' en CSS. Observe también que en JavaScript, el 'px' se requiere tanto para la cantidad x como para la y no podemos simplemente pasarle los números. Y debido a que estamos moviendo la imagen de fondo, tenemos que moverla en la dirección opuesta a lo que usted podría esperar. Para pasar al sprite de la derecha, tenemos que mover la imagen 40px a la izquierda.
Ahora, si solo tenemos algo simple para ejecutar este código (como un botón), podemos ver los marcos cambiando en acción: verifique el DIsgk en Codepen.
Además, podría interesarle echar un vistazo al código fuente de esta página también. Tiene todos los ejemplos aquí con comentarios completos. Y aquí está la hoja de sprites que estoy usando.
Lo que hemos cubierto en este tutorial es un buen comienzo, pero en realidad no es una animación adecuada. En la segunda parte de esta serie, animaremos algunos correr y saltar, creando bucles con los diferentes sprites..
En la cuarta parte, crearemos mouseovers para un poco de acción de robot. Ver ByGtv Codepen para una vista previa.
Aunque este puede ser un excelente método para animar en la web, hay algunos inconvenientes. Primero, puede requerir que cree cada fotograma de animación individual, lo que puede llevar mucho tiempo. En segundo lugar, los navegadores no tienen los temporizadores más precisos para la animación, por lo que si es crítico que la animación se programe a la perfección, es posible que esto no funcione. Finalmente, Mobile Safari (usado en iPhones y iPads) tiene una "característica" en la que si tiene una imagen de fondo que es más grande que 2MB o más grande que 1024 x 1024 x 3 píxeles (o 3,145,728 píxeles totales), se volverá a escalar automáticamente. Imagen, arruinando el efecto spriting. Esto significa que los sprites realmente grandes, o las animaciones con un gran número de sprites, están fuera de discusión. Pero, para animaciones pequeñas y simples que quieres que sean muy interactivas, esta es una manera fácil y excelente de obtener algo que funcione en todas partes..
1. Antes de que se introdujera el sonido con la película, no existía realmente una velocidad de cuadro estándar. Las cámaras fueron operadas por una manivela, por lo que si tuvieras un camarógrafo novato, la velocidad de fotogramas podría disminuir y acelerar involuntariamente. De manera similar, los teatros de menor reputación eran conocidos por decirle a sus proyectistas que arrancaran el proyector más rápido para acelerar el espectáculo para que pudieran incluir más proyecciones. Esta es la razón por la que pensamos de forma estereotipada que las películas de pre-sonido se mueven de manera cómicamente rápida. La mayoría se filmaron entre 16 y 18 fps, por lo que cuando las reproducimos a 24 fotogramas por segundo, se mueven más rápido de lo que se pretendía originalmente..
2. La televisión se emitió originalmente a 30 fps en América del Norte, pero la televisión en color causó un error cuando se mostraba a esa velocidad. Los ingenieros descubrieron que podían solucionarlo al reducir la velocidad de cuadros en un 0,1%, razón por la cual ahora se establece en 29,97 fps. Además, además de todos los problemas técnicos extravagantes relacionados con convertir una película en 24 fps para mostrarla en la televisión a 29,97 fps, mostrar la televisión a un fps más rápido ha tenido un efecto interesante en el público. Muchas personas que vieron los exámenes de prueba de "The Hobbit" a 48 fps informaron que el aumento de la velocidad de fotogramas hacía que la película pareciera "más barata", a pesar de que era una calidad mucho mayor que una película típica, simplemente porque habían crecido para asociarse a velocidades de fotogramas más rápidas con ver algo en la television.
