# Formatos y procesamiento de animación

Según el diccionario de la Real Academia Española, la animación es la técnica cinematográfica que consiste en fotografiar una serie de figuras, generalmente dibujadas o modeladas, con mínimos cambios de posición para dar una impresión de movimiento cuando se proyecten de manera continuada a cierta velocidad. Con el avance de las tecnologías ya no es necesario fotografiar una serie de figuras, sino que pueden realizarse animaciones directamente con programas informáticos.
El objetivo de esta lección es que conozcamos más acerca de los formatos más comunes de animación y de los procedimientos de animación que se utilizan en la actualidad.

# Introducción

Una animación es un cambio progresivo en el tiempo, que puede apreciarse a simple vista, de una propiedad o atributo de un elemento. Las animaciones más habituales consisten en cambiar la posición, tamaño o color.
Desde el punto de vista biológico, la animación se base en que un objeto visto por el ojo humano permanece químicamente mapeado sobre la retina del ojo por un breve tiempo después de visualizado. Combinado con la necesidad de la mente para una conceptualización completa de la acción percibida, esto hace posible que una series de imágenes que son cambiadas muy ligeramente y muy rápidamente, una después de otra, sean aparentemente mezcladas juntas dentro una ilusión visual de movimiento. Cuando una serie de imágenes son presentadas en sucesión rápida, el sistema visual mezcla las imágenes. Si las sucesivas imágenes varían de una a otra ligeramente, el efecto final que se produce es la percepción de un continuo, de un cambio suave.
La animación por ordenador recoge todas las herramientas necesarias para diseñar, modelar y renderizar las imágenes 2D o modelos 3D necesarios para componer una animación. Para la animación 2D se crea una ilusión de movimiento, mostrándolo en pantalla una sucesión de imágenes con ligeras variaciones (movimientos, cambios de forma, tamaño, color...). Para las animaciones 3D se modelan los objetos en 3D y luego se les otorga un esqueleto virtual. Este esqueleto sirve para crear los distintos movimientos del modelo 3D y, una vez compuesta la animación a base de una secuencia de estos movimientos, se renderiza la animación.

# Formatos de animación

En este subapartado vamos a tratar los formatos de animación mas extendidos en la actualidad. El archivo puede contener una secuencia de fotogramas o la definición de trazos y sus deformaciones en el tiempo. Existen formatos de archivo específicos para animaciones y otros más genéricos que pueden contener diversos tipos de multimedia.

## SWF

Se trata de un formato reducido de animación en Flash. Hasta Mayo de 2008 se trataba de un formato propiedad de Adobe, pero después su especificación se hizo completamente pública. Permite crear imágenes de programación actionscript. En la actualidad, su uso se está desaconsejando en detrimento de HTML5. Tal es el caso que navegadores como Google Chrome ya no soportan flash.
Una de las características que hicieron que el uso de este formato se extendiera por Internet es el reducido tamaño de los fichero .swf generados.

### Ventajas

* Permite crear animaciones, vídeos o incluso videojuegos.
* Archivos SWF de pequeño tamaño.

### Desventajas

* Requieren tener instalado el Plugin Adobe Flash Player.
* Actualmente su uso está desaconsejado.

## GIF

Es un formato de imagen con compresión sin pérdida, esto significa que al pasar a otros formatos de compresión sin pérdida la calidad de la imagen no se reduce

### Características principales

* Paleta de 256 colores.
* Compresión sin pérdida.
* Permite animar imágenes.
* Permite el uso del canal alfa para transparencias.

### Ventajas

* Portabilidad
* Facilidad de transmisión
* Compatibilidad
* Gratuito (actualmente, la patente del algoritmo LZW ha caducado).

### Desventajas

* Baja resolución
* Baja calidad
* Baja precisión

### GIFV

GIFV es un nuevo formato creado por Imgur para sustituir el formato GIF. Consiste en emplear y comprimir videos en formato MP4, que se repiten infinitamente, para crear las animaciones.
¿La ventaja? la calidad de las animaciones es mucho mayor (no está limitada a 256 colores) mientras que el tamaño se mantiene reducido (por la compresión de MP4). En el siguiente enlace podemos ver un ejemplo de una animación que en formato GIFV ocupa 3,4 MB mientras que en GIF ocupa 50 MB.
Actualmente no se trata de un estándar, pero gracias a la alta popularidad de Imgur no sería extraño que se acabase convirtiendo en uno.

## SVG

SVG (Scalable Vector Graphics) es una especificación para describir gráficos vectoriales en 2 dimensiones basados en el formato XML. SVG almacena líneas, curvas, degradados, colores y el resto de la información necesaria para crear una imagen y es la aplicación la que se encarga de construirla. Esto nos da las dos características y ventajas principales de este formato: los gráficos vectoriales no pierden calidad al ser escalados y, al basarse en el formato XML, se puede comprimir fácilmente para que las transmisiones sean más rápidas (con gzip, pasando a ser imágenes SVGZ).
Permite tres tipos de objetos:
* Elementos geométricos: rectas, curvas y áreas delimitados por ellos, bordes...
* Imágenes de mapa de bits
* Texto
Es soportado por la mayoría de navegadores actuales: Mozila Firefox (v1.5), Opera, Internet Explorer (v9), Safari (v3.1), Chrome(v0) y Microsoft Edge (build 20059 de W10). Aunque en un principio el rendimiento era una problema, actualmente se ha visto mejorado, sobre todo en las versiones más recientes de estos navegadores.
En cuanto a su uso como fuente multimedia permite animaciones mediante los lenguajes ECMAScript o SMIL y el uso de manejadores de eventos de ratón y teclado, como onClick u onMouseDown. Pueden crearse animaciones sencillas como las de la Figura 3 o incluso videojuegos, como este tetris

### Ventajas

* Ligero
* Soportado por la mayoría de navegadores actuales
* Muy útil en las web responsive
* Permite representar imágenes, animaciones y texto.

### Desventajas

* Rendimiento, debido a que hay que rasterizar la imagen (pasarla de imagen vectorial a imagen de mapa de bits).

## MNG

Es un formato de fichero, libre de derechos, para imágenes animadas. Es considerado como una extensión del formato de imagen PNG. Se crearon dos versiones de MNG de complejidad reducida: MNG-LC (baja complejidad) y MNG-VLC (complejidad muy baja).
Son muy pocos los navegadores que soportan este formato; Opera lo soporta parcialmente, Safari no lo soporta y Mozilla retiró el soporte de MNG a partir de la versión 1.5a.

# Procesamiento de animación

En este apartado vamos a ver algunas de las técnicas de animación existentes.
Existen muchas técnicas de animación. Hasta hace algunos años la más utilizada era el dibujo animado, el cual se realizaba a partir de dibujos hechos a mano. Sin embargo, hoy en día los avances de la tecnología han llevado a que la mayor parte de animaciones se realicen por medio de técnicas digitales.

## Dibujos Animados 2D

Muy utilizada en los dibujos antiguos, como los del ratón Mickey Mouse.
En sus inicios se realizaban a través del dibujado y pintado de cada fotograma (incluido el fondo de la animación) para luego ser filmados. En la década de 1910, se agilizó el proceso al aparecer la animación por celdas (inventada por Bray y Hurd) la cual consistía en usar láminas transparentes en las que se animaban los personajes sin tener que pintar el fondo en cada fotograma.
Actualmente apenas se utiliza debido a que se necesita mucho tiempo y personal. Hoy en día se utilizan diversos medios digitales.

## Stop Motion

Es una técnica de animación que consiste en aparentar el movimiento de objetos estáticos por medio de una sucesión de imágenes fotografiadas. El movimiento del objeto estático se construye, fotograma a fotograma, manipulando el objeto entre tomas.
Se pueden dividir en dos variantes:
* Animación de plastilina o Claymotion (materiales maleables). Por ejemplo Wallace & Gromit.
* Animación de objetos rígidos. Por ejemplo la técnica de animación Brickfilm - en la que se emplean ladrillos de LEGO.

### Pixilación

Es una variante de la técnica de Stop Motion, pero utilizando personas humanas en lugar de objetos inanimados.
Al igual que en la técnica de StopMotion, los objetos son fotografiados repetidas veces y desplazados ligeramente entre cada fotografía.
Técnica muy empleada en videoclips y spots publicitarios.

## Rotoscopía o motion capture

Técnica de animación muy antigua que consiste en re-dibujar o calcar un fotograma teniendo otro como referencia.
Por lo general la rotoscopía suele usarse para re-dibujar vídeos, frame a frame, una excelente rotoscopía sería re-dibujando sus 25 fotogramas, aunque haciendo menos, como 22, 12 u 8 se pueden conseguir fantásticos resultados.

## Animación por Recortes

En esta técnica se utilizan figuras recortadas, ya sea de papel o incluso fotografías.

## Animación con Acetatos

El acetato es una pieza transparente de película utilizada en la animación tradicional.
Para este tipo de técnica, los acetatos se colocan en capas (una encima de la otra) para producir un solo cuadro de animación. Se utiliza un acetato separado para la capa del fondo y otro para cada objeto que se mueve independientemente sobre el fondo.

## Animación basada en cuadros

Es el tipo de animación más simple que se puede visualizar, se genera por el despliegue rápido de hojas. En una computadora es el despliegue de archivos gráficos.
Para conseguir la sensación de movimiento las secuencias de archivos gráficos son desplegadas en una sucesión muy rápida y la diferencia de una imagen con la anterior es muy corta.

## Animación en Sprite

Cada objeto es sobrepuesto y animado sobre un fondo de imagen estático, un sprite es cualquier tipo de la animación que puede ser movido independientemente.
Para esta técnica es imprescindible el manejo de buffer o memoria fuera de la pantalla que le permita generar los cuadros con antelación al momento del despliegue, permitiendo así una animación fluida y rápida.
Este tipo de técnica es muy utilizada en videojuegos.

## Otras técnicas

Existen muchas técnicas de animación que sólo han sido utilizadas por unos y que son desconocidas para el gran público.

### Pintura sobre cristal

Esta técnica consiste en pintar una ilustración con óleos de acción retardada sobre un cristal, y manipularla entre fotografías. También se puede realizar con goauche mezclado con glicerina.

### Animación de arena

Para este tipo de animación es necesaria una mesa con un cristal que se encuentre iluminada por la parte inferior. La función de la arena es dejar pasar mayor o menor cantidad de luz en el cristal dando lugar así a una imagen que será fotografiada por encima de la mesa de trabajo.
Una vez encendida la mesa, el trabajo consiste en hacer dibujos con la arena e ir fotografiando cada cambio que se realice.

### Pantalla de agujas

En esta técnica de animación se utiliza una pantalla llena de agujas que pueden moverse hacia adentro o hacia afuera, presionándolas con un objeto.
Estas agujas generan un relieve, el cual se ilumina desde los costados para generar una imagen en la pantalla (con su sombra). Con este tipo de técnica se pueden lograr efectos de texturas muy difíciles de conseguir con la animación tradicional por celdas.

### Tweening

Proceso de generar cuadros intermedios entre dos imágenes por interpolación para dar el aspecto de que la primera imagen se convierte suavemente en la segunda. La interpolación se puede hacer a mano o mediante ordenador.

## Animación Digital 3D

Es un tipo de animación que simula las tres dimensiones X, Y, y Z.
Se basa en utilizar programas informáticos para diseñar, modelar, renderizar y crear las animaciones. Básicamente se basa en modelar un objeto en 3D, aportarle un esqueleto, articular dicho esqueleto, crear las animaciones (variando la posición del objeto o de la cámara, regulando las luces...) y por último, tomar "instantáneas".

## Captura de movimiento

Consiste en capturar el movimiento de personas o animales reales mediante sensores. Desde un ordenador, se graban estos movimientos y se cambia el cuerpo de la persona o el animal por un modelo 2D o 3D.
Los ejemplos más comunes son el típico traje negro con sensores de colores (famoso en la publicidad del videojuego FIFA hace unos años) o el uso de Kinect de Microsoft para capturar los movimientos.
Se utiliza principalmente en la industria del cine de fantasía o de ciencia ficción, en la industria de los videojuegos o también en los deportes, con fines médicos.

# Referencias

* Fuente: formato SWF
* Fuente: formato GIF
* Fuente: formato GIFV
* Fuente: formato SVG
* Fuente: formato MNG
* Stop Motion
* Brickfilm
* Pixilación
* Rotoscopía
* Animación con recortes
* Animación con Acetatos
* Animación basada en cuadros
* Sprite
* Animación con arena
* Pantalla de agujas
* Tweening
* Captura de movimiento

# Presentación

* https://drive.google.com/open?id=1WF8ijoAYU8P4VIrQN4rwqVRkY2IoHNzhCpKC2N_9_xQ

# Alumnos implicados

* Jorge Casas Hernán
* Mariano Hernández García
* Alberto Lorente Sánchez

### Curso 2016-2017

* Diego Monjas