Tableless

Busca Menu

Fazendo a animação do coração de like do Twitter

Seja o primeiro a comentar por

Quando o Twitter colocou uma animação no coração de Like na versão web, eu fiquei me perguntando como fazer aquela animação. De cara, parece ser bastante simples, e é. Mas é um detalhe que faz a diferença na interface para quem usa a rede social com frequência. Fiz uma versão mais simples. Segue abaixo:

Antes de olhar o código deles pra pesquisar como foi feito, fiquei pensando em uma série de formas para fazer isso aí. Primeiro, pensei em ter várias imagens, e aí usar keyframes pra alterar esse background do elemento a cada X tempo de milésimos de segundos. Depois evolui o pensamento para fazer apenas uma imagem, com todos os “frames” da animação. Muito mais inteligente, claro… lembra dos Sprites… Pois é. Com essa imagem eu poderia simplesmente mover o background com um transition simples do CSS. A imagem em questão é essa aqui:

web_heart_animation

Mas a coisa não funcionou muito bem. Ficou mais ou menos assim:

Perceba que não houve o efeito de animação como eu estava esperando. Mas tem um truque: quando utilizamos a propriedade transition, geralmente usamos os valores linear, ease-in, ease-out e etc… Essas funções definem como os valores intermediários de uma transição serão calculados. Eles pegam um valor inicial e calculam como a transição vai ocorrer até o valor final.

Dá uma olhada nessa tabela de referência de como as transições funcionam.

Há um valor que eu não conhecia até então, chamado steps(). A representação da transição do steps é assim:

O steps(), ao contrário dos outros valores, não determina uma transição contínua, mas ele separa os valores intermediários em frames estáticos. Veja um exemplo básico abaixo. Um usando linear e outro usando steps().

Esse efeito seria o mesmo efeito que eu conseguiria se tivesse feito manualmente a primeira ideia de separar os frames da animação em várias imagens… Mas muito mais inteligente. Mas perceba que eu ainda faço a transição movendo a posição do background. O valor left do background-position começa no 0 e termina no -2800px. Esse valor é exatamente a largura da imagem original que você quer fazer a animação. O coração do twitter é bem menor do que esse que eu estamos usando aqui no exemplo (embora a imagem seja a mesma). Aí é só mudar o tamanho usando o background-size e fazendo os devidos acertos.

O final, ficou assim:

Publicado no dia