Dê vida aos seus aplicativos Svelte integrando transições e animações cativantes.

Quando bem feita, a animação pode melhorar a experiência do usuário e ser uma ótima maneira de enviar feedback ao usuário. O Svelte facilita a incorporação de animações e transições em seu aplicativo, com muito pouca necessidade de bibliotecas JavaScript de terceiros.

Configurando um projeto elegante

Para começar a usar o Svelte, você deve se certificar de que o tempo de execução do Node.js. e Gerenciador de Pacotes de Nó (NPM) estão instalados corretamente em seu computador. Abra seu terminal e execute o seguinte comando:

npm create vite

Isto irá estruturar um novo projeto Vite.js. Dê um nome ao seu projeto, selecione Esbelto como estrutura e defina a variante como JavaScript. Em seguida, mude para o diretório do projeto e execute o seguinte comando para instalar as dependências necessárias:

npm install

Remova o código padrão excluindo o ativos e biblioteca pastas e limpando o conteúdo do App.svelte e Aplicativo.css arquivos.

Como usar a interpolação no Svelte

Tweening é uma técnica de animação e computação gráfica que gera quadros intermediários entre quadros-chave para criar movimentos ou transições suaves e realistas. Svelte oferece um interpolado utilitário que permite animar elementos usando valores numéricos, simplificando a criação de transições e animações fluidas em seus aplicativos da web.

O utilitário interpolado faz parte do esbelto/movimento módulo. Para usar interpolação em seu componente, você deve importá-lo assim:

import { tweened } from'svelte/motion'

Nos bastidores, o utilitário interpolado é apenas um armazenamento Svelte gravável. Uma loja Svelte é basicamente um objeto JavaScript que você pode usar para lidar com o gerenciamento de estado. O armazenamento interpolado possui dois métodos, a saber: definir e atualizar. No nível básico, a sintaxe para uma loja interpolada é mais ou menos assim:

const y = tweened(defaultValue, {
 duration: [time-in-milliseconds],
 easing: [easing-function],
})

O bloco de código acima define uma variável sim e o vincula a uma loja interpolada. Na loja, existem dois parâmetros. O primeiro parâmetro representa o valor padrão que o sim vinculativo deveria ter. O próximo parâmetro é um objeto com duas chaves duração e facilitando. O duração define quanto tempo a interpolação deve durar em milissegundos enquanto facilitando define a função de atenuação.

As funções de atenuação no Svelte definem o comportamento de uma interpolação. Estas funções fazem parte do esbelto/suave módulo, o que significa que você precisa importar uma função específica do módulo antes de passá-la para o armazenamento interpolado. Svelte possui um visualizador de atenuação que você pode usar para explorar o comportamento de diferentes funções de atenuação.

Para ilustrar completamente como você pode usar o utilitário interpolado, aqui está um exemplo de uso do armazenamento interpolado para aumentar o tamanho de um elemento no Svelte.