Como alguém que criou incontáveis ​​animações CSS, uma coisa que sempre perdi é a facilidade elástica para frames-chave e transição. Sim, você pode usar bibliotecas JavaScript e outros truques (que veremos em um momento), mas, sendo o mais puro que sou, mergulhei no assunto, verifiquei as soluções atuais, aprendi a matemática por trás de tudo e construiu um gerador de facilidade elástica CSS que produz um código de animação CSS puro, limpo e preciso.

O que é facilidade elástica em CSS?

Primeiro, vamos tentar entender melhor o elástica facilidade de movimento de um objeto. Vejamos uma bola vermelha se movendo do ponto A para o ponto B:

A bola começa no ponto A, movendo-se em direção ao seu destino para o ponto B, mas ultrapassa o ponto B por alguma margem, efetivamente se afastando dele. Então, ele começa a desacelerar, para e começa a se mover na outra direção, de volta ao ponto B. Mais uma vez ultrapassa o ponto B-desta vez por menos margem-e continua repetindo esse padrão enquanto diminui a margem a cada vez até que finalmente pára.

Esta é a aparência do movimento de suavização elástica em um gráfico.

O ponto inicial da bola Movimento inicial Sobrepondo o destino Repetindo o padrão Endpoint

Usando bibliotecas de animação em JavaScript

Se você estiver usando uma biblioteca de animação como GreenSock , basta adicionar facilidade: Elastic.easeOut e continue codificando. Deve-se observar que embora as soluções de terceiros possam ajudá-lo a superar muitos obstáculos, elas têm um preço-às vezes literalmente-e podem afetar o tempo de carregamento, o tamanho do pacote e assim por diante.

Codificação para facilidade elástica em JavaScript

Se você não quiser (ou não puder) usar bibliotecas JS, não se preocupe, você ainda pode implementar uma função de atenuação com código puro. Sim, requer mais de uma linha de código, mas é muito simples, e já fiz a maior parte do trabalho para você:

Facilidade elástica-# 1: demonstração JS

Sem descrição

O que temos aqui é uma função elastic () simples que obtém um valor entre 0 e 1 (o dotValue) e o traduz para a posição X correta (a elasticPosition) do ponto. A função também assume duas constantes: a velocidade, que afeta a duração da animação, e a velocidade do movimento. Sinta-se à vontade para brincar com esses números para ver como eles afetam o movimento do ponto.

Quando clicamos em Executar , o dotValue é redefinido para 0 e a função é iniciada. Em seguida, ele é executado constantemente, usando a função requestAnimationFrame, aumentando o valor por velocidade em cada iteração e recalculando a posição do ponto para o novo valor. Quando o dotValue chega a 1, ele para.

Quanto à matemática, devo admitir que minhas habilidades matemáticas não são nem de longe boas o suficiente para explicar corretamente o que está acontecendo lá, mas verifiquei algumas variações de esta função de vários recursos diferentes e acabou com esta versão, que é baseada na matemática usada por easings.net , mais alguns pequenas melhorias.

Neste exemplo, usei a função setProperty que define uma propriedade personalizada CSS que controla a posição esquerda do ponto, mas você pode usá-la facilmente para controlar o tamanho, a opacidade de um elemento, ângulo, cor e muito mais. Apenas certifique-se de que o valor de entrada esteja entre 0 e 1 e que as duas const sejam definidas corretamente de acordo com suas necessidades.

Usando CSS cúbico-bezier para elasticidade de etapa única

Uma solução simples, mas fantástica, é usar a facilidade cúbica-bezier para obter um elástico de passo único. Você pode fazer isso atribuindo ao quarto parâmetro da função um valor alto o suficiente para que a animação passe seu destino e retorne ao seu valor final.

Não é tão rico quanto as outras soluções, mas não não use JS, é fácil e, às vezes, é tudo de que você precisa. Criei alguns exemplos com base neste método e você pode brincar com cubic-bezier para obter o resultado exato que deseja usando esta excelente ferramenta de Lea Verou.

Facilidade elástica-# 2: cúbico-bezier

Sem descrição

Usando frames-chave em CSS para facilitar a elasticidade

Outra maneira de obter pureza A facilidade elástica do CSS é definir manualmente cada etapa do movimento com um quadro-chave de animação para entender melhor esse método. Vejamos o movimento em um gráfico mais uma vez:

Aqui, você pode ver que o movimento é dividido em segmentos, que são separados por uma linha tracejada vertical. Observe que o movimento em cada um desses segmentos é como a função de temporização embutida de CSS facilitada que todos nós conhecemos, portanto, podemos traduzir cada segmento em um quadro-chave e obter um movimento totalmente elástico com CSS puro.

O problema com este método é que primeiro você precisa calcular a posição e o valor de cada quadro-chave, o que não é uma tarefa fácil. E, se você não for preciso, o resultado pode parecer instável e inconsistente. Para resolver isso, construí um gerador simples que cria os quadros-chave para você de acordo com seus parâmetros.

Para permitir o máximo de versatilidade, precisamos controlar três variáveis ​​que, por sua vez, controlarão a trajetória do movimento:

Passos : o número de repetições de ida e volta Desaceleração : para controlar a relação entre cada repetição Velocidade : define o deslocamento da facilidade do caminho original

Criando tamanhos de segmento para a animação

Vamos decompô-lo. Começaremos com o número de etapas (segmentos) que a animação possui e a desaceleração entre eles. Isso é importante porque cada etapa será posteriormente traduzida em um quadro-chave, e o tamanho de cada etapa determinará a posição do quadro-chave.

Facilidade elástica-# 3: Passos

Sem descrição

Se você mover o Passos controle deslizante, você controla o número de segmentos a partir dos quais o movimento será construído. A barra de desaceleração define a relação de tamanho. Quando o controle deslizante estiver totalmente para a esquerda, todos os segmentos terão o mesmo tamanho. Se o controle deslizante estiver posicionado na extremidade direita, cada segmento terá metade do tamanho do anterior. Observe que se você usar muitos passos com um valor de desaceleração alto, os últimos passos podem ser pequenos demais para ter qualquer efeito.

Definindo a velocidade

Agora que temos as posições do quadros-chave, vamos falar sobre os valores. Diremos que o valor inicial será sempre 0 e o valor final sempre será 1. Dessa forma, podemos posteriormente mapear esses valores para quaisquer propriedades CSS, e o nível de velocidade determinará o quanto cada etapa se desviará do valor final.

Facilidade elástica-# 4: Velocidade

Sem descrição

Agora que temos um belo gráfico elástico, a última etapa que precisamos concluir é adicionar um controle deslizante de duração que define o tempo geral do animação e, em seguida, decida o que queremos animar.

Neste gerador, adicionei opções para animar algumas propriedades comumente usadas, como largura, altura e transformação, mas você pode ajustar facilmente para animar bastante qualquer propriedade que você precise.

Usando o gerador

Gerador de facilidade elástica CSS

Sem descrição

Agora, abra o gerador em tela inteira . Use as entradas do gerador para controlar o movimento como quiser, copie o código de saída e use-o em seu projeto para adicionar elasticidade às suas animações.

Você pode editar e alterar a animação de acordo com suas necessidades. Por exemplo, você pode descartar o modo de preenchimento de animação e adicionar contagem de iteração de animação: infinito; se quiser que sua animação seja repetida. Ou você pode adicionar animação-direction: alternate ;, animation-delay e até mesmo combinar duas animações para propriedades diferentes.

Aqui está um exemplo legal de animações que usam frames-chave criados por este gerador:

Facilidade elástica-# 5: exemplos

Sem descrição

Conclusão

Eu sonho que um dia o CSS terá uma função elástica embutida e que este gerador se tornará inútil. Pense em como seria bom ter uma função elástica simples que aceita esses três argumentos e produz uma facilidade elástica limpa e bonita, como:

.elasticObject {animation-name: goElastic; duração da animação: 1,5s; função de tempo de animação: elástico (7, 1,9, 0,5); }

Até então, fique à vontade para usar este gerador para qualquer coisa que você precisar e se você tiver alguma opinião ou sugestão sobre como melhorar este método, escreva nos comentários. Obrigado!