Usando os 12 princípios de animação da Disney em seu próximo projeto de web design

No exato momento em que estou digitando isso, meu escritório tem 17 algo ou outro da Disney nas paredes e prateleiras. Dezessete. Até eu estou surpreso. Por mais que eu ame tudo-as-coisas-Disney, a magia criada por meio dos 12 princípios da animação escapa até mesmo de mim enquanto assisto a um de seus filmes.

E esse é o ponto. Os 12 princípios de animação são sutis. Eles causam impressões nos espectadores sem que eles percebam. Fazem-nos rir, chorar, simpatizar e sonhar, às vezes dentro da mesma cena. E eles criam personagens e objetos que parecem e se movem de forma tão realista que você deseja alcançá-los e tocá-los. (Você já viu Coco ? Eu encerro meu caso.)

Esses 12 princípios de animação agora fornecem a base para todo o trabalho de movimento, Disney e outros. Eles também são relevantes para campos fora da animação, como web design.

Uma breve história dos 12 princípios de animação

Os 12 princípios da animação foram introduzidos por Ollie Johnston e Frank Thomas, dois dos Nove Velhos da Disney, o grupo principal de animadores que se juntou nas décadas de 1920 e 30. Johnston e Thomas escreveram The Illusion of Life: Disney Animation em 1981, e ela permaneceu como a "bíblia" da animação. O livro examina de perto as abordagens dos principais animadores da Disney para extrair os 12 princípios. Embora esses princípios fossem originalmente destinados à animação desenhada à mão, eles sobreviveram às mudanças tecnológicas e agora são usados ​​por animadores de computador (como a Pixar) e web designers.

Os 12 princípios de animação e como eles informam o design da web

Há uma razão pela qual esses princípios resistiram ao teste do tempo. Às vezes, o básico ainda é o melhor.

1. Squash e alongamento

Fonte: Chris Gannon via Giphy

“Squash and Stretch” é o mais importante dos princípios da animação. Dá às animações flexibilidade, gravidade, peso e massa. Quando um objeto está em movimento, ele não permanece com a mesma forma.

O volume tem que permanecer consistente, no entanto. O alongamento requer tornar o objeto mais fino e mais longo; esmagar o torna mais curto e mais largo. Se você apenas torná-lo mais fino ou mais curto, ele não manterá o mesmo volume.

Em web design, “Squash and Stretch” é usado quando os objetos precisam ser atraentes. Se há um objeto que precisa parecer ter massa física, esse princípio pode resolver o problema.

2. Antecipação

Fonte: CentoLodigiani via Giphy

A antecipação prepara o espectador para o que está para acontecer e pode tornar a ação resultante mais realista. Você não se sentaria sem primeiro dobrar os joelhos, ou pegaria algo sem esticar o braço, certo? A antecipação coloca o personagem ou objeto em um ou dois movimentos realistas para indicar ao espectador o que está para acontecer.

Em web design, a antecipação é usada nas transições. Por exemplo, se um visitante estiver preenchendo uma caixa de informações e omitir as informações obrigatórias, a caixa pode pular um pouco para chamar sua atenção e comunicar: “Ei, algo está errado”. Outra maneira de usar a antecipação é encolher um pouco os itens e, em seguida, torná-los maiores ao pairar.

3. Estadiamento

A encenação leva o olhar do espectador para que ele olhe para onde você quer que olhe (“linhas principais” na fotografia). Minimize o resto da cena para que o visualizador se concentre apenas no que você deseja. Outro componente da encenação é que cada ação que um personagem faz tem uma intenção por trás dela. Se você isolar cada quadro da animação, poderá dizer a intenção por trás da pose.

A encenação é um dos princípios mais fáceis de aplicar ao design da web e aos recursos visuais usados ​​em sites. Isso é o que acontece quando um pop-up aparece em uma página da web - o movimento do pop-up faz com que você se concentre nele e o resto da página fica borrado, esmaecido ou coberto. Você está iluminando figurativamente a parte mais importante do “palco” e mantendo todo o resto em segundo plano. Luz e sombra também podem ser usadas para isso, ou os web designers podem aplicar esse princípio simplesmente eliminando detalhes desnecessários.

4. Em frente e pose para pose

“Em frente” e “pose para pose” são duas maneiras diferentes de criar animações. Com “sempre à frente”, os quadros são criados em ordem do início ao fim. Isso dá à animação um movimento dinâmico e fluido. Com “pose para pose”, o primeiro e o último quadros são criados e, em seguida, as poses intermediárias necessárias são adicionadas.

Fonte: Vincenzo Lodigiani, Motion Artist

Hoje, a animação por computador usa "pose para pose" porque o computador pode preencher os quadros ausentes automaticamente. Verifique as animações em Chekhov - você pode dizer que elas não são realisticamente fluidas (e não deveriam ser). Se você deseja criar uma animação “direta” em seu site, pode usar a função de tempo steps (), que permite definir vários quadros e exibi-los em uma sequência.

5. Acompanhamento e ação de sobreposição

O princípio de “ação contínua e sobreposta” diz que quando um personagem ou objeto está em movimento e então para, partes do sujeito se movem e param em ritmos diferentes. Isso imita as leis da física da vida real.

• Ação de sobreposição: Diferentes partes do assunto se movem em ritmos diferentes.
• Acompanhamento: Partes do objeto fracamente conectadas continuam se movendo por alguns segundos após o objeto principal ter parado de se mover. Essas partes se moverão além do ponto de parada e, em seguida, recuarão em direção ao objeto.

No exemplo abaixo, os braços e as pernas de Rapunzel se movem em um ritmo diferente de sua cabeça - isso é uma ação de sobreposição. Quando ela para de girar, seu cabelo continua balançando por um segundo - isso continua.

“Arrastar” é uma técnica relacionada em que ocorre o oposto - partes do objeto se movem e o resto o alcança. Todas essas técnicas mostram movimento realista ou podem exagerar o movimento para um efeito cômico.

“Movendo espera” também está relacionado a isso. Os personagens que ficam ainda têm um ligeiro movimento para que a animação não fique estagnada.

Em mobile e web design, “follow through” e “overlapping action” mostram ao espectador que uma ação está sendo interrompida propositalmente . Caso contrário, você pode pensar que ele simplesmente parou de funcionar. Por exemplo, veja como o aplicativo Wunderlist no meu iPhone mostra que estou movendo um item da lista. O item fica com uma cor diferente e fica maior conforme eu o movo, depois volta à cor e ao tamanho originais quando eu terminar. É assim que sei que a ação está completa.

Você também pode ver esse princípio em ação no seu iPhone. Conforme você faz a transição entre as visualizações ou move os ícones na tela inicial, os elementos se movem em taxas ligeiramente diferentes. É assim que seu iPhone se comunica: “As coisas estão mudando”.

6. Retardar e desacelerar

O princípio de "entrar e sair mais devagar" afirma que um objeto começa a se mover lentamente, ganha impulso e acelera, depois desacelera novamente quando para. Basicamente, os movimentos precisam acelerar e desacelerar para serem naturais. Para obter esse efeito, existem quadros adicionais no início e no final de uma ação para enfatizar o aumento e diminuição graduais do movimento.

Fonte: The Illusion of Life no Tumblr

Para web design, CSS tem duas funções de temporização relacionadas a este princípio: Easy-in e Easy-out. Você pode ver um exemplo no site Your Plan, Your Planet (clique em “Vamos começar” primeiro).

7. Arco

Como muitos dos outros 12 princípios de animação, “arco” é baseado na física. Os objetos geralmente seguem algum tipo de arco à medida que se movem por causa da gravidade. Se eles permanecessem retos, o movimento seria mecânico, não realista.

Isso se aplica a todos os tipos de movimento também, não apenas arcos de baixo para cima para baixo:

Em web design, o princípio do “arco” pode ser usado criando animações que se curvem, é claro, mas também fazendo com que um elemento gire, como durante os tempos de carregamento.

8. Ação Secundária

Uma ação secundária enfatiza a ação principal sem distrair dela. Ele também dá aos personagens e objetos mais dimensão e dá vida a uma cena. O princípio da encenação desempenha um papel porque a ação principal ainda precisa ser o foco.

Uma ação secundária não precisa cair fora do objeto principal. Pode ser um personagem assobiando enquanto caminha ou expressando emoção erguendo as sobrancelhas.

Em mobile e web design, o princípio de “ação secundária” é visto quando os elementos se movem para abrir espaço para um novo elemento, como quando você reorganiza os aplicativos no seu iPhone. Isso pode ir de mãos dadas com a “ação contínua e sobreposta”, que enfatiza essas ações.

9. Tempo

O tempo é bastante simples e está relacionado a "diminuir a velocidade para entrar e sair". O princípio diz que os elementos devem se mover de maneira consistente e natural, como fariam no mundo real. Para dar ênfase, eles podem ser acelerados ou desacelerados propositalmente. O número de quadros usados ​​estabelecerá o tempo - mais quadros criam uma ação mais lenta, menos quadros criam uma ação mais rápida.

Neste exemplo, as primeiras ações do Patolino têm um tempo natural e, em seguida, a última ação, quando ele chega perto do visualizador, é propositalmente rápida para dar ênfase.

O tempo também ajuda o visualizador a entender o peso dos objetos em relação uns aos outros. Neste exemplo, o personagem levanta os pesos lentamente e os solta rapidamente, mostrando que são pesados ​​para ele:

Fonte: @scottthigpen no Giphy

No web design, o tempo é usado para fazer com que os elementos permaneçam um pouco mais ou desapareçam rapidamente, principalmente ao responder à interação do usuário. Por exemplo, se um usuário deseja dispensar um menu, você pode definir o tempo para que ele permaneça por 300 ms. Se eles tocarem em um elemento na barra de navegação, você desejará que a ação aconteça rapidamente (100 ms).

10. Exagero

Embora muitos dos 12 princípios da animação sejam focados na realidade, a beleza da animação é que ela não é real. O princípio do “exagero” diz que muito realismo pode prejudicar o que a animação faz de melhor: o entretenimento. O exagero é usado para tornar os personagens e objetos mais interessantes. Ele pega a realidade e a aumenta um pouco, apenas o suficiente para que a cena ainda seja verossímil. O exagero requer moderação para que a cena não se torne abstrata ou surreal.

No web design, os objetos são aumentados ou reduzidos para chamar ou desviar a atenção. Quando um usuário está ativo em uma determinada parte do site, como um formulário, ele pode crescer enquanto outros elementos diminuem. Isso é semelhante ao princípio de “teste”, especialmente quando você pensa em formulários pop-up.

11. Desenho Sólido

Fonte: The Illusion of Life no Tumblr

Mesmo que a animação seja tecnicamente 2D, ela deve se apresentar de forma realista em 3D. O princípio do "desenho sólido" também pode ser chamado de "perspectiva" porque se trata de ter a capacidade de desenhar e compreender conceitos básicos como:

• Anatomia
• Equilíbrio
• Consistência
• Luz e sombra
• Volume
• Peso

Para web designers, adicionar profundidade a um elemento mostra aos usuários que eles podem interagir com ele. Você pode ver isso em ação em nosso site. Observe como o botão “Join to Download” fica rosa conforme eu rolar para baixo:

12. Apelação

Possivelmente o mais complicado dos 12 princípios de animação para dominar, “apelo” diz que seus personagens, objetos e seu mundo têm que apelar para o público. Eles devem ser atraentes e charmosos de alguma forma, fisicamente ou não. Não há receita para acertar, mas o desenvolvimento sólido do personagem e a narrativa são os ingredientes principais.

Na animação, cada personagem não vai ser atraente - o vilão é a pedra angular dos filmes da Disney. Porém, a forma como são apresentados deve ter carisma e interesse do público.

Em web design, “apelo” significa que o site como um todo é envolvente, agradável e fácil de usar.

Empacotando

Os 12 princípios da Disney podem ajudar com animações diretas, como se você estiver criando um jogo interativo em seu site, mas também podem ajudar no design para todos os tipos de páginas da web. A maioria dos consumidores é como eu quando se trata de filmes da Disney: sei que gosto de alguma coisa e meu cérebro processa as pistas, mas não consigo entender por que tenho essas reações. O trabalho do web designer é antecipar o que o visitante vai pensar e fazer e, em seguida, orientá-lo sutilmente para que tomem as ações certas.

Procurando ainda mais maneiras de se conectar com seu público? Leia nossa postagem no blog sobre como usar a emoção das cores.