TEORIA BÁSICA
DE ANIMAÇÃO NA WEB

Há uma animação funcional que torna a interface mais intuitiva e fácil de usar. Esse tipo de animação é usado em interfaces de produtos e aplicativos móveis. E há a animação decorativa, que é usada principalmente em páginas de destino ou projetos especiais, servindo para atrair a atenção do espectador, tornar o projeto mais interessante e ajudar a evocar determinadas emoções.

A velocidade da animação reflete a relação entre a distância percorrida por um elemento e o tempo necessário para isso. A velocidade também inclui todas as alterações pelas quais o elemento passa do início ao fim. Esse é um dos principais componentes da animação, pois é responsável pela dinâmica geral e pelo clima que você está tentando criar. Fazer animações é um processo bastante criativo, e você descobrirá rapidamente que não é muito diferente de dirigir seu próprio filme.

Ao projetar uma animação, é importante pensar nisso:

• Quanto tempo durará
• A velocidade na qual o efeito de animação acontece
• Em que velocidade o elemento iniciará e terminará o movimento

Qual a duração que você deve escolher para que a animação tenha uma aparência elegante? Não há uma resposta exata. É importante não deixar o usuário esperando o resultado do movimento, mas também não deixar a animação muito rápida. O visualizador deve ter tempo para entender onde o elemento apareceu na tela e como ele chegou a um novo lugar. Em geral, a animação deve parecer natural.

Animações mais dinâmicas são adequadas para a aparência de elementos pequenos, como textos, listas, cartões ou botões. Os elementos grandes geralmente são animados de forma mais suave. A duração também depende da quantidade de espaço que a animação ocupa. A alta velocidade é mais adequada para micromovimentos, pois quanto maior a velocidade, mais atenção ela requer, distraindo o usuário do restante do conteúdo.

A distância do movimento na animação da Web geralmente é curta:

• Elementos reveladores da transparência (cartões, listas, imagens)
• Efeitos de hover (animação ao passar o mouse) para botões e cartões: Zoom, deslocamento, mudança de cor
• Pop-up (por exemplo, ampliação de foto)
• Apresentação de slides animada

Embora os parâmetros de animação possam variar de acordo com o projeto, a velocidade da animação tende a seguir um conjunto universal de regras. É mais confortável perceber a animação dentro dos limites especificados abaixo; use-os como guia e você não errará.

Esse é o intervalo médio de valores para animar a maioria dos elementos, nem muito rápido nem muito lento. Esse intervalo é suficiente para animar texto, blocos, listas e elementos decorativos. Vamos aumentar o intervalo:

Um intervalo de 0,1 segundo é percebido como um instante, o que o torna adequado para pequenos elementos e movimentos (passar o mouse, alternar guias, deslizar em galerias), enquanto as animações com mais de um segundo parecerão cansativas. É uma boa ideia certificar-se de que você não está aplicando essa animação a um elemento importante da página da Web.

Esses números foram revelados em um estudo do Neilson Norman Group (uma empresa de consultoria e pesquisa de experiência do usuário) e do Model Human Processor.

Quando as propriedades de um elemento animado são semelhantes às propriedades de objetos físicos, elas são mais fáceis de perceber. Essas animações são mais previsíveis e, por isso, não causam desconforto.

Elas ajudam a desencadear certas associações e emoções que são familiares ao usuário. Uma das principais maneiras de obter uma sensação natural é imaginar como um objeto físico se comportaria se estivesse se movendo como a sua animação. Como isso afeta a velocidade?

• Por exemplo, elementos idênticos se moverão de forma diferente se percorrerem distâncias diferentes. Quando os elementos se movem, o que tiver a menor distância parará primeiro.
• Os elementos que variam em massa também se movem de forma diferente, sendo que os maiores tendem a se mover mais lentamente. Se fosse um objeto físico, sua massa o impediria de se mover mais rapidamente.

Essas regras estão intimamente relacionadas à nossa percepção. É importante lembrar que os objetos físicos sempre têm um início e um fim para seu movimento. Em algum momento, eles aceleram (por exemplo, no início, se forem empurrados) e em algum momento, eles diminuem a velocidade (por exemplo, no final do caminho). A animação na Web transmite essas propriedades com a ajuda do Easing.

A suavização é a técnica mais importante no design de animação, dando autenticidade, caráter e dinâmica aos elementos.

A suavização geralmente é representada por um gráfico da relação entre a distância do movimento (eixo Y) e o tempo necessário para percorrê-la (eixo X). Se aprendermos a lê-los e a compô-los corretamente, isso ajudará os designers a explicar a tarefa ao desenvolvedor de forma mais clara.

O movimento linear parece ser o mais antinatural. Imagine que a velocidade do elemento não muda durante toda a animação, como se não houvesse gravidade e atrito. Essa animação parecerá artificial e simplesmente desleixada.

Há vários tipos de efeito de atenuação. Analisá-los e aprender a aplicá-los em seus projetos certamente será útil. Veja a seguir como são os exemplos mais comuns de flexibilização e seus gráficos:

Esse tipo de atenuação é o mais comum. As transições Ease-In-Out consistem em acelerar suavemente um elemento no início e desacelerá-lo no final do movimento. As animações parecem mais naturais dessa forma: O elemento acelera, completa o movimento e para.

Nesse caso, o elemento acelera no início e tem uma velocidade de animação constante. Esse tipo de animação se assemelha ao lançamento de um foguete.

Nas animações Ease-Out, o elemento tem um movimento rápido pronunciado no início e um movimento de parada suave no final.

A flexibilização assimétrica permite que você aplique configurações mais sutis para transmitir propriedades físicas com precisão. Nesse caso, os pontos de aceleração e desaceleração têm sua própria dinâmica, e os gráficos com as curvas de animação podem parecer completamente diferentes. Por exemplo, um elemento pode ter uma aceleração suave no início e uma parada rápida no final.

Quando os objetos colidem, eles podem ricochetear um no outro ou se esticar em direções diferentes. No design de animação, esses efeitos são chamados de Bounce e Elastic. Esses efeitos fazem com que o movimento pareça natural.

A amplitude do movimento depende da ideia geral do projeto. Ao projetar, compare seu elemento a um objeto físico para ver exatamente como criar a animação. Se você quiser obter o efeito de uma bola leve e macia saltando, a aceleração do elemento deverá ser suave, enquanto o salto da superfície deverá ser grande. Por outro lado, se você imaginar uma bola de metal caindo, sua descida será muito mais rápida, enquanto o salto será quase imperceptível.

A suavidade da animação, o salto e a velocidade contribuem para uma certa dinâmica. Ao aprender a usar essas ferramentas, você saberá como definir o tom certo para sua animação.

As curvas de Bezier são usadas para traçar a aceleração de um elemento. Uma curva de Bezier é uma curva matemática em um gráfico que contém os eixos Y (distância) e X (velocidade), que refletem a distância percorrida pelo elemento no espaço e o tempo necessário para isso. Ao ajustar a curva, você pode ajustar a velocidade com que o elemento percorre diferentes partes de seu caminho.

Há dois tipos de curvas de Bezier: quadrática e cúbica. As coordenadas do primeiro e do último ponto são claramente definidas e ficam na curva. Os outros pontos são ajustáveis e ficam fora da linha. Mover os pontos transforma a curva, criando uma forma suave.

Para aprender a ler gráficos e entender como os ângulos da curva mostram a dinâmica do movimento, vamos desenhar dois gráficos semelhantes, mas ligeiramente diferentes.

Não há valores universais para os pontos em uma curva que criariam uma animação perfeita. O importante aqui é fazer experimentos e descobrir gradualmente qual dinâmica de movimento é apropriada para cada caso. Depois de aprender a ler gráficos, você poderá usar esse conhecimento de forma mais profissional. Para facilitar um pouco sua vida, aqui estão alguns serviços que ajudam os designers a visualizar animações:

cubic-bezier
Esse serviço ajuda a mover a curva, reproduzir suas configurações e salvar o resultado desejado. Para simplificar a transferência do projeto de animação para a equipe de desenvolvimento, você pode copiar os valores dos pontos de coordenadas e compartilhá-los com o desenvolvedor.

easings.net
Esse serviço contém projetos de animação concluídos, que podem ser úteis como exemplos prontos que contêm os valores corretos.

Há diferentes tipos de animações no Tilda. Há uma ferramenta avançada em Zero Block para designers, na qual você pode configurar efeitos de animação personalizados, e há blocos básicos com efeitos de animação básicos predefinidos.

Você pode saber mais sobre animação no Tilda aqui.

Queríamos dar a designers não profissionais a oportunidade de adicionar animações interessantes a seus projetos, e é por isso que adicionamos animações predefinidas aos blocos. As configurações que usamos para elas são, em nossa opinião, perfeitamente equilibradas e, ao mesmo tempo, universais. Tudo o que você precisa fazer é ativar a animação para o elemento desejado (cabeçalho, subcabeçalho etc.) no painel Settings (Configurações) do bloco.

As animações foram criadas por nossos designers. A velocidade não é nem muito rápida nem muito lenta, e os elementos se sucedem em harmonia. Vamos detalhar como as configurações de animação do Tilda funcionam usando uma das capas como exemplo:

No exemplo, atribuímos o mesmo estilo de animação - aparecendo de baixo para cima - a todos os elementos para ver o movimento com mais clareza.

Prestamos atenção ao cálculo da velocidade com que os elementos apareceriam um após o outro, com que atraso e com que deslocamento. Se você observar atentamente os valores na capa acima, poderá ver isso:

• O primeiro elemento a aparecer é o maior (o cabeçalho é o maior, portanto, é o elemento-chave)
• O título é seguido por uma descrição, que é de importância secundária. A velocidade da animação é maior aqui.
• O botão aparece por último, e sua velocidade de aparecimento é mais rápida do que a de ambos os textos.

O estilo Easing é o mesmo para todos os elementos com animação predefinida:

O gráfico mostra que os elementos aceleram rapidamente no início e desaceleram gradualmente no final.

A coreografia ajuda a criar ritmo na animação. Isso é semelhante ao ritmo musical, pois determina o caráter do trabalho em questão. O importante aqui é que os movimentos na animação sejam claramente definidos e não monótonos (com o mesmo intervalo de tempo entre si).

Animação paralela. Elementos de animação que têm a mesma velocidade e o mesmo tempo, fazendo com que pareçam um único grupo.

Animação com atraso. Isso se refere à animação que contém um pequeno atraso entre os elementos que aparecem, com o próximo elemento se movendo um pouco mais rápido que o anterior. Para que os elementos ainda façam parte do mesmo grupo, o intervalo de atraso deve ser pequeno (por exemplo, 0,3 segundo).

Agrupamento de elementos. Você pode agrupar elementos e combinar animação paralela e atrasada. Por exemplo, você pode fazer com que todos os textos do cabeçalho apareçam ao mesmo tempo e fazer com que os botões apareçam com um atraso.

A sequência da animação depende da importância do elemento, pois há elementos iguais e elementos-chave.

A ênfase visual será dada ao elemento principal, enquanto o restante será unificado o máximo possível. Por exemplo, o título da página pode ser o elemento principal, enquanto os subtítulos e as imagens serão secundários. Uma maneira de destacar o elemento principal é mostrar o título primeiro, seguido de uma pausa e da aparição dos elementos secundários em um ritmo mais lento.

Em uma página da Web, geralmente são listas, galerias de fotos, padrões e elementos com finalidade semelhante. Eles podem aparecer juntos ou um após o outro. Quando aparecem um após o outro, a animação da aparência deve ser a mesma.

As fotos em uma galeria fazem parte da mesma entidade. É importante que a atenção do visualizador não seja dispersa. É preciso garantir que a animação seja simples, uniforme e rápida o suficiente.

Esse tipo de animação não tem o objetivo de atrair a atenção, pois só acrescenta dinâmica durante a rolagem da página. Uma boa técnica para reunir visualmente os diferentes elementos em um grupo é iniciar a animação do segundo elemento antes do final da primeira animação. Por exemplo:

Os elementos-chave, por outro lado, definem o tom e concentram a atenção do usuário. Pode ser um elemento ou vários elementos (depois eles são reunidos em grupos). Por exemplo, você pode criar um título grande e brilhante, configurá-lo para aparecer rapidamente sem atraso, mas com uma desaceleração no final. Os outros elementos podem aparecer suavemente e após o título, mas com um longo atraso.

A animação é uma ferramenta para adicionar expressão, ênfase e controlar a atenção. É uma ferramenta muito poderosa, que muitas vezes é usada de forma inadequada. Quando se trata de animação, geralmente há uma grande tentação de aplicar todas as técnicas que você conhece em um único projeto. Isso geralmente acaba sendo ruim, pois o foco da atenção do espectador é deslocado pelo movimento das imagens e dos textos, e a imersão no conteúdo se torna muito difícil. Então, como saber se você não está exagerando?

O equilíbrio da animação no projeto refere-se ao número de elementos animados que não causam uma sensação controversa na visualização da página. Adicionar muita animação é um erro comum. Para não remover animações desnecessárias no final, é melhor determinar a quantidade de animação necessária no início, seguindo as regras a seguir:

Não anime todos os elementos de seu projeto. A dinâmica excessiva o cansa, desfocando o visualizador. Para começar, determine os elementos de ênfase; geralmente, dois são suficientes. Por exemplo, títulos e fotos da galeria.

Controle a qualidade. Se estiver adicionando animação a um projeto, é importante certificar-se de que ela funcione corretamente e não congele. A animação requer muitos recursos do sistema e ficará lenta ou intermitente se houver uma carga pesada de CPU. Os usuários não ficarão nada impressionados e não haverá o fator "uau". Portanto, é essencial que você:

• Não anime muitos elementos
• Teste o site em computadores de baixa potência
• Em vez da animação simultânea de vários elementos, use uma sequência com um pequeno atraso
• Não carregue imagens pesadas no site

Manter a hierarquia. Aplique a mesma animação a elementos com o mesmo valor em todo o site. Por exemplo:

• Mesmo estilo de aparência de título
• Mesmo estilo de foco (por exemplo, a aparência da sombra sob o botão ao passar o mouse)

Manter o estilo. Aplique o mesmo estilo de animação à hierarquia. Por exemplo, você pode decidir que todos os títulos de seção aparecerão na parte inferior, enquanto as imagens e as legendas aparecerão na lateral.

Uma quantidade limitada de animação ajuda a evitar que você exagere e se confunda com os estilos no início. Certifique-se de que a quantidade mínima de animação na página não seja suficiente para você e só então tente adicionar mais.

A animação torna o projeto mais interessante e apóia seu estilo, humor e caráter. Mas ela pode ser prejudicial se você não seguir as regras básicas: