Princípios básicos do motion design da Disney x o digital [Parte 01]
Recentemente iniciei um curso sobre animações, o Pixar in a box, uma parceria entre Khan Academy e Pixar. Logo no começo deste, podemos notar que ele alimentará tanto designers, como programadores, pois parte nos traz conceitos e demonstrações, parte exemplifica motion design em matemática.
Coincidentemente, um colega de trabalho veio me perguntar onde encontrava conteúdo sobre motion voltado para web, o que me deu vontade de escrever para ajudar alguém (:
A matemática do motion é fascinante, assuntos como spatial awareness (um dos muitos tópicos contidos na ligação entre as duas areas) são dignos de um post mais dedicado, logo, vamos pela parte ~leve…
Então comecemos por alguns conceitos
Estes me ajudaram muito a não desenvolver motion simplesmente por que algo deveria se movimentar, uma forte tendência que temos no mercado digital. O motion deve contar história para o usuário: de onde ele vem? para onde ele vai? qual o item relevante em xyz tela que deve ter o foco do usuário?
Em 1981 foi lançado o livro The Illusion of life, Disney Animation (desculpa a propaganda do link, mas foi um dos lugares com o melhor preço, mesmo meio alto), por Ollie Johnston e Frank Thomas. Este é referenciado por alguns como "a Bíblia da animação" e em 1999 foi eleito o melhor livro de animação de todos os tempos. A proposta principal dos princípios foi produzir a ilusão que os personagens aderissem às leis da física.
Os 12 princípios básicos
1. Anticipation:
Podemos interpretar qualquer alteração da tela com um movimento, mesmo este tendo dois frames, início e fim. Porém, na vida real e possibilidades da física atual, estes tendem a não acontecer subitamente. Anticipation é usada justamente para auxiliar e preparar o usuário para uma ação/comportamento da aplicação, ajuda a vender o movimento e dá sensação do peso físico que o objeto, até então sem vida, tem.
Nós podemos usar este princípio para fazer um objeto ter um life-like, um simples bounciness pode ajudar usuários a perceber o que mudou, features existentes e manter um track de elementos existentes da aplicação.
2. Staging
Motions podem chamar atenção do usuário para um área específica ou até mesmo ajudar a distraí-lo de tal, ambos úteis e ambas soluções estariam dentro de Staging.
Staging no teatro, por exemplo, é responsável deixar claro para platéia o que é de grande relevância na cena. Uma UI mais previsível e de fácil navegação é aquela que ajuda o olho do usuário a ver de onde um novo objeto vem, para onde um oculto foi ou o que aconteceu com ele. Os estado dos objetos da aplicação são explicitamente conectados com o estado da própria, o usuário sabendo o que aconteceu/estado atual destes, saberá o estado da aplicação.
3. Squash and Stretch:
Alguns dizem que esta regra pode ser ignorada no ambiente de um website, pois a base desta está em demonstrar que o objeto em questão tem massa física. Entretanto, é possível imaginar um hotsite super fun que utilize este princípio em muitos casos.
4. Straight ahead and pose to pose
Straight ahead é quando todos os frames da animação são desenhados ou desenvolvidos. Pose to pose é quando uma série de frames são definidos e então feita a interpolação do movimento.
A maioria das animações na web usa pose to pose, a transição entre dois keyframes pode ser feita pelo próprio motor de renderização do browser, qual interpola os valores das propriedades contidas em cada e assim desenha os quantos frames possíveis entre, para dar mais suavidade ao olho na quebra entre os frames.
Uma excessão para isto, é a animation timing function steps(), qual nos possibilita criar frames fixos (sem interpolação), definindo previamente a quantidade destes que a animação será dividida. Com isso, o browser apresentará cada frame em sequencia, criando um estilo "Straight ahead".
Straight ahead geralmente é utilizado em animações mais complexas, quais rodam sprites com composições que teriam problemas de performance, pois o browser teria que renderizar as muitas diferenças entre os frames se fossem objetos web (código).
Este post será dividido em mais duas partes, quatro princípios em cada, para que não tenhamos posts cansativos (:
