{"id":289,"date":"2019-04-01T12:34:24","date_gmt":"2019-04-01T18:34:24","guid":{"rendered":"https:\/\/www.tesseractspace.com\/blog\/?p=289"},"modified":"2019-04-12T18:01:04","modified_gmt":"2019-04-12T23:01:04","slug":"los-12-principios-de-animacion","status":"publish","type":"post","link":"https:\/\/www.tesseractspace.com\/blog\/los-12-principios-de-animacion\/","title":{"rendered":"Los 12 principios de animaci\u00f3n"},"content":{"rendered":"\n

La animaci\u00f3n se ha vuelto un componente indispensable en el dise\u00f1o interactivo. En el dise\u00f1o de UX, la animaci\u00f3n debe agregar valor, en lugar de ser un adorno, y los 12 principios de animaci\u00f3n de Disney son una buena gu\u00eda sobre el dise\u00f1o de animaciones.<\/h4>\n\n\n\n

Los llamados \u00abdoce principios b\u00e1sicos de la animaci\u00f3n<\/strong>\u00bb fueron presentados en 1981 por los animadores Ollie Johnston <\/strong>y Frank Thomas <\/strong>de Walt Disney Animation Studio <\/strong>en su libro The Illusion of Life: Disney Animation<\/a><\/strong> bas\u00e1ndose en el trabajo de los animadores de Disney <\/strong>desde 1930 en adelante.
Muchos animadores llaman a este libro la \u00abbiblia de la animaci\u00f3n<\/em>\u00bb y en 1999 fue votado como el mejor de los libros de animaci\u00f3n de todos los tiempos. <\/p>\n\n\n\n

El objetivo de documentar estos principios fue crear gu\u00edas para producir animaciones m\u00e1s realistas y que las animaciones se apegaran un poco m\u00e1s a las leyes b\u00e1sicas de la f\u00edsica, aunque tambi\u00e9n se tratan temas m\u00e1s abstractos, como la sincronizaci\u00f3n emocional <\/em>y el atractivo <\/em>de un personaje. <\/p>\n\n\n\n

Aunque los 12 principios originalmente fueron desarrollados para usarse en animaci\u00f3n tradicional, estos tambi\u00e9n pueden utilizarse como gu\u00edas en dise\u00f1o interactivo para la creaci\u00f3n de transiciones y microinteracciones en productos digitales:<\/p>\n\n\n\n

1. Estirar y encoger<\/h4>\n\n\n\n
\"Estirar
1. Estirar y encoger (Squash & stretch). Cr\u00e9dito: cento lodigiani<\/a><\/figcaption><\/figure><\/div>\n\n\n\n

El principio de estirar y encoger <\/em>agrega a una animaci\u00f3n la idea de peso y flexibilidad. Puede ser aplicado a objetos simples, como un c\u00edrculo rebotando o algo m\u00e1s complejo como tarjeta o una pantalla completa.\u200b Lo m\u00e1s importante de este principio es que el volumen del objeto no cambia cuando se estira o se encoge.<\/p>\n\n\n\n

2. Anticipaci\u00f3n<\/h4>\n\n\n\n
\"Anticipaci\u00f3n
2. Anticipaci\u00f3n (anticipation). Cr\u00e9dito: cento lodigiani<\/a> <\/figcaption><\/figure><\/div>\n\n\n\n

La anticipaci\u00f3n se usa para preparar al observador para una acci\u00f3n y que la animaci\u00f3n se sienta m\u00e1s realista. Esta t\u00e9cnica tambi\u00e9n se utiliza en momentos en que va a ocurrir un evento importante para preparar al observador y que \u00e9ste preste atenci\u00f3n a lo que est\u00e1 a punto de suceder.<\/p>\n\n\n\n

3. Puesta en escena<\/h4>\n\n\n\n
\"Puesta
3. Puesta en escena (staging). Cr\u00e9dito: cento lodigiani<\/a> <\/figcaption><\/figure><\/div>\n\n\n\n

Este principio est\u00e1 basado en lo que en teatro y en cine se conoce como \u00abpuesta en escena<\/a><\/em>\u00ab. El prop\u00f3sito es dirigir la atenci\u00f3n del observador y definir qu\u00e9 es lo m\u00e1s importante en su campo de visi\u00f3n.\u200b Esto puede hacerse de diferentes maneras, como colocar lo que queremos que el usuario centre su atenci\u00f3n dentro del cuadro, usando luces y sombra, o la perspectiva del punto de visi\u00f3n del observador.\u200b<\/p>\n\n\n\n

Lo importante es mantener la atenci\u00f3n del observador en lo que es relevante, evitando los detalles innecesarios. En dise\u00f1o interactivo, la definici\u00f3n de affordances<\/a><\/em> es parte de la puesta en escena.<\/p>\n\n\n\n

4. Animaci\u00f3n directa y pose a pose.<\/h4>\n\n\n\n
\"Animaci\u00f3n
4. Animaci\u00f3n directa y pose a pose (Straight ahead & pose to pose). Cr\u00e9dito: cento lodigiani<\/a> <\/figcaption><\/figure><\/div>\n\n\n\n

Estas son dos aproximaciones distintas al proceso de crear una animaci\u00f3n: la animaci\u00f3n directa<\/strong> significa dibujar directamente una escena cuadro por cuadro de principio a fin. La animaci\u00f3n directa<\/strong> crea una ilusi\u00f3n de fluidez y dinamismo en el movimiento y es mejor para producir secuencias realistas, aunque en esta t\u00e9cnica es m\u00e1s dif\u00edcil mantener proporciones y perspectivas precisas.<\/p>\n\n\n\n

La animaci\u00f3n pose a pose<\/strong> implica empezar el proceso de animaci\u00f3n dibujando los cuadros clave y posteriormente llenando los espacios (algo que los dise\u00f1adores familiarizados con Adobe Flash <\/strong>conocen como tweetning<\/a><\/em>). \u200bPor lo general, se usa una combinaci\u00f3n de ambas t\u00e9cnicas para mejores resultados. <\/p>\n\n\n\n

5. Acciones complementarias y superpuestas<\/h4>\n\n\n\n
\"Acciones
5. Acciones complementarias y superpuestas (Follow through & overlapping). Cr\u00e9dito: cento lodigiani<\/a> <\/figcaption><\/figure><\/div>\n\n\n\n

Las acciones complementarias y las superpuestas <\/strong>son t\u00e9cnicas de animaci\u00f3n que se relacionan estrechamente, ya que ambas ayudan a que el movimiento sea m\u00e1s realista y d\u00e9 la ilusi\u00f3n de que un objeto se mueve respetando el principio f\u00edsico de la inercia:<\/em><\/p>\n\n\n\n