Comprendre les transitions et les animations dans Svelte

Lorsqu’elle est bien réalisée, l’animation peut améliorer l’expérience utilisateur et peut constituer un excellent moyen d’envoyer des commentaires à l’utilisateur. Svelte vous permet d'incorporer facilement des animations et des transitions dans votre application avec très peu besoin de bibliothèques JavaScript tierces.

Mettre en place un projet Svelte

Afin de devenir opérationnel avec Svelte, vous devez vous assurer que le runtime Node.js et Gestionnaire de packages de nœuds (NPM) sont correctement installés sur votre ordinateur. Ouvrez votre terminal et exécutez la commande suivante :

npm create vite

Cela servira d'échafaudage à un nouveau projet Vite.js. Nommez votre projet, sélectionnez Svelte comme cadre et définissez la variante sur Javascript. Basculez ensuite vers le répertoire du projet et exécutez la commande suivante pour installer les dépendances nécessaires :

npm install

Supprimez le code passe-partout en supprimant le

actifs et lib dossiers et effacer le contenu des App.svelte et App.css des dossiers.

Comment utiliser l'interpolation dans Svelte

L'interpolation est une technique d'animation et d'infographie qui génère des images intermédiaires entre les images clés pour créer des mouvements ou des transitions fluides et réalistes. Svelte propose un interpolé utilitaire qui vous permet d'animer des éléments à l'aide de valeurs numériques, facilitant ainsi la création de transitions et d'animations fluides dans vos applications Web.

L'utilitaire tweed fait partie du svelte/mouvement module. Pour utiliser tweed dans votre composant, vous devez l'importer comme ceci :

import { tweened } from'svelte/motion'

Sous le capot, l'utilitaire interpolé n'est qu'un magasin Svelte inscriptible. Un magasin Svelte est essentiellement un objet JavaScript que vous pouvez utiliser pour gérer la gestion des états. Le magasin tweed dispose de deux méthodes à savoir: ensemble et mise à jour. Au niveau de base, la syntaxe d'un magasin tweed ressemble à ceci :

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

Le bloc de code ci-dessus définit une variable oui et le lie à un magasin interpolé. En magasin, il y a deux paramètres. Le premier paramètre représente la valeur par défaut du oui la liaison devrait avoir. Le paramètre suivant est un objet avec deux clés durée et assouplissement. Le durée définit la durée de l'interpolation en millisecondes tandis que assouplissement définit la fonction d'assouplissement.

Les fonctions d'assouplissement dans Svelte définissent le comportement d'une interpolation. Ces fonctions font partie du svelte/assouplissant module, ce qui signifie que vous devez importer une fonction spécifique du module avant de pouvoir la transmettre dans le magasin tweed. Svelte dispose d'un visualiseur d'accélération que vous pouvez utiliser pour explorer le comportement de différentes fonctions d'accélération.

Pour illustrer pleinement comment vous pouvez utiliser l'utilitaire tweed, voici un exemple d'utilisation du magasin tweed pour augmenter la taille d'un élément dans Svelte.