Uma animação bem construída eleva a experiência do usuário, funcionando como um feedback visual eficaz. O Svelte simplifica a integração de animações e transições, reduzindo a dependência de bibliotecas JavaScript externas.
Iniciando um Projeto Svelte
Para começar, certifique-se de que o Node.js e o Node Package Manager (NPM) estejam instalados no seu computador. Abra o terminal e execute o seguinte comando:
npm create vite
Isso cria a estrutura de um projeto Vite.js. Defina um nome, escolha Svelte como framework e JavaScript como variante. Navegue até o diretório do projeto e execute:
npm install
Remova o código padrão, excluindo as pastas assets e lib, e limpando os arquivos App.svelte e App.css.
Utilizando Interpolação no Svelte
A interpolação é uma técnica de animação que gera quadros intermediários entre pontos-chave, criando movimentos suaves. O Svelte oferece a função `tweened` para animar elementos com valores numéricos, facilitando transições fluidas.
O `tweened` faz parte do módulo `svelte/motion`. Para utilizá-lo, importe assim:
import { tweened } from 'svelte/motion'
Internamente, `tweened` é um objeto gravável do Svelte, usado para gerenciamento de estado. Possui dois métodos: `set` e `update`. Basicamente, a sintaxe é:
const y = tweened(valorInicial, {
duration: [tempo-em-milissegundos],
easing: [função-de-atenuação],
})
Aqui, `y` está associado a um `tweened`. O primeiro parâmetro é o valor inicial. O segundo é um objeto com `duration`, definindo a duração em milissegundos, e `easing`, especificando a função de atenuação.
As funções de atenuação definem o comportamento da interpolação. Elas fazem parte do módulo `svelte/easing`, e precisam ser importadas. O Svelte oferece um visualizador para explorar diferentes funções de atenuação.
Um exemplo prático de `tweened` é o aumento do tamanho de um elemento:
<script>
import { tweened } from "svelte/motion";
import { bounceOut } from "svelte/easing";const size = tweened(0, {
easing:bounceOut
})
</script><div class="container">
<div style={`height: ${$size * 30}px;`}>
</div>
</div>
<button on:click={()=>(size.update(()=>$size+3))}>Aumentar tamanho</button><style>
.container{
display: flex;
align-items: flex-end;
margin-top: 400px;
}
div{
height:0;
width:100px;
background-color: red;
}
</style>
O código importa `tweened` e `bounceOut`. A constante `size` é vinculada a um `tweened` com valor inicial 0. O valor da loja é acessado com `$`. O objeto de parâmetro define `easing` com `bounceOut`.
O botão usa `on:click` para chamar `update` em `size`, aumentando `$size` em 3 a cada clique. O elemento div usa um estilo inline que depende de `$size`. Ao executar, você verá o tamanho da div aumentar a cada clique.
Transições no Svelte
Para transicionar elementos no DOM, o Svelte utiliza a diretiva `transition` e o módulo `svelte/transition`, que exporta funções úteis. Para desfocar um elemento, importe a função `blur`:
<script>
import { blur } from 'svelte/transition';
</script>
Em seguida, crie uma variável para controlar a montagem/desmontagem do elemento:
<script>
import { blur } from 'svelte/transition';
let visible = false;
</script>
Use o bloco `if` para renderizar um div condicionalmente e adicione a diretiva `transition` configurada para `blur`:
{#if visible}
<div transition:blur>Aqui estou...</div>
{/if}
Crie um botão para controlar a visibilidade:
<button on:click={()=>visible=!visible}>
{visible ? "Ocultar" : "Mostrar"}
</button>
O módulo `svelte/transition` exporta `fade`, `blur`, `fly`, `slide`, `scale`, `draw` e `crossfade`. As transições aceitam parâmetros como `delay`, `duration`, `easing`, `opacity` e `amount`. Além disso, o Svelte oferece transições `in` e `out` para controle mais preciso. Para um exemplo com `blur` na entrada e `slide` na saída:
<script>
import { blur, slide } from 'svelte/transition';
let visible = false;
</script>{#if visible}
<div in:blur out:slide>Aqui estou...</div>
{/if}<button on:click={()=>visible=!visible}>
{visible ? "Ocultar" : "Mostrar"}
</button>
Note que a diretiva `transition` foi substituída por `in` e `out`, cada um apontando para uma função de transição específica.
Animações de Elementos no Svelte
Para animar elementos, use a função `flip` do `svelte/animate`. `flip` significa “First, Last, Invert, Play” (Primeiro, Último, Inverter, Reproduzir) e aceita `delay`, `duration` e `easing`. Veja o código:
<script>
import { flip } from "svelte/animate";
let originalList = ["Tomates", "Pão", "Peixe", "Leite", "Ração para gatos"];
let shoppingList = [...originalList];
</script><div class="container">
{#each shoppingList as item (item)}
{@const number = shoppingList.indexOf(item)}
<div animate:flip>
{number + 1}. {item}
</div>
{/each}
</div><button on:click={() => shoppingList = shoppingList.sort()}>Organizar</button>
<button on:click={() => shoppingList = [...originalList]}>Redefinir</button>
O código importa `flip`. Existem duas listas: `originalList` e `shoppingList`. O bloco `keyed-each` renderiza os elementos de `shoppingList`. A div filha do “container” usa a diretiva `animate` apontando para `flip`. O primeiro botão ordena a lista e o segundo a redefine.
A Importância da Animação em Aplicações Web
Animações transcendem a estética, aprimorando a experiência do usuário e a comunicação. Ao combinar funcionalidade e visual, a animação torna os aplicativos web não só engajadores, mas também intuitivos.