Animação na Web usando JavaScript: Animação de texto

Oi, mamãe

$("div").blast({ delimiter: "word" , generateValueClass: true });

O elemento se transformaria no seguinte:

<div class="blast-root">
	<span class="blast blast-word-Hi">Hi</span>
	<span class="blast blast-word-Mom">Mom</span>
</div>

Quando o Blast é chamado com o letter o elemento se transformaria no seguinte:

<div class="blast-root">
	<span class="blast blast-letter-H">H</span>
	<span class="blast blast-letter-H">i</span>
	… and so on…
</div>

O generateValueClass é útil quando o senhor precisa usar CSS ou JavaScript para manipular correspondências de texto com base no texto contido nelas. Se, por exemplo, o senhor usasse esse recurso em um trecho de livro, poderia criar uma visualização de todas as instâncias da palavra “and” dando aos elementos com a classe .blast.word-and um fundo amarelo:

// jQuery implementation
$(".blast-word-and").css("background", "yellow");

// Raw JavaScript implementation
document.querySelectorAll(".blast-word-and").forEach(function(item) { item.style.background = "yellow"; });

// CSS implementation
.blast-word-and {
	background: yellow;
}

Graças a esse recurso, o senhor pode direcionar facilmente as correspondências de texto por meio de CSS ou JavaScript sem precisar usar um código personalizado complicado para verificar individualmente o conteúdo de texto de cada elemento.

Opção: Tag

Essa opção permite que o senhor especifique o tipo de elemento que envolve as partes do texto. O valor padrão é span, mas o senhor pode passar qualquer tipo de elemento (por exemplo, a, div, p). Considere este exemplo:

<div>
Hi Mom
</div>

// Use the "div" element as the wrapper tag
$("div").blast({ delimiter: "word" , tag: "div" });

Consequentemente, o elemento se transformaria no seguinte:

<div class="blast-root">
	<div class="blast">Hi</div>
	<div class="blast">Mom</div>
</div>

Esse recurso é útil para garantir que os elementos de texto resultantes imitem a estrutura do HTML circundante. Talvez os elementos irmãos próximos sejam todos do tipo div e, nesse caso, o exemplo acima pode ser apropriado.

Talvez o senhor também queira aproveitar as propriedades exclusivas oferecidas pelos diferentes tipos de tag. strong, por exemplo, coloca automaticamente o texto em negrito, enquanto div força cada correspondência de texto a começar em uma nova linha graças ao divo padrão do display valor de "block".

Comando: Reverse

O senhor pode desfazer o Blast em um elemento passando false como único parâmetro em uma chamada Blast. Portanto, se o seu elemento Blasted tivesse a seguinte aparência:

<div class="blast-root">
	<div class="blast">Hi</div>
	<div class="blast">Mom</div>
</div>

e o senhor passasse a seguinte chamada Blast:

$("div").blast(false);

o elemento retornaria à sua estrutura original:

<div>
Hi Mom
</div>

O senhor deve estar se perguntando como isso funciona: quando o Blast é revertido, ele simplesmente destrói os elementos de wrapper gerados e, em seguida, insere texto bruto onde os elementos de wrapper estavam anteriormente. Observe que isso quebrará os manipuladores de eventos atribuídos aos novos elementos gerados pelo Blast, mas não quebrará os manipuladores de eventos associados ao HTML que existia antes de o Blast ser chamado inicialmente.

Inverter o Blast dessa forma é um componente crucial da animação textual, pois o modus operandi ao animar elementos em uma página da Web é deixar as coisas como estavam antes de o senhor tocá-las. Se, por exemplo, o senhor tiver usado o Blast para separar uma frase a fim de animar suas palavras, uma de cada vez, deverá reverter o Blast após a conclusão da animação. Consequentemente, o código JavaScript que interage posteriormente com o texto não terá elementos filhos inesperados que precisarão ser analisados. Em resumo, é uma boa prática evitar deixar o HTML desnecessariamente inchado para que a interação programática posterior com os elementos não se torne cada vez mais complicada.

OBSERVAÇÃO: Para saber mais sobre o Blast, incluindo seus recursos exclusivos de pesquisa e sua compatibilidade com software de leitura de tela, visite a documentação em Julian.com/research/blast.

Agora que o senhor separou os elementos de texto, é hora de animá-los.

Transição de texto para dentro ou para fora da tela

O uso mais comum da animação textual é animar o texto para dentro e para fora da tela. Uma implementação básica disso é animar as palavras de uma frase para que sejam exibidas uma após a outra.

Substituição de texto existente

Vamos começar criando um contêiner div com um texto de espaço reservado que será substituído por um novo texto que será animado no lugar:

<div>
	A message will load here shortly…
</div>

Como o div começa como visível, Blasting the divresulta em elementos de texto filho que também são visíveis. Como seu objetivo é animar os elementos de texto gerados para exibição a partir de um estado de invisibilidadeo senhor deve tornar os elementos de texto gerados invisíveis imediatamente após chamar o Blast:

$("div")
	.blast({ delimiter: "word" })
	.css("opacity", 0);
	.velocity({ opacity: 1 });

Isso substitui o divcom uma nova mensagem. Em seguida, ele envia o div usando o word delimitador. Como uma chamada para o Blast retorna os elementos gerados do invólucro de texto para a cadeia de seletores do jQuery, o senhor pode facilmente estender o código para definir a opacidade de cada elemento de texto como 0. Isso prepara os elementos para a chamada subsequente do Velocity, que consiste em uma animação simples de opacidade.

O senhor deve ter notado que o código acima faz com que todas as partes do texto sejam animadas para exibição simultaneamente. Isso, é claro, anula o propósito de usar o Blast em primeiro lugar: se o senhor quisesse que todo o conteúdo da div fosse animado para exibição simultaneamente, poderia ter simplesmente animado o elemento div em si. O objetivo aqui é, na verdade, obter uma sequência de animação sucessiva que consiste na animação de um elemento de texto após o outro.

Escalonamento

É aqui que o pacote UI do Velocity entra em ação. Para impor um atraso sucessivo entre os horários de início da animação em um conjunto de elementos, use o recurso stagger do Velocity UI pack, que espera uma duração especificada em milissegundos. Aplicando-a ao exemplo de código anterior, o senhor obtém:

$("div")
	.html("This is our new message.")
	.blast({ delimiter: "word" })
	.css("opacity", 0)
	.velocity("transition.fadeIn", { stagger: 50 });

O código acima produz um atraso sucessivo de 50 ms entre os horários de início da animação dos elementos. É importante observar que a chamada Velocity anterior do { opacity: 1 } da chamada Velocity para "transition.fadeIn"que é um efeito de fade pré-fabricado incluído no pacote UI do Velocity. Como o stagger funciona com efeitos do pacote UI, este exemplo mostra o efeito que espelha a animação do opacity para um valor apenas de 1.

Tenha o cuidado de manter os tempos de escalonamento em uma duração baixa para que os usuários não esperem desnecessariamente enquanto o texto desaparece na tela. Lembre-se de que quanto maior for a contagem de palavras de um elemento, maior será o tempo total que uma sequência de animação levará para ser concluída. O escalonamento de elementos de texto é uma das maneiras mais fáceis de cair na má prática de tornar a interface mais lenta.

Transição de texto para fora da tela

O exemplo de código na seção anterior apenas animou o texto para dentro – e não para fora – da visualização; o divfoi imediatamente substituído pela nova mensagem. Isso não significa necessariamente que o design de movimento seja ruim, mas, do ponto de vista da teoria do design de movimento, muitas vezes é benéfico unificar as animações de modo que um elemento desapareça da visualização de uma forma que reflita a maneira como ele apareceu.

Se o senhor quiser que a animação textual externa espelhe a animação interna, poderá reformular o exemplo de código da seguinte forma:

// Select the previously blasted text
$("div .blast").velocity(
	// Animate the existing text out of view with the appropriate UI pack effect
	"transition.fadeOut",
	{
		// Stagger the outward animation as you did the inward animation
		stagger: 50,
		backwards: true,
		// When this outward animation is complete, begin the inward animation
		complete: function() {
			// Proceed with the inward animation
			$("div")
			.html(message)
			.blast({ delimiter: "word" })
			.css("opacity", 0)
			.velocity({ opacity: 1 }, { stagger: 50 });
		}
	}
);

Isso começa chamando o pacote Velocity UI transition.fadeOut sobre as partes de texto geradas pelo div que foram previamente jateadas. Assim como na direção para dentro, o stagger compensa sucessivamente as animações individuais das partes do texto na direção externa. Uma novidade nessa chamada é o uso do pacote Velocity UI backwards do pacote Velocity UI, que faz par com a opção stagger para inverter a ordem do conjunto de elementos de destino, de modo que o último elemento (a última palavra da frase) seja animado antes do penúltimo elemento, e esse elemento seja animado antes do penúltimo, e assim por diante. Quando essa sequência de animação externa estiver concluída, a animação interna será chamada de dentro do complete callback.

Usando o backwards para animação de texto oferece dois benefícios. Primeiro, ajuda a espelhar (criar o inverso de) a animação para dentro, que consiste na primeira palavra sendo exibida antes da segunda, e assim por diante. Em segundo lugar, quando a animação para trás é imediatamente seguida pela animação para frente, o resultado líquido é um elegante efeito de encadeamento no qual a última palavra na direção para trás e a primeira palavra na direção para frente ocorrem consecutivamente. Isso funciona para unir as duas sequências de animação no que parece ser uma animação conjunta em vez de duas animações separadas coladas de forma grosseira.

Transição de partes individuais do texto

As sequências de títulos de filmes são bem conhecidas por seu design de movimento tipográfico inventivo. A técnica subjacente a muitos desses efeitos é a seleção de elementos de texto individuais para animação. É isso que esta seção aborda.

OBSERVAÇÃO: para obter mais inspiração para a animação tipográfica de sua interface do usuário, pesquise sequências de títulos de filmes no YouTube e faça anotações detalhadas! Desde que tenha em mente os princípios do design de movimento, o senhor deve se sentir encorajado a explorar o design de animação textual em sua interface.

Para obter um controle detalhado sobre os elementos gerados pelo Blast, basta usar a função CSS nth-child do CSS e o seletor eq() do jQuery. Essas funções se comportam de forma semelhante umas às outras, pois permitem a seleção de um elemento em um conjunto com base no índice desse elemento. Em outras palavras, se o senhor passasse um valor inteiro de 3 para essas funções, elas teriam como alvo o terceiro elemento (ou seja, a terceira palavra) no conjunto completo de elementos (ou seja, sentença com várias palavras):

// CSS implementation
.blast:nth-child(3) {
	color: red;
}

// jQuery implementation
$(".blast").eq(2).css("color", "red");

Os dois exemplos acima têm como alvo o terceiro elemento da página que tem a classe .blast aplicada. (Observe que a função eq do jQuery é baseada em 0, enquanto a nth-child do CSS é baseada em 1, daí os diferentes valores inteiros passados para os exemplos). Continue com uma implementação do jQuery para trabalhar em um exemplo completo:

<div>
Current status: paused
</div>

// Blast the div using the word delimiter
$("div").blast({ delimiter: "word" })
	// Select the third word in the sentence (the span containing the "paused" text)
	.eq(2)
	// Fade the third element out of view then replace its inner text with a new message
	.velocity({ opacity: 0 }, function() { $(this).text("running"); })
	// Fade the replaced text into view
	.velocity({ opacity: 1 });

Isso faz uma frase explodir, seleciona a terceira palavra (“paused”), desvanece a palavra, substitui a palavra desvanecida por uma nova palavra (“running”) e, em seguida, desvanece a nova palavra. O efeito líquido é que a palavra-chave indicadora de status dentro de uma frase se transforma graciosamente em uma nova palavra para alertar o usuário sobre uma alteração. Esse é um efeito extremamente elegante que consiste em apenas algumas linhas de código simples. Se o senhor executasse esse efeito várias vezes em um bloco maior de texto, poderia obter um efeito impressionante no qual uma mensagem parece se transformar esporadicamente em outra.

Transição de texto de forma extravagante

O senhor poderia facilmente trocar o efeito transition.fadeIn que usou até agora por outro efeito do pacote UI do Velocity. Alguns dos outros efeitos são bastante extravagantes, variando de transition.shrinkIn, que faz com que um elemento seja dimensionado para baixo na visualização, até transition.perspectiveDownInque faz com que um elemento seja girado para baixo, como uma porta de celeiro com dobradiças.

OBSERVAÇÃO: para obter uma lista completa dos efeitos do pacote UI, incluindo demonstrações ao vivo, visite VelocityJS.org/#uiPack).

Lembre-se de que alguns efeitos usam transformações 3D (rotateX, rotateY e translateZ), que não funcionam com elementos cujo valor de exibição CSS esteja definido como “inline” – o padrão display o valor padrão para elementos span e anchor, em particular. A solução alternativa é definir os elementos de texto gerados pelo Blast com um valor de exibição de "inline-block", o que mantém o "inline" se comportam como normalmente fazem, ao mesmo tempo em que lhes dá a funcionalidade adicional de "block" (como o div e p), nos quais as propriedades relacionadas à posição, incluindo transformações 3D, podem ser estilizadas. Tomando isso display o exemplo de transição de texto para dentro agora teria a seguinte aparência:

$("div")
	.html(message)
	.blast({ delimiter: "word" })
	.css({ opacity: 0, display: "inline-block" })
	.velocity("transition.perspectiveDownIn", { stagger: 50 });

Isso define as partes do texto Blasted’ display para "inline-block" na mesma chamada para a função css() da jQuery que define a função opacity para um valor inicial de 0.

Floreados textuais

O último tópico desta discussão sobre animação textual é o conceito de floreios, animações de ambiente que produzem efeitos contínuos para fins estéticos. Um exemplo pode ser uma sequência de texto que pisca como uma lâmpada que está morrendo. Outro pode ser a animação contínua de todas as palavras de uma frase em diferentes tons de azul.

Ambas as ideias são ruins.

Esses efeitos distraem os usuários e, em última análise, divertem apenas o senhor, o desenvolvedor que gosta de brincar com o design de movimento. Nunca inclua animação apenas por incluir; se uma parte da sua página estiver desviando a atenção do usuário sem sentido das partes que têm utilidade, volte para a prancheta de desenho.

A rara exceção a isso são os indicadores de status – textos como “Loading…” – que mantêm o usuário a par do que a interface está fazendo. Esses são alvos apropriados para floreios textuais porque os floreios informam ao usuário que a interface ainda está processando dados (em vez de ter congelado). Dessa forma, os floreios funcionam como um batimento cardíaco visual envolvente.

Então, se os floreios textuais são geralmente considerados uma prática ruim, por que estamos falando sobre isso? Porque os floreios que não são animados são geralmente uma ótima ideia! Considere este um bônus sem animação fornecido pelo Blast: o senhor pode estilizar os elementos de texto gerados pelo Blast para produzir colagens coloridas e outros designs tipográficos exclusivos. Por exemplo, o senhor pode separar o texto do slogan de um site (“Delivering happiness right to your door!”) palavra por palavra para reduzir a opacidade de cada palavra sucessiva, criando assim um efeito de gradiente sutil que abrange toda a frase. Veja como seria esse código:

<div>
	Hi Mom
</div>

// Blast the div then iterate through the generated text elements
$("div").blast({ delimiter: "character" }).each(function(i, element) {
	// Successively reduce the opacity of each element with an arbitrary formula
	var adjustedOpacity = 1 - i/10;
	element.style.opacity = adjustedOpacity;
});

Em vez de iterar opacity o senhor também poderia iterar valores RGB para criar gradientes baseados em cores. Por exemplo, se o senhor aumentasse o componente azul do texto cuja cor começa inicialmente como cinza, produziria elementos cada vez mais ricos em azul à medida que vai do primeiro ao último:

 // Blast the div then iterate through the generated text elements 
 $("div").blast({ delimiter: "character" }).each(function(i, element) { 
	 // Successively increase the blue color component of each element with an arbitrary formula 
	 var adjustedBlue = i*20; 
	 element.style.color = "rgb(0, 0," + adjustedBlue + ")"; 
 }); 

Conclusão

Esse é apenas o começo das possibilidades criadas pelo controle granular de texto. Outras técnicas incluem o ajuste fino das coordenadas de cada letra de uma palavra para produzir um efeito de colagem ou a colocação de palavras ao redor da circunferência de um círculo para imitar o design tipográfico que o senhor pode encontrar em uma base para bebidas.

Embora essas técnicas possam ser adequadas para peças centrais de páginas iniciais arrojadas, elas podem não ser apropriadas para partes essenciais da interface do usuário que estão sujeitas a interações repetidas do usuário. Por quê? Porque o texto estilizado é mais difícil de ler de relance do que o texto não estilizado. Mas se o senhor considerar o equilíbrio entre forma e função, não terá problemas!

Esta postagem foi um capítulo extraído do livro de Julian Animação na Web usando o livro JavaScript. Leia o livro para dominar os mais recentes princípios de animação na Web, incluindo desempenho de animação, teoria, fluxo de trabalho e muito mais.