Noções básicas de easing

Saiba como suavizar e dar peso às suas animações.

Paul Lewis

Nada na natureza se move linearmente de um ponto a outro. Na realidade, as coisas tendem a acelerar ou desacelerar conforme se movem. Nossos cérebros estão programados para esperar esse tipo de movimento, portanto, ao animar, você deve usar isso a seu favor. O movimento natural faz com que os usuários se sintam mais à vontade com seus apps, o que, por sua vez, leva a uma melhor experiência geral.

Resumo

• O easing deixa suas animações mais naturais.
• Escolha animações facilitadas para elementos da interface.
• Evite animações light-in ou fail-in-out, a menos que elas sejam curtas; elas tendem a parecer lentas para os usuários finais.

Na animação clássica, o termo para movimento que começa lentamente e acelera é "lento", e para movimento que começa rapidamente e desacelera é "slow out". A terminologia mais comumente usada na Web é “ease in” e “ease out”, respectivamente. Algumas vezes os dois são combinados, o que é chamado de "ease in out". O easing é, portanto, o processo de tornar a animação menos grave ou pronunciada.

Palavras-chave de easing

As transições e animações CSS permitem escolher o tipo de easing a ser usado nas animações. É possível usar palavras-chave que afetam o easing (ou timing, como é chamado às vezes) da animação em questão. Também é possível personalizar totalmente seu easing, o que proporciona mais liberdade para expressar a personalidade do app.

Confira algumas palavras-chave que podem ser usadas no CSS:

• linear
• ease-in
• ease-out
• ease-in-out

Fonte: Transições CSS, W3C

Você também pode usar uma palavra-chave steps, que permite criar transições com etapas distintas, mas as palavras-chave listadas acima são mais úteis para criar animações naturais.

Animações lineares

Animações sem qualquer tipo de easing são chamadas de linear. O gráfico de uma transição linear tem a seguinte aparência:

Com o passar do tempo, o valor aumenta em quantidades iguais. Com o movimento linear, as coisas tendem a parecer robóticas e não naturais, e isso é algo que os usuários consideram desagradável. De modo geral, evite movimentos lineares.

Se você estiver codificando suas animações usando CSS ou JavaScript, sempre vai haver uma opção para o movimento linear.

Conferir uma animação linear

Para obter o efeito acima com CSS, o código ficaria mais ou menos assim:

transition: transform 500ms linear;

Animações facilitadas

O "easing" faz com que a animação comece mais rapidamente do que as lineares e também tenha uma desaceleração no final.

O easing é normalmente o melhor para o trabalho na interface do usuário, porque o início rápido dá às animações uma sensação de capacidade de resposta, além de permitir uma lentidão natural no final.

Veja uma animação light-out

Há muitas maneiras de conseguir esse efeito, mas a mais simples é a palavra-chave ease-out no CSS:

transition: transform 500ms ease-out;

Animações facilitadas

Animações de aceleração começam lentamente e terminam rapidamente, o que é o oposto das animações de efeito easing.

Esse tipo de animação é como uma pedra pesada caindo, onde começa devagar e atinge o chão rapidamente com um baque ensurdecedor.

No entanto, do ponto de vista da interação, os a facilidades podem parecer um pouco incomuns por causa de seu término abrupto. Coisas que se movem no mundo real tendem a desacelerar em vez de simplesmente parar repentinamente. easings também têm o efeito prejudicial de parecerem lentos no início, o que afeta negativamente a percepção de capacidade de resposta no seu site ou aplicativo.

Ver uma animação light-in

Para usar uma animação simple-in, de forma semelhante a animações light-out e lineares, você pode usar a palavra-chave:

transition: transform 500ms ease-in;

Animações light-in-out

O facilitamento de entrada e saída é como um carro acelerando e desacelerando e, se usado com consciência, pode proporcionar um efeito mais dramático do que apenas o easing.

Não use uma duração muito longa de animação, devido à lentidão do início da animação. Um valor no intervalo de 300 a 500 ms normalmente é adequado, mas o número exato depende muito da experiência do seu projeto. Dito isso, devido ao início lento, meio rápido e término lento, há um maior contraste na animação, o que pode ser bastante satisfatório para os usuários.

Veja uma animação light-in-out

Para gerar uma animação facilita-in-out, use a palavra-chave CSS ease-in-out:

transition: transform 500ms ease-in-out;