Introdução à animação em JavaScript

Apesar do que muitos desenvolvedores acreditam, a animação baseada em CSS não é a única maneira eficiente de animar na Web. Há também o JavaScript, e o JS tem algumas vantagens incríveis.

Por abandono JavaScript para CSS, como muitos desenvolvedores fazem, estamos inchando nossas folhas de estilo, sacrificando o controle do tempo de animação e renunciando ao movimento baseado em física.

Não me entenda mal. As animações CSS desempenham um papel importante na Web, tanto isoladamente quanto em combinação com animações JavaScript. Em particular, o CSS é perfeito para animações simples relacionadas a interações básicas com o usuário, como estados de foco e hover.

O JavaScript, no entanto, costuma ser a melhor opção para quase todo o resto, pois é muito mais versátil.

Talvez o senhor não acredite que as animações em JavaScript sejam tão rápidas quanto as animações em CSS. O senhor provavelmente já tentou animar com jQuery e viu suas animações tremerem e pularem, e presumiu que isso era um problema inerente ao JavaScript como linguagem.

Não é. Não confunda os dois, JavaScript e jQuery são coisas distintas.

O jQuery é uma biblioteca que consiste em funções que essencialmente se sobrepõem ao JavaScript simples. O jQuery não foi projetado para ser um mecanismo de animação de alto desempenho. Em vez disso, ela foi projetada para aliviar as dores de cabeça da manipulação do DOM – um trabalho que ela faz surpreendentemente bem.

Felizmente, existem bibliotecas de animação de código aberto que permitem que o senhor ignore o jQuery para aproveitar mais o poder bruto do JS simples. Com essas bibliotecas de animação, o senhor pode estabelecer um fluxo de trabalho de animação gerenciável e adicionar recursos que melhoram drasticamente o design de movimento em seus sites.

Vou colocar os senhores a par da Velocity.js Mecanismo de animação JavaScript para que as animações do seu site possam ser vigorosas, suaves e fáceis de implementar.

O que é Velocity.js?

O Velocity é uma biblioteca de animação dedicada. É simples de usar, é incrivelmente avançada e é amplamente adotada por grandes empresas (incluindo Tumblr, Microsoft e WhatsApp), e é gratuito sob a licença licença do MIT.

O Velocity imita a sintaxe do jQuery e combina perfeitamente com ele (embora possa ser usado sem jQuery ), portanto, aprender isso não deve ser problema para o senhor. Devido à onipresença do jQuery, mostrarei ao senhor o Velocity como ele é usado em combinação com o jQuery.

Observação: Para acelerar rapidamente 80/20 todas as suas animações, o senhor pode simplesmente substituir todas as chamadas de função “animate()” do jQuery atuais por chamadas de função “velocity()”, já que o Velocity espelha a sintaxe e a funcionalidade básica da função animate do jQuery (enquanto a expande). Mesmo com apenas essa rápida alteração, seu site pode receber um aumento significativo de desempenho.

Mas também há muito mais para aprender com o Velocity. Antes de nos aprofundarmos em como usar especificamente o Velocity, vamos aprender rapidamente o que é possível fazer com ele para que o senhor possa compreender seu valor.

Abaixo estão as coisas que o senhor pode fazer com a animação JavaScript que simplesmente não podem ser feitas com a animação baseada em CSS.

Rolagem de página

Uma tendência recente no design da Web é ter sites longos de página única em que os links fazem com que a página role suavemente para baixo até a seção apropriada da página, em vez de navegar para uma página totalmente diferente. Esse é um dos usos mais populares das animações JS, pois o CSS não pode executar a rolagem.

No Velocity, basta executar o comando velocity com a função scroll no elemento para o qual o senhor deseja rolar:

$element.velocity("scroll", 1000);

Essa função faz com que o navegador role para baixo até o elemento selecionado (jQuery objeto, $element) usando uma duração de 1000ms. Apenas com o jQuery, essa seria uma função muito mais complicada e com várias linhas.

Não deixe que esse código o sobrecarregue se o senhor não entender o que ele significa; vamos analisá-lo lentamente depois de passarmos por mais alguns recursos interessantes.

Reversão de animação

No jQuery, para voltar ao estado original antes do início da animação, o senhor precisa animar manualmente as propriedades de volta aos seus valores originais. Por exemplo:

Com jQuery

// Animate a 50px wide element to a width of 100px over 400ms
$element.animate({ width: "100px" }, 400);

// Animate it back to its original width value of 50px over 400ms
$element.animate({ width: "50px" }, 400);

Em contraste, com o Velocity, é uma simples questão de executar o comando reverse:

// Animate a 50px wide element to a width of 100px over 400ms
$element.velocity({ width: "100px" }, 400);
// Reverse previous animation - animate back to a width of 50px over 400ms
$element.velocity("reverse");

Isso reverterá a animação para o estado original do elemento selecionado antes da animação – não há necessidade de especificar os valores manualmente.

Movimento baseado em física

O movimento no mundo real não é linear nem suave. Ele tem partes rápidas, partes lentas, atrito e até mesmo o conceito de peso. Com animações baseadas em JavaScript, o senhor pode imitar a física do mundo real em suas animações, fazendo com que as coisas pareçam mais naturais. O movimento linear parece robótico (sem vida) e um pouco desconfortável de assistir.

Para imitar o movimento do mundo real, o Velocity oferece um tipo de atenuação com base na física da mola, assumindo um valor de tensão (default: 500) e um valor de fricção (default: 20) como seus parâmetros (ver Documentação do Velocity para obter mais informações).

// Animate to a width of 100px with spring physics over the default 400ms. Spring tension is set to 1000, and friction is set to 50.
$element.velocity({ width: "100px", [ 1000, 40 ]);

Um valor alto de tensão aumenta a velocidade total e a saliência da animação. Um valor de fricção mais baixo aumenta a velocidade no final da animação (a alta fricção faz com que a animação desacelere mais rapidamente). O ajuste desses valores tornará cada animação única, realista e interessante.

O exemplo acima seria muito rápido e saltitante (alta tensão), mas desaceleraria rapidamente e ficaria lento próximo ao final da animação (alta fricção)

Ok, ótimo, então como posso usá-lo?

Chega de ouvir falar sobre o que o pode vamos descobrir como o senhor pode começar a usá-lo hoje mesmo. Como mencionei anteriormente, o Velocity pode ser usado de forma independente, mas combiná-lo com o jQuery leva a resultados mais rápidos, pois o jQuery facilita muito a seleção de elementos.

A primeira etapa é fazer o download do Velocity.js em aqui. Em seguida, inclua-o em seu arquivo HTML em uma tag de script antes da tag de fechamento do corpo da página. Por exemplo:

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/velocity/1.1.0/velocity.min.js"></script>

Observação: se estiver usando o jQuery, certifique-se de incluir o jQuery antes do Velocity, pois o Velocity adaptará sua API com base na presença ou não do jQuery.

Uma vez incluído, o senhor pode basicamente começar a usá-lo no lugar da função “animate” do jQuery. No entanto, há vários acréscimos que tornam o Velocity muito mais poderoso do que isso, como inversões de animação, transformações, física de mola, encadeamento e animações coloridas (tudo isso será abordado aqui). Mas isso não termina aí, confira o os documentos do Velocity para obter mais informações.

Vamos aprender como realmente usar a sintaxe do Velocity!

Argumentos

O Velocity aceita um ou mais argumentos. O primeiro argumento é o único argumento obrigatório. Ele pode ser o nome de um comando (como no exemplo de “scroll” acima) ou pode ser um objeto de dados que mapeia as propriedades CSS para os valores finais da animação.

// Data object setting the animation final values of CSS properties opacity, and left to 50%, and 500px respectively.
$element.velocity({ opacity: "50%", left: "500px"});

O segundo argumento é um objeto de dados de opções de animação, como duração, atenuação, atraso e conclusão (função de retorno de chamada que é executada após a animação). completa).

Objeto de dados

// Animates an element to an opacity of 50% over 200ms after a 200ms delay.
$element.velocity({ opacity: "50%" }, { delay: 200, duration 200 });

Como alternativa, como um atalho, o senhor pode passar valores separados por vírgula para a duração, a atenuação e a função completa em qualquer ordem. No entanto, se desejar ter uma opção adicional, como atraso, o senhor deve usar um objeto de dados, e somente um objeto de dados – não é possível misturar e combinar.

Separado por vírgulas

// Animates an element to a left position of 50px with a 500ms duration, an easing of "ease-in-out", and with an alert message firing at the end of the animation.
$element.velocity({ left: 50px }, 500, "ease-in-out", function () { alert(‘done') } );
// Won't work: mixes data object and comma separated values
$element.velocity({ left: "50px" }, 500, "ease-in-out", function () { alert("done") }, { delay: 200 });

Observação: O segundo argumento é opcional porque há valores padrão para as propriedades mais importantes: duration: 400ms, e easing: "swing". Todas as outras opções de animação são opcionais.

Observe também que o senhor só pode passar um único valor numérico por propriedade CSS, portanto padding: "10px 15px" não funcionará. Em vez disso, o senhor deve definir cada uma delas separadamente: { paddingLeft: "10px", paddingTop: "15px" … }. Além de ser mais legível e explícito, isso também significa que o senhor pode especificar tipos de atenuação para cada subpropriedade, em vez de ter um tipo de atenuação global, o que proporciona uma personalização inigualável das animações.

Observação: As propriedades CSS com várias palavras (font-size e padding-left) devem ser escritos em camelcase (fontSize e paddingLeft), sem hífen.

Veja a caneta Velocity.js – Noções básicas: Argumentos por Julian Shapiro (@julianshapiro) em CodePen.

Valores de propriedade:Se um tipo de unidade não for fornecido, será assumido um (ms, px, e deg são geralmente assumidos), mas ser explícito é melhor para que o senhor possa discernir os tipos de unidade em um relance ao ler o seu código. Se houver qualquer coisa que não seja um valor numérico, então as aspas devem ser usadas. Por exemplo, duration: 500; seria permitido, mas o duration: 500px; não, as aspas teriam que ser usadas em torno do 500px.

A animação JavaScript também permite que quatro operadores de valor sejam usados: operadores de valor +, -, * e /, permitindo que o senhor adicione, subtraia, multiplique e divida o valor atual da propriedade:

$element.velocity({
	width: "+= 50px", // Adds 50px to the current width value
	height: "/= 2" // divides the current height value by two
});

O uso desses recursos abreviados mantém toda a lógica de animação dentro do mecanismo de animação do Velocity. Isso mantém o código conciso e legível (eliminando cálculos manuais de valores) e também ajuda a melhorar o desempenho, fornecendo ao Velocity mais informações sobre suas intenções de animação. Quanto mais lógica de animação estiver contida no Velocity, melhor o Velocity poderá otimizar o desempenho do código.

Veja a caneta Velocity.js – Noções básicas: Valores por Julian Shapiro (@julianshapiro) em CodePen.

Encadeamento

Encadear chamadas Velocity uma após a outra no mesmo elemento coloca as animações em fila para serem executadas uma após a outra:

$element
	.velocity({ width: "500px", height: "300px"})
	.velocity({ opacity: 0 });

Isso faria com que o elemento fosse animado para uma largura de 500px e altura de 300pxe, depois de concluir essa animação, ela desapareceria para uma opacidade de 0%. Conforme mencionado anteriormente, isso permite que o senhor crie animações complexas e de vários estágios com a garantia de que o tempo ocorrerá exatamente como planejado – uma após a outra – sem nenhum cálculo manual.

Veja a caneta Velocity.js – Noções básicas: Encadeamento por Julian Shapiro (@julianshapiro) em CodePen.

Flexibilização

Mencionei a palavra easing algumas vezes neste artigo, e talvez o senhor esteja se perguntando o que isso significa. Easing são funções matemáticas que determinam a velocidade da animação em diferentes estágios ao longo de sua duração. Por exemplo, uma atenuação “ease-in-out” acelera gradualmente no início da animação e desacelera gradualmente perto do final da animação. Uma atenuação “linear” tem uma velocidade constante durante toda a duração e parece muito chocante e robótica.

O senhor especifica a atenuação com a opção easing:

// Animate an element to a top position of 100px with an easing of "ease-in-out"
$element.velocity({ top: 100 }, { easing: "ease-in-out" });

Veja a caneta Velocity.js – Opção: Easing (jQuery UI) por Julian Shapiro (@julianshapiro) em CodePen.

A suavização também é a forma como o senhor usa a física da mola, conforme mencionado anteriormente. O senhor pode usar os valores padrão (tensão de 500, fricção de 20) passando um valor de “spring” ou pode especificá-los manualmente:

// Animates an element to a width of 500px with spring physics with a tension of 250, and a friction of 10 (low tension, low friction).
$element.velocity({ width: 500 }, { easing: [ 250, 10 ] });

Os Easings são muito mais complicados, mas, por uma questão de brevidade, vou parar por aqui. Leia a documentação do Velocity para obter mais informações.

Veja a caneta Velocity.js – Opção: Easing (Física da mola) por Julian Shapiro (@julianshapiro) em CodePen.

Cor

O Velocity permite animações de cores para as seguintes propriedades CSS: color, backgroundColor, borderColor e outlineColor. Essas propriedades de cor aceitam apenas cadeias hexadecimais como entradas (#000000 para preto, #3b5998 para o azul do Facebook). Entretanto, o senhor pode ajustar os valores individuais de vermelho, verde e azul (0 a 255) e até mesmo sua opacidade com o valor alfa (0 a 1). Basta acrescentar os nomes das propriedades CSS das cores com “Red” (vermelho), “Green” (verde), “Blue” (azul) ou “Alpha” (alfa).

$element.velocity({
	// Animate borderColor to the hex color for "fogdog" (orange)
	borderColor: "#f06d06",
	// Animate the background to an opacity (alpha) of 80%
	backgroundColorAlpha: 0.8,
	// Animate the blue component of the element's text color to 200
	colorBlue: 200
});

Veja a caneta Velocity.js – Recurso: Cores por Julian Shapiro (@julianshapiro) em CodePen.

Rolagem

Conforme mencionado anteriormente, o comando scroll faz com que a página role até a borda superior de um elemento. O senhor pode passar as mesmas opções que as outras animações, bem como encadear com outras chamadas de animação.

$element
	// scroll to the top edge of the element over 1000ms
	.velocity("scroll", { duration: 1000 })
	// fade in after scroll animation
	.velocity({ opacity: 1 });

Por padrão, a rolagem da página ocorre no eixo y. Para mudar para a rolagem horizontal, use a opção de eixo:

// Scrolls the browser to the left edge of the element
$element.velocity("scroll", { axis: "x" });

Um efeito comum é ter um deslocamento da borda superior durante a rolagem, para que o conteúdo não fique na parte superior do navegador e seja difícil de ler. Para obter esse efeito, ou o efeito oposto no Velocity, use a opção offset:

// Scroll to a position 100px above the element's top edge
$element.velocity("scroll", { duration: 1000, offset: "-100px" });

// Scroll to a position 100px below the element's top edge
$element.velocity("scroll", { duration: 1000, offset: "100px" });

Veja a caneta Velocity.js – Comando: Rolar com opção de contêiner por Julian Shapiro (@julianshapiro) em CodePen.

Transformações

Deseja combinar o poder das animações CSS e das animações JS? Coloque algumas transformações de CSS, permitindo que o senhor faça manipulações visuais 2D e 3D, como translação, dimensionamento e rotação. Observe que isso não afeta a localização do elemento no site nem a localização dos elementos ao redor dele.

O Velocity é compatível com as seguintes transformações:

• translateX: Mover um elemento ao longo do eixo x (esquerda-direita)
• translateY: Mover um elemento ao longo do eixo y (para cima e para baixo)
• rotateZ: Girar um elemento em torno do eixo z (sentido horário e anti-horário)
• rotateX: Girar um elemento em torno do eixo x (de cima para baixo)
• rotateY: Girar um elemento em torno do eixo y (esquerda-direita)
• scaleX: Multiplicar a dimensão da largura de um elemento
• scaleY: Multiplicar a dimensão da altura de um elemento

$element.velocity({
	rotateZ: "90deg", // rotate clockwise 90 degrees
	scaleX: 2.0 // double the width
});

Veja a caneta Velocity.js – Recurso: Transformações por Julian Shapiro (@julianshapiro) em CodePen.

Seguindo em frente

As animações dão vida e interatividade a uma página que, de outra forma, seria estática, e as animações baseadas em JavaScript são a melhor maneira de adicioná-las.

Com as animações CSS, o senhor está limitado em termos de funcionalidade às atualizações pouco frequentes do padrão CSS. Com o JavaScript, há dezenas de novas bibliotecas, plug-ins e atualizações sendo adicionados ao mundo de código aberto todos os dias, expandindo as possibilidades de suas animações por meio do uso de novas ferramentas.

O Velocity tem mais recursos do que os demonstrados aqui, e eu o encorajo a conferir o documentação. Agora vá experimentar! 🙂

Bônus!

Bônus final e duplo: confira este tutorial sobre como usar o pacote UI do Velocity para melhorar as interfaces de usuário. E confira este Galeria de demonstrações do Velocity.