Escolha o easing adequado para seu projeto, seja easing in, out ou ambos. Você pode até mesmo usar os saltos para se divertir ainda mais!
Já discutimos as várias opções disponíveis para easing em animações, então, qual tipo você deve usar nos projetos e qual deve ser a duração das animações?
Resumo
- Usar animações simplificadas para elementos da interface do usuário o Quintic é muito fácil, embora rápido.
- Use a duração da animação. Facil-outs e elastic devem ter uma duração de 200 ms a 500 ms, enquanto que os tipos de balanço e elastic devem ter uma duração mais longa, de 800 ms a 1200 ms.
De modo geral, um ease-out é a escolha certa e certamente um bom padrão. Ele tem um início rápido, o que dá às animações uma sensação de capacidade de resposta, o que é desejável, mas com uma certa lentidão no final.
Existe um grupo de equações de simplificadas mais conhecidas além daquela especificada com a palavra-chave ease-out no CSS, que variam em "agressividade". Para um efeito fast-out rápido, considere usar um Quintic atenuar.
Veja uma animação Quintic brand-out
Outras equações de easing, particularmente salta ou elasticidade, devem ser usadas com moderação e somente quando for apropriado para o seu projeto. Uma animação desagradável pode fazer com que o usuário desista da experiência. Se o objetivo do seu projeto não é ser divertido, não coloque elementos pulando na interface. Por outro lado, se você está criando um site que deveria ser leve, use os rebotes!
Brinque com os facilitadores, veja quais combinam com a personalidade do seu projeto e parta desse princípio. Para ver uma lista completa de tipos de easing e demonstrações, consulte easings.net.
Escolher a duração correta da animação
É importante que qualquer animação adicionada ao projeto tenha a duração correta. Se for muito curto, a animação parecerá agressiva e nítida; muito tempo e será obstrutivo e irritante.
- easings: cerca de 200 ms a 500 ms. Isso dá aos olhos a chance de ver a animação, mas ela não parece obstrutiva.
- easings: cerca de 200 ms a 500 ms. Tenha em mente que haverá choque no final, e nenhuma mudança na quantidade de tempo suavizará esse impacto.
- Efeitos saltitantes ou elásticos: cerca de 800 ms a 1.200 ms. Deixe tempo para que o efeito elástico ou saliente seja "concluído". Sem esse tempo extra, a parte elastic bouncing da animação será agressiva e desagradável aos olhos.
Obviamente, estas são apenas orientações. Teste seus próprios efeitos e escolha o que parece mais adequado para seus projetos.