Vá além e crie animações totalmente personalizadas para seus projetos.
Às vezes, você não quer usar as palavras-chave de easing incluídas no CSS, ou usará animações Web ou uma estrutura de JavaScript. Geralmente, nesse caso, é possível definir suas próprias curvas (ou equações), o que proporciona mais controle sobre as animações do seu projeto.
Resumo
- O easing personalizado confere mais personalidade a seus projetos.
- Você pode criar curvas de Bézier cúbicas que se parecem com as curvas de animação padrão (ease-out, ease-in etc.), mas com ênfase em locais diferentes.
- Use JavaScript quando precisar de mais controle sobre o timing e o comportamento da animação, por exemplo, animações elastic ou bounce.
Se estiver animando com CSS, você poderá definir curvas de Bézier cúbicas para definir o tempo. Na verdade, as palavras-chave ease, ease-in, ease-out e linear mapeiam para curvas de Bézier predefinidas, que são detalhadas na Especificação das transições CSS e na Especificação das animações Web.
Essas curvas de Bézier recebem quatro valores, ou dois pares de números, e cada par descreve as coordenadas X e Y dos pontos de controle de uma curva de Bézier cúbica. O ponto inicial da curva de Bézier tem coordenadas (0, 0) e o ponto final tem coordenadas (1, 1). Você pode definir os valores X e Y dos dois pontos de controle. Os valores X para os dois pontos de controle devem estar entre 0 e 1, e cada valor Y do ponto de controle pode exceder o limite [0, 1], embora a especificação não seja clara em relação ao seu valor.
Mudar o valor de X e Y de cada ponto de controle trará uma curva muito distinta e, portanto, um resultado completamente diferente para a sua animação. Por exemplo, se o primeiro ponto de controle estiver na área inferior direita, a animação começará lentamente. Se estiver no canto superior esquerdo, a inicialização será rápida. Por outro lado, se o segundo ponto de controle estiver na área inferior direita da grade, a animação terá um final rápido, enquanto que, se estiver na área superior esquerda, terá um final lento.
Para comparação, aqui estão duas curvas: uma curva ease-in-out comum e uma curva personalizada:
Ver uma animação com easing personalizado
O CSS para a curva personalizada é:
transition: transform 500ms cubic-bezier(0.465, 0.183, 0.153, 0.946);
Os dois primeiros números são as coordenadas X e Y do primeiro ponto de controle e os dois segundos são as coordenadas X e Y do segundo ponto de controle.
Criar uma curva personalizada é muito divertido e oferece controle significativo sobre a sensação da animação. Na curva acima, por exemplo, pode-se observar que ela se assemelha a uma curva ease-in-out clássica, mas com uma parte ease-in menor, ou "inicial", e desaceleração alongada no final.
Teste esta ferramenta de curva de animação e veja como a curva afeta as animações.
Use frameworks JavaScript para ter mais controle
Às vezes, você precisa de ainda mais controle do que uma curva de Bézier cúbica pode fornecer. Se quiser um efeito elastic bounce, considere usar uma estrutura JavaScript, pois esse é um efeito difícil de ser obtido com CSS ou animações Web.
TweenMax
Um framework eficiente é o TweenMax do GreenSock (ou TweenLite se você quiser uma versão mais leve), porque ele oferece mais controle em uma pequena biblioteca JavaScript, que é uma base de código muito madura.
Veja uma animação de elasticeasing
Para usar o TweenMax, inclua este script na sua página:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
Quando o script estiver pronto, você poderá chamar o TweenMax no seu elemento e dizer quais propriedades e easings deseja. Há muitas opções de easing que você pode usar; o código abaixo usa um elasticeasing:
var box = document.getElementById('my-box');
var animationDurationInSeconds = 1.5;
TweenMax.to(box, animationDurationInSeconds, {
x: '100%',
ease: 'Elastic.easeOut'
});
Vale a pena ler a documentação do TweenMax, que destaca todas as opções disponíveis.