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 criar animações, você deve usar isso a seu favor. O movimento natural faz com que o usuário se sinta mais confortável com seus apps, o que, por sua vez, leva a uma melhor experiência geral.
Resumo
- O easing deixa suas animações mais naturais.
- Escolher animações simplificadas para elementos da interface do usuário
- Evite animações light-in ou light-in-out, a menos que você possa mantê-las 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 é "slow in", e os movimentos que começam rapidamente e desaceleram são “desacelerados”. A terminologia mais comumente usada na Web para isso é "ease in" e "ease out", respectivamente. Algumas vezes os dois são combinados, o que é chamado de "ease in out". Então, easing é na verdade o processo de tornar a animação menos dura ou pronunciada.
Palavras-chave de easing
As transições e animações CSS permitem que você escolha o tipo de easing que deseja usar para suas 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 completamente um easing, o que dá a você muito mais liberdade para expressar a personalidade do seu app.
Estas são algumas palavras-chave que você pode usar no CSS:
linearease-inease-outease-in-out
Fonte: Transições CSS, W3C (link em inglês)
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 as mais úteis para criar animações naturais.
Animações lineares
Animações sem nenhum tipo de easing são chamadas de lineares. Um gráfico de uma transição linear tem a seguinte aparência:
Conforme o tempo passa, o valor aumenta na mesma proporção. Com o movimento linear, as coisas tendem a parecer robóticas e não naturais, e isso é algo que os usuários acham desagradável. De modo geral, evite movimentos lineares.
Não importa se você está codificando suas animações usando CSS ou JavaScript, sempre há uma opção para movimento linear.
Para obter o efeito acima com CSS, o código ficaria mais ou menos assim:
transition: transform 500ms linear;
Animações relaxantes
O easing faz com que a animação comece mais rapidamente do que as lineares e também apresenta desaceleração no final.
O easing normalmente é a melhor opção 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, enquanto ainda permite uma desaceleração natural no final.
Há muitas maneiras de criar um efeito learning, mas a mais simples é a palavra-chave ease-out no CSS:
transition: transform 500ms ease-out;
Animações relaxantes
Animações de easing começam devagar e terminam rápido, o que é o oposto das animações de easing.
Esse tipo de animação é como uma pedra pesada caindo, em que ela começa lentamente e atinge o chão rapidamente com um baque ensurdecedor.
No entanto, do ponto de vista da interação, os facilitadores podem parecer um pouco incomuns por causa de seu fim 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 do seu site ou aplicativo.
Para usar uma animaçãoease-in, assim como animações lineares e{/9}, você pode usar a palavra-chave:
transition: transform 500ms ease-in;
Animações moderados
O easing dentro e fora é semelhante a um carro acelerando e desacelerando e, usado criteriosamente, pode proporcionar um efeito mais dramático do que apenas suavização.
Não use uma duração de animação muito longa devido à lentidão do início da animação. Algo no intervalo de 300 a 500 ms normalmente é adequado, mas o número exato depende muito do seu projeto. Dito isso, por causa do início lento, meio rápido e término lento, há maior contraste na animação, o que pode ser bastante satisfatório para os usuários.
Para obter uma animação relaxante, você pode usar a ease-in-out palavra-chave CSS:
transition: transform 500ms ease-in-out;