{"id":9623,"date":"2021-02-02T11:34:27","date_gmt":"2021-02-02T10:34:27","guid":{"rendered":"https:\/\/www.makingscience.com\/blog\/principios-de-la-animacion\/"},"modified":"2021-02-02T11:34:27","modified_gmt":"2021-02-02T10:34:27","slug":"principios-de-la-animacion","status":"publish","type":"post","link":"https:\/\/www.makingscience.com\/es\/blog\/principios-de-la-animacion\/","title":{"rendered":"Principios de la animaci\u00f3n"},"content":{"rendered":"
Principios de la animaci\u00f3n<\/div>\n
En este art\u00edculo vamos a descubrir unos trucos para animar las piezas de v\u00eddeo de tus campa\u00f1as. Para ello vamos a ver algunos de los \u201c12 principios de la animaci\u00f3n\u201d recogidos en el libro \u201cThe Illusion of Life\u201d que escribieron Frank Thomas y Ollie Johnston, dos de los \u201c9 ancianos\u201d que trabajaron en Disney entre 1934 y 1978. \"\"   Los 12 principios de la animaci\u00f3n son:<\/strong> <\/p>\n
    \n
  1. Estirar y Encoger<\/li>\n
  2. Anticipaci\u00f3n<\/li>\n
  3. Puesta en Escena<\/li>\n
  4. Acci\u00f3n Directa y Pose<\/li>\n
  5. Acci\u00f3n Continuada y Superpuesta<\/li>\n
  6. Easy In \u2013 Easy Out<\/li>\n
  7. Arcos<\/li>\n
  8. Acci\u00f3n Secundaria<\/li>\n
  9. Timing<\/li>\n
  10. Exageraci\u00f3n<\/li>\n
  11. Solidez<\/li>\n
  12. Personalidad y Atractivo (Appeal)<\/li>\n<\/ol>\n

    <\/h2>\n

    Estirar y Encoger \/ Acci\u00f3n Continuada y Superpuesta<\/h2>\n

    \"\" \"\" Seg\u00fan c\u00f3mo sea la animaci\u00f3n podemos dar sensaci\u00f3n de tener un material u otro y transmitir diferentes sensaciones. \"\" En este caso la acci\u00f3n principal es juntar las letras y deformar la escala, y el rebote es la acci\u00f3n superpuesta. <\/p>\n

    Anticipaci\u00f3n<\/h2>\n

    La anticipaci\u00f3n consiste en preparar al espectador para el movimiento que viene a continuaci\u00f3n. En la imagen del corredor de abajo que tiene una posici\u00f3n inicial (A), vemos que antes de empezar a correr (C) pasa por una segunda posici\u00f3n (B). Aparte de anticipar la acci\u00f3n, tambi\u00e9n transmite naturalidad. \"\" \"\" En nuestras animaciones, podemos utilizar este principio para avisar al espectador de algo que va a pasar y dirigir su mirada hacia donde nosotros queremos. Pongamos un CTA (Call To Action) de ejemplo: \"\" Llamamos la atenci\u00f3n al punto que queremos con un movimiento previo, y anticipamos la acci\u00f3n principal (el texto \u201c\u00a1M\u00edrame!\u201d) con otra secundaria (las l\u00edneas que rodean la palabra que queremos mostrar).   <\/p>\n

    Acci\u00f3n Directa y Pose<\/h2>\n

    \"\" \"\" Este principio nos muestra la manera de animar los elementos de nuestra creatividad. Para crear una animaci\u00f3n r\u00e1pida se necesitan dibujar menos frames que en una animaci\u00f3n m\u00e1s lenta. Veamos un ejemplo: Acci\u00f3n directa <\/strong> \"\" Pose a pose<\/strong> \"\" La mariposa de la izquierda (Acci\u00f3n directa) tiene un movimiento m\u00e1s fluido y vemos que sus alas hacen todo el recorrido. En cambio la de la derecha (pose a pose) solo tiene 3 posiciones. Al ser un movimiento r\u00e1pido no es necesario tener todas las posiciones, ya que el ojo humano se encarga de unir las que faltan para que la animaci\u00f3n tenga sentido. En los programas que utilizamos d\u00eda a d\u00eda para animar, como pueden ser After Effects o Google Web Designer, entre otros, trabajamos mediante keyframes (pose a pose), y el programa se encarga de interpolar los fotogramas dibujando internamente los keyframes que nosotros no ponemos (acci\u00f3n directa). \"\"   <\/p>\n

    Easy In – Easy Out<\/h2>\n

    \"\" \"\" La mayor\u00eda de los movimientos tienen una aceleraci\u00f3n y una desaceleraci\u00f3n. Incluso los movimientos mec\u00e1nicos reales no son perfectos, necesitan una acci\u00f3n superpuesta para tener m\u00e1s realismo. \"\" El rebote nos da \u201cnaturalidad\u201d<\/strong> a ese movimiento mec\u00e1nico. \"\"\"\" *Animaci\u00f3n realizada por Making Science del logo IE School of Architecture & Design. Seg\u00fan el cliente tenemos que tener en cuenta la animaci\u00f3n que vamos a realizar, ya que seg\u00fan qu\u00e9 tipo de animaci\u00f3n hagas se transmiten diferentes cosas (robustez, flexibilidad, seriedad, tranquilidad, etc\u2026). En este caso, el rebote del ejemplo 3 quedar\u00eda muy \u201ccartoon\u201d o infantil y no es lo que queremos transmitir. Y el ejemplo 2, a pesar de ser serio, queda muy poco natural. En cambio el primer logo refleja la seriedad del 2, pero gracias a la velocidad que le hemos dado con las curvas, tambi\u00e9n le da fuerza y decisi\u00f3n.   <\/p>\n

    Arcos<\/h2>\n

      \"\" A la hora de mover elementos, debemos tener en cuenta que la mayor\u00eda de las cosas no se mueven rectas si no de manera curva, consiguiendo un movimiento natural y m\u00e1s realista.   <\/p>\n

    Timing<\/h2>\n

    \"\" \"\" El tiempo<\/strong> que le damos a la animaci\u00f3n tambi\u00e9n crea una f\u00edsica a los objetos. En este caso, la animaci\u00f3n es la misma pero vemos que \u201cscience\u201d es m\u00e1s el\u00e1stico que \u201cmaking\u201d por la rapidez con la que la mano consigue estirar la palabra y el tiempo que tarda en estabilizarse una vez que la suelta.   <\/p>\n

    Acci\u00f3n Secundaria<\/h2>\n

    \"\" Para reforzar la acci\u00f3n principal y darle m\u00e1s complejidad, creamos otra animaci\u00f3n secundaria para complementar la primera. Esto har\u00e1 m\u00e1s llamativa nuestra animaci\u00f3n y har\u00e1 que los usuarios se queden a ver el v\u00eddeo. En el caso del barco, la acci\u00f3n secundaria ser\u00eda el humo. Es un elemento que ayuda pero se podr\u00eda entender la animaci\u00f3n sin \u00e9l. Se pueden a\u00f1adir m\u00e1s elementos que complementen la animaci\u00f3n, pero hay que tener cuidado de no pasarse, no queremos distraer la atenci\u00f3n de lo que verdaderamente importa en nuestro anuncio. \"\" En el ejemplo que hemos visto antes, las l\u00edneas peque\u00f1as que acompa\u00f1an a la principal la complementan, dando m\u00e1s sensaci\u00f3n de movimiento.   <\/p>\n

    Bonus<\/h2>\n

    Un \u00faltimo tip a la hora de animar en cada programa es tener en cuenta las curvas de los keyframes. Algo muy sencillo que mejorar\u00e1 las animaciones significativamente. \"\"   Todos estos principios ayudar\u00e1n a nuestras animaciones, pero no siempre es necesario seguirlos al pie de la letra. Cada animador tendr\u00e1 que valorar qu\u00e9 quiere transmitir y jugar con lo aprendido. Estas son unas reglas b\u00e1sicas, pero siempre podremos romperlas con criterio.<\/div>\n","protected":false},"excerpt":{"rendered":"

    Principios de la animaci\u00f3n En este art\u00edculo vamos a descubrir unos trucos para animar las piezas de v\u00eddeo de tus campa\u00f1as. Para ello vamos a ver algunos de los \u201c12 principios de la animaci\u00f3n\u201d recogidos en el libro \u201cThe Illusion of Life\u201d que escribieron Frank Thomas y Ollie Johnston, dos de los \u201c9 ancianos\u201d que […]<\/p>\n","protected":false},"author":21,"featured_media":9647,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[27],"tags":[63],"class_list":["post-9623","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-advertising","tag-creativity-design"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/posts\/9623","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/comments?post=9623"}],"version-history":[{"count":0,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/posts\/9623\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/media\/9647"}],"wp:attachment":[{"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/media?parent=9623"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/categories?post=9623"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.makingscience.com\/es\/wp-json\/wp\/v2\/tags?post=9623"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}