Comprendere le transizioni e le animazioni in Svelte

Se eseguita correttamente, l'animazione può migliorare l'esperienza dell'utente e può essere un ottimo modo per inviare feedback all'utente. Svelte ti consente di incorporare facilmente animazioni e transizioni nella tua applicazione con pochissima necessità di librerie JavaScript di terze parti.

Impostazione di un progetto snello

Per poter iniziare a funzionare con Svelte, dovresti assicurartene il runtime di Node.js E Gestore pacchetti nodo (NPM) siano installati correttamente sul tuo computer. Apri il tuo terminale ed esegui il seguente comando:

npm create vite

Questo impalcatura a nuovo progetto Vite.js. Dai un nome al tuo progetto, seleziona Snello come framework e imposta la variante su JavaScript. Quindi passa alla directory del progetto ed esegui il comando seguente per installare le dipendenze necessarie:

npm install

Rimuovere il codice boilerplate eliminando il file risorse E lib cartelle e cancellando il contenuto dei file App.svelte E App.css File.

Come utilizzare l'interpolazione in Svelte

Il tweening è una tecnica nell'animazione e nella computer grafica che genera fotogrammi intermedi tra i fotogrammi chiave per creare movimenti o transizioni fluidi e realistici. Svelte offre a interpolato utilità che ti consente di animare elementi utilizzando valori numerici, semplificando la creazione di transizioni e animazioni fluide nelle tue applicazioni web.

L'utilità interpolata fa parte di snello/movimento modulo. Per utilizzare l'interpolazione nel tuo componente, devi importarlo in questo modo:

import { tweened } from'svelte/motion'

Sotto il cofano, l'utilità interpolata è solo un negozio Svelte scrivibile. Un negozio Svelte è fondamentalmente un oggetto JavaScript che puoi utilizzare per gestire la gestione dello stato. Il negozio interpolato ha due metodi, vale a dire: impostato E aggiornamento. A livello base, la sintassi per un negozio interpolato è simile alla seguente:

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

Il blocco di codice sopra definisce una variabile sì e lo associa a un archivio interpolato. Nel negozio ci sono due parametri. Il primo parametro rappresenta il valore predefinito the sì il legame dovrebbe avere. Il parametro successivo è un oggetto con due chiavi durata E allentamento. IL durata definisce la durata dell'interpolazione in millisecondi while allentamento definisce la funzione di allentamento.

Le funzioni di andamento in Svelte definiscono il comportamento di un'interpolazione. Queste funzioni fanno parte di snello/allentato module, il che significa che devi importare una funzione specifica dal modulo prima di poterla passare nell'archivio interpolato. Svelte dispone di un visualizzatore di andamento che puoi utilizzare per esplorare il comportamento delle diverse funzioni di andamento.

Per illustrare completamente come utilizzare l'utilità interpolata, ecco un esempio di utilizzo dell'archivio interpolato per aumentare la dimensione di un elemento in Svelte.