Vá além e crie animações totalmente personalizadas para seus projetos.
Às vezes, você não desejará usar as palavras-chave de easing incluídas com o CSS ou usará animações da Web ou uma estrutura JavaScript. Nesses casos, você normalmente pode 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 aos seus projetos.
- É possível criar curvas de Bézier cúbicas que se parecem com as curvas de animação padrão (easing, easing etc.), mas com ênfase em lugares diferentes.
- Use JavaScript quando precisar de mais controle sobre o tempo e o comportamento da animação, por exemplo, animações elásticas ou saltitantes.
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 Web Animations.
Essas curvas de Bézier usam 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 o valor Y de cada ponto de controle pode exceder o limite [0, 1], embora a especificação não indique quanto.
Alterar o valor X e Y de cada ponto de controle resulta em uma curva muito diferente e, portanto, uma sensação muito diferente para sua animação. Por exemplo, se o primeiro ponto de controle estiver na área inferior direita, a animação começará lentamente. Se estiver na área do canto superior esquerdo, o início será rápido. Por outro lado, se o segundo ponto de controle estiver na área inferior direita da grade, ele terá um final rápido; se estiver no canto superior esquerdo, terá um término lento.
Para fins de comparação, aqui estão duas curvas: uma típica de fail-in-out e uma curva personalizada:
Ver uma animação com easing personalizado
O CSS da 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 um controle significativo sobre a sensação da animação. Por exemplo, considerando a curva acima, é possível notar que ela se assemelha a uma curva clássica de método de ida e volta, mas com uma parte de “easing” menor, ou “começando”, e uma desaceleração alongada no final.
Teste esta ferramenta de curva de animação e veja como a curva afeta uma animação.
Use estruturas 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 você quiser uma sensação elástico, considere usar uma estrutura de JavaScript, pois é um efeito difícil de ser alcançado com CSS ou animações da 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, além de ser uma base de código muito madura.
Conferir uma animação de elástico (link em inglês)
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>
Depois que o script estiver pronto, você poderá chamar o TweenMax no seu elemento e informar quais propriedades e easings quer. Há muitas opções de easing que podem ser usadas; o código abaixo usa um elasticease-out:
var box = document.getElementById('my-box');
var animationDurationInSeconds = 1.5;
TweenMax.to(box, animationDurationInSeconds, {
x: '100%',
ease: 'Elastic.easeOut'
});
A documentação do TweenMax destaca todas as opções disponíveis aqui. Por isso, vale a pena conferir.