{"id":16341,"date":"2018-08-14T12:01:21","date_gmt":"2018-08-14T15:01:21","guid":{"rendered":"https:\/\/www.mxcursos.com\/blog\/?p=16341"},"modified":"2019-03-16T02:13:33","modified_gmt":"2019-03-16T05:13:33","slug":"conheca-os-12-principios-da-animacao","status":"publish","type":"post","link":"https:\/\/www.mxcursos.com\/blog\/conheca-os-12-principios-da-animacao\/","title":{"rendered":"Conhe\u00e7a os 12 Princ\u00edpios da Anima\u00e7\u00e3o"},"content":{"rendered":"<p>Os <strong>princ\u00edpios da anima\u00e7\u00e3o<\/strong> formam a base de todo trabalho de movimento. <strong>Os 12 princ\u00edpios de anima\u00e7\u00e3o<\/strong> foram introduzidos pela primeira vez pelos animadores da Disney Ollie Johnston e Frank Thomas em seu livro\u00a0<a href=\"http:\/\/amzn.to\/2suFlKL\" target=\"_blank\" rel=\"noopener noreferrer\" data-track-type=\"click\" data-index=\"1\" data-component=\"Inline links\" data-count=\"8\">A Ilus\u00e3o da Vida: Anima\u00e7\u00e3o da Disney<\/a>, lan\u00e7ado originalmente em 1981.<\/p>\n<p>Neste livro, Johnston e Thomas examinam o trabalho dos principais animadores da Disney. D\u00e9cada de 1930 em diante, e abordam at\u00e9 <strong>12 princ\u00edpios b\u00e1sicos de anima\u00e7\u00e3o<\/strong>. Esses princ\u00edpios formam a base de todo trabalho de anima\u00e7\u00e3o.<\/p>\n<p>Eles s\u00e3o relevantes para v\u00e1rios campos diferentes.\u00a0O uso mais \u00f3bvio \u00e9 para anima\u00e7\u00e3o de um personagem, mas essas regras tamb\u00e9m s\u00e3o um guia inestim\u00e1vel em web design e motion design.<\/p>\n<p>Neste artigo, vamos dar uma olhada em cada <strong>princ\u00edpio da anima\u00e7\u00e3<\/strong>o, com v\u00eddeos \u00fateis de\u00a0<a style=\"font-style: inherit; font-weight: inherit;\" href=\"https:\/\/twitter.com\/centolodigiani?lang=en\" target=\"_blank\" rel=\"noopener noreferrer\" data-track-type=\"click\" data-index=\"4\" data-component=\"Inline links\" data-count=\"8\">Vincenzo Lodigiani<\/a>. Depois de entender esses <strong>12 princ\u00edpios de anima\u00e7\u00e3o<\/strong>, voc\u00ea poder\u00e1 levar seu trabalho de movimento para o pr\u00f3ximo n\u00edvel.<\/p>\n<p>Estes s\u00e3o os princ\u00edpios e o que eles significam:<\/p>\n<h2>1 &#8211; Comprimir e Esticar &#8211; Squash And Stretch<\/h2>\n<div style=\"width: 640px;\" class=\"wp-video\"><!--[if lt IE 9]><script>document.createElement('video');<\/script><![endif]-->\n<video class=\"wp-video-shortcode\" id=\"video-16341-1\" width=\"640\" height=\"296\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/08\/01.-Squash-and-stretch.mp4?_=1\" \/><a href=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/08\/01.-Squash-and-stretch.mp4\">https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/08\/01.-Squash-and-stretch.mp4<\/a><\/video><\/div>\n<p>O <strong>Princ\u00edpio do Squash e Stretch<\/strong> \u00e9 considerado o mais importante dos <strong>12 princ\u00edpios da anima\u00e7\u00e3o<\/strong>.\u00a0Quando aplicado, ele d\u00e1 aos seus personagens e objetos animados a ilus\u00e3o de gravidade, peso, massa e flexibilidade.<\/p>\n<p>Pense em como uma bola de borracha saltitante pode reagir quando atirada ao ar: a bola se estica quando ela sobe e desce e esguicha quando atinge o solo. Ao usar <em>Squash e Stretch<\/em>, \u00e9 importante manter o volume do objeto consistente.\u00a0Ent\u00e3o, quando voc\u00ea estica algo, ele precisa ficar mais fino, e quando voc\u00ea espreme algo, ele precisa ficar mais largo.<\/p>\n<h2>2 &#8211; Antecipa\u00e7\u00e3o &#8211; Anticipation<\/h2>\n<div style=\"width: 640px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-16341-2\" width=\"640\" height=\"296\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/08\/02.-Anticipation.mp4?_=2\" \/><a href=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/08\/02.-Anticipation.mp4\">https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/08\/02.-Anticipation.mp4<\/a><\/video><\/div>\n<p>A <em>Antecipa\u00e7\u00e3o<\/em> ajuda a preparar o espectador para o que est\u00e1 prestes a acontecer.\u00a0Quando aplicado, ele tem o efeito de tornar a a\u00e7\u00e3o do objeto mais realista. Considere como poderia parecer se voc\u00ea saltasse no ar sem dobrar os joelhos, ou talvez jogar uma bola sem antes puxar o bra\u00e7o para tr\u00e1s.\u00a0Parece muito antinatural (pode at\u00e9 n\u00e3o ser poss\u00edvel pular sem dobrar os joelhos!).\u00a0Da mesma forma, animar os movimentos sem um lampejo de antecipa\u00e7\u00e3o tamb\u00e9m far\u00e1 com que seu movimento pare\u00e7a desajeitado, obsoleto e sem vida.<\/p>\n<h2>3 &#8211; Encena\u00e7\u00e3o &#8211; Staging<\/h2>\n<div style=\"width: 640px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-16341-3\" width=\"640\" height=\"296\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/08\/03.-Staging.mp4?_=3\" \/><a href=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/08\/03.-Staging.mp4\">https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/08\/03.-Staging.mp4<\/a><\/video><\/div>\n<p><strong>Encena\u00e7\u00e3o em anima\u00e7\u00e3o<\/strong> \u00e9 muito parecida com composi\u00e7\u00e3o em obras de arte.\u00a0O que queremos dizer com isso \u00e9 que voc\u00ea deve usar o movimento para guiar o olho do espectador e chamar a aten\u00e7\u00e3o para o que \u00e9 importante dentro da cena.\u00a0Mantenha o foco no que \u00e9 importante dentro da cena e mantenha o movimento de todo o resto de n\u00e3o-import\u00e2ncia ao m\u00ednimo.<\/p>\n<h2>4 &#8211; Anima\u00e7\u00e3o pose-a-pose ou direta &#8211; Straight Ahead and Pose to Pose<\/h2>\n<div style=\"width: 640px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-16341-4\" width=\"640\" height=\"296\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/08\/04.-Straight-ahead-action-and-pose-to-pose.mp4?_=4\" \/><a href=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/08\/04.-Straight-ahead-action-and-pose-to-pose.mp4\">https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/08\/04.-Straight-ahead-action-and-pose-to-pose.mp4<\/a><\/video><\/div>\n<p>H\u00e1 duas maneiras de lidar com anima\u00e7\u00e3o de desenho: Pose-a-Pose ou Direta.\u00a0Cada um tem seus pr\u00f3prios benef\u00edcios e as duas abordagens s\u00e3o frequentemente combinadas.<\/p>\n<p>A a\u00e7\u00e3o direta envolve o desenho quadro a quadro do in\u00edcio ao fim.\u00a0Se voc\u00ea est\u00e1 procurando por movimentos flu\u00eddos e realistas, a a\u00e7\u00e3o direta \u00e9 a sua melhor aposta. Com a pose para colocar a t\u00e9cnica, voc\u00ea desenha o quadro inicial, o quadro final e alguns quadros-chave no meio.<\/p>\n<p>Ent\u00e3o voc\u00ea volta e completa o resto.\u00a0Essa t\u00e9cnica lhe d\u00e1 um pouco mais de controle dentro da cena e permite aumentar o efeito dram\u00e1tico do movimento.<\/p>\n<h2>5. Sobreposi\u00e7\u00e3o e Continuidade da A\u00e7\u00e3o &#8211; Follow Through And Overlapping<\/h2>\n<div style=\"width: 640px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-16341-5\" width=\"640\" height=\"296\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/08\/05.-Follow-through-and-overlapping-action.mp4?_=5\" \/><a href=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/08\/05.-Follow-through-and-overlapping-action.mp4\">https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/08\/05.-Follow-through-and-overlapping-action.mp4<\/a><\/video><\/div>\n<p>Quando os objetos pararem depois de estarem em movimento, diferentes partes do objeto ser\u00e3o interrompidas em taxas diferentes.\u00a0Da mesma forma, nem tudo em um objeto se mover\u00e1 na mesma propor\u00e7\u00e3o.\u00a0Isso forma a ess\u00eancia do quinto dos princ\u00edpios de anima\u00e7\u00e3o da Disney. Se seu personagem estiver correndo pela cena, seus bra\u00e7os e pernas podem estar se movendo a uma taxa diferente da cabe\u00e7a deles.\u00a0Esta \u00e9 uma a\u00e7\u00e3o sobreposta.<\/p>\n<p>Da mesma forma, quando eles param de correr, o cabelo deles provavelmente continuar\u00e1 a se mover por alguns quadros antes de parar &#8211; isso \u00e9 seguido.<\/p>\n<p>Estes s\u00e3o princ\u00edpios importantes para entender se voc\u00ea deseja que sua anima\u00e7\u00e3o flua de forma realista.<\/p>\n<h2>6 &#8211;\u00a0Acelera\u00e7\u00e3o E Desacelera\u00e7\u00e3o &#8211;\u00a0Slow In And Slow Out<\/h2>\n<div style=\"width: 640px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-16341-6\" width=\"640\" height=\"296\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/08\/06.-Slow-in-and-slow-out.mp4?_=6\" \/><a href=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/08\/06.-Slow-in-and-slow-out.mp4\">https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/08\/06.-Slow-in-and-slow-out.mp4<\/a><\/video><\/div>\n<p>A melhor maneira de entender a acelera\u00e7\u00e3o e a desacelera\u00e7\u00e3o \u00e9 pensar em como o carro liga e para.\u00a0Ele come\u00e7ar\u00e1 a se mover lentamente, antes de ganhar impulso e acelerar.\u00a0O inverso acontecer\u00e1 quando o carro frear.<\/p>\n<p>Na anima\u00e7\u00e3o, esse efeito \u00e9 obtido adicionando mais quadros no in\u00edcio e no final de uma seq\u00fc\u00eancia de a\u00e7\u00e3o.\u00a0Aplique este princ\u00edpio para dar mais vida aos seus objetos.<\/p>\n<h2>7 &#8211;\u00a0Movimento Em Forma De Arco &#8211;\u00a0Arcs<\/h2>\n<div style=\"width: 640px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-16341-7\" width=\"640\" height=\"296\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/08\/07.-Arc.mp4?_=7\" \/><a href=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/08\/07.-Arc.mp4\">https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/08\/07.-Arc.mp4<\/a><\/video><\/div>\n<p>Ao trabalhar em anima\u00e7\u00e3o, \u00e9 melhor seguir as leis da f\u00edsica.\u00a0A maioria dos objetos segue um arco ou um caminho quando eles est\u00e3o se movendo, e suas anima\u00e7\u00f5es devem refletir esse arco.\u00a0Por exemplo, quando voc\u00ea arremessa uma bola no ar, ela segue um arco natural \u00e0 medida que os efeitos da gravidade da Terra atuam sobre ela.<\/p>\n<h2>8 &#8211;\u00a0A\u00e7\u00e3o Secund\u00e1ria &#8211;\u00a0Secondary Action<\/h2>\n<div style=\"width: 640px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-16341-8\" width=\"640\" height=\"296\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/08\/08.-Secondary-action.mp4?_=8\" \/><a href=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/08\/08.-Secondary-action.mp4\">https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/08\/08.-Secondary-action.mp4<\/a><\/video><\/div>\n<p>A\u00e7\u00f5es secund\u00e1rias s\u00e3o usadas para apoiar ou enfatizar a a\u00e7\u00e3o principal que ocorre em uma cena.\u00a0Adicionar a\u00e7\u00f5es secund\u00e1rias ajuda a adicionar mais dimens\u00e3o aos seus personagens e objetos. Por exemplo, o movimento sutil do cabelo do seu personagem enquanto ele caminha, ou talvez uma express\u00e3o facial ou um objeto secund\u00e1rio reagindo ao primeiro.\u00a0Qualquer que seja o caso, esta a\u00e7\u00e3o secund\u00e1ria n\u00e3o deve desviar a aten\u00e7\u00e3o da prim\u00e1ria.<\/p>\n<h2>9 &#8211;\u00a0Temporiza\u00e7\u00e3o &#8211;\u00a0Timing<\/h2>\n<div style=\"width: 640px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-16341-9\" width=\"640\" height=\"296\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/08\/09.-Timing.mp4?_=9\" \/><a href=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/08\/09.-Timing.mp4\">https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/08\/09.-Timing.mp4<\/a><\/video><\/div>\n<p>Para este princ\u00edpio de anima\u00e7\u00e3o, precisamos olhar para as leis da f\u00edsica novamente e aplicar o que vemos no mundo natural \u00e0s nossas anima\u00e7\u00f5es.\u00a0Nesse caso, o foco est\u00e1 no tempo. Se voc\u00ea mover um objeto mais r\u00e1pido ou lentamente do que se moveria naturalmente no mundo real, o efeito n\u00e3o ser\u00e1 cr\u00edvel.\u00a0Usando o tempo correto permite que voc\u00ea controle o humor e a rea\u00e7\u00e3o de seus personagens e objetos.\u00a0Isso n\u00e3o quer dizer que voc\u00ea n\u00e3o pode empurrar as coisas um pouco (especialmente se voc\u00ea est\u00e1 criando um mundo imagin\u00e1rio) &#8211; mas se voc\u00ea fizer isso, seja consistente.<\/p>\n<h2>10 &#8211;\u00a0Exagero &#8211;\u00a0Exaggeration<\/h2>\n<div style=\"width: 640px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-16341-10\" width=\"640\" height=\"296\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/08\/10.-Exaggeration.mp4?_=10\" \/><a href=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/08\/10.-Exaggeration.mp4\">https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/08\/10.-Exaggeration.mp4<\/a><\/video><\/div>\n<p>Muito realismo pode arruinar uma anima\u00e7\u00e3o, fazendo com que ela pare\u00e7a est\u00e1tica e chata.\u00a0Em vez disso, adicione um pouco de exagero aos seus personagens e objetos para torn\u00e1-los mais din\u00e2micos.\u00a0Encontre maneiras de ultrapassar os limites al\u00e9m do poss\u00edvel e suas anima\u00e7\u00f5es aparecer\u00e3o.<\/p>\n<h2>11 &#8211;\u00a0Desenho Volum\u00e9trico &#8211;\u00a0Solid Drawing<\/h2>\n<div style=\"width: 640px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-16341-11\" width=\"640\" height=\"296\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/08\/11.-Solid-drawing.mp4?_=11\" \/><a href=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/08\/11.-Solid-drawing.mp4\">https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/08\/11.-Solid-drawing.mp4<\/a><\/video><\/div>\n<p>Voc\u00ea precisa entender o b\u00e1sico do desenho.\u00a0Isso inclui saber\u00a0desenhar\u00a0no espa\u00e7o tridimensional e compreender forma e anatomia, peso e volume, luzes e sombras. Embora voc\u00ea tamb\u00e9m possa impor limites, \u00e9 importante permanecer consistente.\u00a0Se o seu mundo tem portas vacilantes e uma perspectiva distorcida, mantenha essa perspectiva em toda a anima\u00e7\u00e3o.\u00a0Caso contr\u00e1rio, as coisas v\u00e3o desmoronar.<\/p>\n<h2>12 &#8211;\u00a0Apelo &#8211;\u00a0Appeal<\/h2>\n<div style=\"width: 640px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-16341-12\" width=\"640\" height=\"296\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/08\/12.-Appeal.mp4?_=12\" \/><a href=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/08\/12.-Appeal.mp4\">https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2018\/08\/12.-Appeal.mp4<\/a><\/video><\/div>\n<p>Seus personagens, objetos e o mundo em que vivem precisam atrair o espectador.\u00a0Isso inclui ter um design f\u00e1cil de ler, desenho s\u00f3lido e uma personalidade.\u00a0N\u00e3o h\u00e1 nenhuma f\u00f3rmula para acertar isso, mas come\u00e7a com um forte desenvolvimento do personagem e a capacidade de contar sua hist\u00f3ria atrav\u00e9s da arte da anima\u00e7\u00e3o.<\/p>\n<p>Depois de entender esses 12 princ\u00edpios de anima\u00e7\u00e3o, comece a colocar em pr\u00e1tica, e como o tempo voc\u00ea poder\u00e1 levar seu trabalho de movimento para o pr\u00f3ximo n\u00edvel.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Os princ\u00edpios da anima\u00e7\u00e3o formam a base de todo trabalho de movimento. Os 12 princ\u00edpios de anima\u00e7\u00e3o foram introduzidos pela primeira vez pelos animadores da Disney Ollie Johnston e Frank Thomas em seu livro\u00a0A Ilus\u00e3o da Vida: Anima\u00e7\u00e3o da Disney, lan\u00e7ado originalmente em 1981. Neste livro, Johnston e Thomas examinam o trabalho dos principais animadores [&hellip;]<\/p>\n","protected":false},"author":145,"featured_media":16412,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[910],"tags":[],"class_list":["post-16341","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-3d"],"_links":{"self":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts\/16341","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/users\/145"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/comments?post=16341"}],"version-history":[{"count":0,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts\/16341\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/media\/16412"}],"wp:attachment":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/media?parent=16341"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/categories?post=16341"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/tags?post=16341"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}