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.
Table des matières
Mettre en place un projet Svelte
Afin de devenir opérationnel avec Svelte, vous devez vous assurer que le runtime Node.js et Node Package Manager (NPM) sont correctement installés sur votre ordinateur. Ouvrez votre terminal et exécutez la commande suivante :
npm create vite
Cela étayera un nouveau projet Vite.js. Nommez votre projet, sélectionnez Svelte comme framework 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 les dossiers Assets et lib et en effaçant le contenu des fichiers App.svelte et App.css.
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 utilitaire interpolé 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 module svelte/motion. 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 : définir et mettre à 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 y et la lie à un magasin interpolé. En magasin, il y a deux paramètres. Le premier paramètre représente la valeur par défaut que la liaison y devrait avoir. Le paramètre suivant est un objet avec deux clés de durée et d’assouplissement. La durée définit la durée de l’interpolation en millisecondes, tandis que l’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 module svelte/easing, 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.
<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))}>Increase size</button><style>
.container{
display: flex;
align-items: flex-end;
margin-top: 400px;
}
div{
height:0;
width:100px;
background-color: red;
}
</style>
Le bloc de code ci-dessus importe deux fonctions : tweened et rebondOut des modules svelte/motion et svelte/easing respectivement. Ensuite, il existe une variable constante liée au magasin interpolé. Ce magasin a une valeur par défaut de 0. Cette valeur par défaut (valeur du magasin) est accessible avec le symbole $. Le paramètre suivant dans la fonction interpolée est un objet avec une clé d’assouplissement qui pointe vers la fonction d’assouplissement rebondOut.
Dans la section de balisage, l’élément bouton possède une directive on:click qui appelle la méthode de mise à jour sur la liaison de taille. Cette méthode augmente la valeur du magasin $size de 3 à chaque fois que vous cliquez sur le bouton. L’élément div a un style en ligne qui dépend de la valeur du magasin $size. Lorsque vous exécutez ce code dans le navigateur, voici ce que vous devriez voir :
Transitions en Svelte
Pour effectuer la transition des éléments vers et hors du modèle objet de document (DOM), Svelte dispose d’une directive de transition et d’un module appelé svelte/transition qui exporte des fonctions utiles que vous pouvez utiliser avec la directive de transition. Par exemple, pour flouter un élément dans et hors d’un DOM, importez d’abord la fonction de flou depuis svelte/transition :
<script>
import { blur } from 'svelte/transition';
</script>
Ajoutez ensuite la fonctionnalité permettant de monter et démonter un élément du DOM. Dans la balise script, créez une variable visible et définissez-la sur false.
<script>
import { blur } from 'svelte/transition';
let visible = false;
</script>
Utilisez ensuite le bloc if pour restituer conditionnellement un div. Assurez-vous d’ajouter une directive de transition sur le div et de la définir sur flou
{#if visible}
<div>Here I am...</div>
{/if}
Ajoutez ensuite un bouton pour afficher ou masquer le div.
<button on:click={()=>visible=!visible}>
{visible ? "Hide" : "Show"}
</button>
Lorsque vous exécutez le code dans le navigateur, voici ce que vous devriez voir :
Le module svelte/transition exporte sept fonctions à savoir : fondu, flou, vol, glissement, mise à l’échelle, dessin et fondu enchaîné. Les transitions dans Svelte peuvent accepter des paramètres. Par exemple, la fonction de flou de l’exemple précédent peut accepter les paramètres suivants : délai, durée, assouplissement (la fonction d’assouplissement), opacité et quantité (la taille du flou).
En plus des paramètres sur les transitions, Svelte propose également des transitions d’entrée et de sortie qui vous donnent un contrôle plus précis sur la transition d’un élément. Prenons le dernier exemple : que se passe-t-il si vous souhaitez que la transition d’entrée de l’élément soit floue et que sa transition de sortie soit glissante ? Voici comment procéder :
<script>
import { blur, slide } from 'svelte/transition';
let visible = false;
</script>{#if visible}
<div in:blur out:slide>Here I am...</div>
{/if}<button on:click={()=>visible=!visible}>
{visible ? "Hide" : "Show"}
</button>
Dans le bloc de code ci-dessus, remarquez qu’il n’y a pas de directive de transition sur l’élément div. Au lieu de cela, la directive de transition a été remplacée par des directives d’entrée et de sortie qui pointent respectivement vers le flou et le glissement.
Animation d’éléments sveltes
Le moyen le plus pratique d’animer des éléments dans Svelte consiste à utiliser la fonction flip de svelte/animate. flip signifie « Premier, Dernier, Inverser, Jouer ». Il accepte trois paramètres à savoir : le délai, la durée et l’assouplissement. Jetez un œil au code suivant :
<script>
import { flip } from "svelte/animate";
let originalList = ["Tomatoes", "Bread", "Fish", "Milk", "Cat food"];
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()}>Arrange</button>
<button on:click={() => shoppingList = [...originalList]}>Reset</button>
Le bloc de code illustre comment utiliser la directive animer dans Svelte. Dans la balise script, la première ligne importe la fonction flip. Il existe deux tableaux, originalList et shoppingList. Dans le div « conteneur », le bloc keyed-each est responsable du rendu de chaque élément du tableau shoppingList.
Le div enfant du div « conteneur » a une directive animée qui pointe vers la fonction flip. Appuyer sur le premier bouton triera la liste par ordre alphabétique tandis qu’appuyer sur le deuxième bouton réinitialisera la liste. Lorsque vous exécutez le code dans le navigateur, voici ce que vous devriez voir :
Pourquoi l’animation est-elle importante dans n’importe quelle application Web ?
L’importance des animations va au-delà du simple attrait visuel ; ils résument l’essence de l’amélioration de l’expérience utilisateur et d’une communication efficace. En mélangeant harmonieusement esthétique et fonctionnalité, l’animation donne vie aux applications Web, les rendant non seulement attrayantes mais aussi intuitives.