Introdução

Uma coisa incrível sobre como trabalhar com animações no Svelte é que você não precisa baixar pacotes extras. Animações e transições vêm integradas com Svelte. Isso significa que você pode adicionar interações poderosas e agradáveis ​​aos aplicativos sem aumentar seu tamanho. Isso também ajuda muito a aumentar a velocidade e o desempenho do seu aplicativo.

Neste artigo, irei explicar como as transições e animações funcionam no Svelte. Também forneço algumas demonstrações nas quais aplicamos o conhecimento que adquirimos na prática.

Primeiros passos

Começamos instalando o pacote sveltejs com o seguinte código:

 npx degit sveltejs/template my-svelte-project

Transições em Svelte

Svelte oferece sete funções de transição: fade , blur , fly , slide , scale , draw e crossfade . Para usar qualquer uma dessas funções, você deve importá-las do módulo svelte/transição .

Abaixo está uma demonstração da transição que faremos para um carrossel de imagens:

Vamos ver como adicionar transições a um carrossel de imagens. Adicione o snippet de código abaixo ao seu arquivo App.svelte :

 
 {#cada livro como livro, i} {#if activeIndex===i}  {/E se} {/cada}

No snippet de código acima, importamos as funções de transição que usaremos. Também importamos a função de atenuação quintOut . O Svelte oferece várias funções de atenuação prontas para uso.

Para adicionar transições ao Svelte, usamos a diretiva transição . Passamos a diretiva transição para o elemento img .

As funções de transição podem aceitar parâmetros. Definimos o atraso , duração e easing para a transição, passando um objeto de configuração.

Transições de entrada e saída

Ao trabalhar com transições no Svelte, podemos definir funções de transição separadas para as transições in e out dos elementos. O gif abaixo é a demonstração das transições in e out que faremos:

Vamos implementar as transições in e out em outra demonstração. Copie o código abaixo em seu arquivo App.svelte :

   Alternancia 


{#if show} 
 Meu nome é Nefe James 
{/E se}

Trocamos a diretiva transição para in e out . Como a diretiva transição , os parâmetros também podem ser passados ​​para in e out .

Transições personalizadas

Você pode querer definir transições personalizadas e pode fazer isso no Svelte. Nos bastidores, cada transição é uma função que obtém um nó e um parâmetro.

O gif abaixo mostra a transição personalizada que criaremos:

Vamos ver como criar transições personalizadas no Svelte. Copie o código abaixo em seu arquivo App.svelte :

  
  (isActive=! isActive)}> {#if isActive} Ocultar caixa {: else} Mostrar caixa {/if}  {#if isActive} 
 {/E se}

Definimos uma função chamada customTransition . Esta função retorna uma propriedade css, easing e duration . A propriedade css é uma função com t como parâmetro.

t representa os quadros de transição disponíveis de 0 a 1. Usamos o valor de t para definir a escala do objeto. Em seguida, passamos customTransition para a caixa.

Animações em Svelte

Svelte fornece uma função de animação flip que pode ser acessada a partir do módulo svelte/animate . A diretiva animate é usada quando você deseja adicionar animações a uma lista de itens que estão sendo reordenados. O gif abaixo mostra como as animações flip funcionam na animação de uma lista de itens:

Vamos ver como fazer animações flip. Copie o código abaixo em seu arquivo App.svelte para acompanhar:

 
  números aleatórios  
 {#cada números como número (número)} 
 {number} 
 {/cada} 

No snippet acima, estamos embaralhando uma matriz de números de 1 a 9. Para animar o embaralhamento, começamos importando flip de svelte/animate .

Passamos flip para a tag p por meio da diretiva animate . Svelte rastreia e anima a mudança na posição dos números sempre que o botão é clicado.

Controlando os movimentos dos elementos no Svelte

O módulo svelte/motion exporta duas funções, tweened e spring , para criar armazenamentos graváveis ​​cujos valores mudam com o tempo após definir e atualizar , em vez de imediatamente.

A demonstração abaixo mostra como a animação interpolada parece em ação:

Vamos fazer uma demonstração para ver como os movimentos funcionam. Para acompanhar, copie o código abaixo em seu arquivo App.svelte :

   Animar 

Importamos a função de movimento tweened de svelte/motion , junto com a função de easing quartInOut de svelte/easing .

Tweened nos permite gerar quadros intermediários em uma sequência animada para dar a aparência de movimento suave. Tweened aceita um valor inicial como seu primeiro argumento e um objeto de configuração como o segundo. Definimos a duração e o easing para o movimento interpolado .

Definimos a largura inicial da imagem como 100px. Na função handleClick , atualizamos a largura para 150px.

Em seguida, passamos handleClick para o botão usando a diretiva on de Svelte.

Agora que sabemos como os movimentos interpolados funcionam, e os movimentos de primavera ?

A demonstração abaixo mostra como a animação spring fica quando aplicada a um elemento:

Copie o código abaixo em seu arquivo App.svelte :

Spring funciona de maneira semelhante a tweened , embora seu objeto de configuração aceite as propriedades rigidez e amortecimento . Em vez de executar essa animação quando um botão é clicado, usamos a função setInterval para alterar a largura da imagem em intervalos diferentes. Isso nos dá a aparência de um coração batendo.

Transições e animações no SvelteKit

As transições e animações funcionam da mesma forma no SvelteKit e no Svelte. Vamos configurar uma animação no SvelteKit.

A demonstração abaixo mostra como a transição interpolada fica no Sveltekit. Observe que não há diferença na implementação ou aparência:

Copie o código abaixo em seu arquivo App.svelte para acompanhar:

  
 Clique em um botão e veja a mágica de transição do SvelteKit acontecer & # x1f31f; 
 
  progress.set (0)}> 0%   progress.set (0.25)}> 25%   progress.set (0.5)}> 50%   progress.set (0.75)}> 75%   progress.set (1)}> 100% 

Como fizemos no Svelte, importamos tweened de svelte/motion junto com uma função de atenuação. Definimos uma variável progresso e definimos o valor da barra de progresso para essa variável.

Sempre que qualquer um dos botões é clicado, o valor da barra de progresso é atualizado e vemos uma bela transição ocorrer de um valor para o outro.

Conclusão

Adicionar animações sutis e efeitos de transição é uma ótima maneira de manter os visitantes envolvidos com seu conteúdo. Quando feitas corretamente, as animações tornam seu site ou aplicativo mais atraente e podem ajudar a aumentar o envolvimento do usuário.

As transições e animações no Svelte são fantásticas. A equipe do Svelte fez um ótimo trabalho ao empacotar animações, transições, movimentos e easings integrados na biblioteca.

A postagem Transições e animações essenciais em Svelte apareceu primeiro no LogRocket Blog .