Saiba como suavizar e dar peso às suas animações.
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
![Curva de animação com facilidade linear.](https://web.dev/static/articles/the-basics-of-easing/image/linear-ease-animation-cur-95032dc9fda11.png?authuser=5&hl=pt)
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.
Para obter o efeito acima com CSS, o código ficaria mais ou menos assim:
transition: transform 500ms linear;
Animações facilitadas
![Curva de animação fail-out.](https://web.dev/static/articles/the-basics-of-easing/image/ease-animation-curve-c6df0f5e61c7a.png?authuser=5&hl=pt)
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.
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
![Curva de animação fail-in.](https://web.dev/static/articles/the-basics-of-easing/image/ease-animation-curve-c1ff704eed959.png?authuser=5&hl=pt)
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.
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
![Curva de animação fail-in-out.](https://web.dev/static/articles/the-basics-of-easing/image/ease-out-animation-curve-ed508ac2b4378.png?authuser=5&hl=pt)
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;