Escolha o easing adequado para seu projeto, seja easing in, out ou ambos. Você pode até mesmo usar rejeições para se divertir ainda mais!
Já discutimos as várias opções disponíveis para easing em animações, então, qual é o tipo ideal para seus projetos e qual deve ser a duração das animações?
Resumo
- Use animações light-out para elementos de interface; o Quintic é um recurso fácil de usar, embora seja rápido.
- Certifique-se de usar a duração da animação; facilidades e facilidades devem ter de 200 ms a 500 ms, enquanto os facilidades rejeições e elásticos devem ter uma duração mais longa, de 800 ms a 1.200 ms.
De modo geral, ease-out é a escolha correta e certamente um bom padrão. Ela tem um início rápido, proporcionando às animações uma sensação de capacidade de resposta, o que é desejável, mas com uma boa lentidão no final.
Há um grupo de equações de facilidade de saída conhecidas além daquela especificada com a palavra-chave ease-out no CSS, que variam em "agressividade". Para um efeito fail-out rápido, considere um Quintic fail-out.
Veja uma animação Quintic facilidade-out
Outras equações de easing, especialmente reflexos ou facilidades elásticos, devem ser usadas com moderação e somente quando apropriado para o projeto. Uma animação desagradável pode tirar o usuário de uma experiência. Se o objetivo do seu projeto não for ser divertido, não deixe elementos saltando na interface. Por outro lado, se você está criando um site que deve ser alegre, então use rejeições!
Brinque com os facilidades, veja quais combinam com a personalidade do seu projeto e comece a partir daí. Para ver uma lista completa de tipos de easing e demonstrações, consulte easings.net.
Escolha a duração certa da animação
É importante que qualquer animação adicionada ao seu projeto tenha a duração correta. Se for muito curta, a animação será agressiva e nítida; muito longa pode ser obstrutiva e irritante.
- easings: cerca de 200 ms a 500 ms. Isso dá aos olhos a chance de ver a animação, sem que ela pareça obstrutiva.
- Facilidade-ins: cerca de 200 ms a 500 ms. Tenha em mente que haverá um choque no final e nenhuma mudança de tempo atenuará esse impacto.
- Efeitos Bounce ou elastic: cerca de 800ms a 1200ms. Deixe tempo suficiente para que os efeitos elásticos ou rejeições "se ajustem". Sem esse tempo extra, a parte elástica com salto da animação será agressiva e desagradável aos olhos.
Obviamente, essas são apenas diretrizes. Teste seus próprios facilidades e escolha o que for melhor para seus projetos.