Une animation bien conçue peut considérablement enrichir l’expérience utilisateur et servir de canal de communication efficace. Svelte simplifie l’intégration d’animations et de transitions dans votre application, en minimisant le recours à des bibliothèques JavaScript tierces.
Initialisation d’un projet Svelte
Pour démarrer avec Svelte, assurez-vous que Node.js et Node Package Manager (NPM) sont installés sur votre système. Ouvrez votre terminal et exécutez la commande suivante :
npm create vite
Cela mettra en place un nouveau projet Vite.js. Donnez un nom à votre projet, choisissez Svelte comme framework et optez pour JavaScript comme variante. Ensuite, déplacez-vous vers le répertoire de votre projet et lancez la commande ci-dessous pour installer les dépendances nécessaires :
npm install
Pour partir sur une base propre, supprimez les dossiers Assets et lib, et videz le contenu des fichiers App.svelte et App.css.
Utiliser l’interpolation dans Svelte
L’interpolation est une technique d’animation qui génère des images intermédiaires entre des images clés pour créer des transitions fluides. Svelte offre un outil d’interpolation pour animer des éléments à l’aide de valeurs numériques, ce qui facilite la création de transitions et d’animations fluides dans vos applications Web.
Cet outil, appelé `tweened`, fait partie du module `svelte/motion`. Pour l’utiliser, importez-le dans votre composant de cette manière :
import { tweened } from 'svelte/motion'
Techniquement, `tweened` est un magasin Svelte inscriptible, c’est-à-dire un objet JavaScript pour la gestion d’états. Le magasin `tweened` possède deux méthodes : `set` et `update`. La syntaxe de base d’un magasin `tweened` est la suivante :
const y = tweened(defaultValue, {
duration: [temps-en-millisecondes],
easing: [fonction-d'adoucissement],
})
Ce code déclare une variable `y` associée à un magasin `tweened`. Le premier paramètre est la valeur par défaut de `y`. Le second est un objet avec les clés `duration` et `easing`. La durée spécifie le temps de l’interpolation en millisecondes, et l’adoucissement définit la fonction d’adoucissement à appliquer.
Les fonctions d’adoucissement dans Svelte définissent le comportement d’une interpolation. Elles sont disponibles dans le module `svelte/easing`, ce qui implique que vous devez importer une fonction spécifique avant de l’utiliser dans le magasin `tweened`. Svelte propose un outil visuel pour explorer le comportement de différentes fonctions d’adoucissement.
Pour illustrer l’utilisation de `tweened`, voici un exemple d’animation de 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))}>Augmenter la taille</button><style>
.container{
display: flex;
align-items: flex-end;
margin-top: 400px;
}
div{
height:0;
width:100px;
background-color: red;
}
</style>
Ce code importe `tweened` et `bounceOut` des modules `svelte/motion` et `svelte/easing`. Une variable `size` est liée à un magasin `tweened` initialisé à 0. On accède à la valeur du magasin avec le symbole `$`. Le paramètre suivant est un objet avec une clé `easing` pointant vers la fonction `bounceOut`.
Dans le balisage, le bouton a une directive `on:click` qui appelle la méthode `update` sur `size`. Cette méthode incrémente la valeur du magasin de 3 à chaque clic. L’élément `div` a un style en ligne qui dépend de la valeur du magasin `$size`. Lors de l’exécution, vous devriez observer l’augmentation de la taille du div à chaque clic sur le bouton.
Transitions dans Svelte
Pour gérer les transitions d’éléments dans le DOM, Svelte propose une directive de transition et un module `svelte/transition` qui exporte des fonctions utiles. Par exemple, pour faire apparaître et disparaître un élément avec un effet de flou, importez d’abord la fonction `blur` depuis `svelte/transition` :
<script>
import { blur } from 'svelte/transition';
</script>
Ensuite, ajoutez la fonctionnalité de montage et de démontage d’un élément du DOM. Dans la balise `script`, déclarez une variable `visible` initialisée à `false` :
<script>
import { blur } from 'svelte/transition';
let visible = false;
</script>
Utilisez ensuite un bloc `if` pour afficher conditionnellement un `div`. Assurez-vous d’ajouter une directive de transition à ce `div`, en la définissant sur `blur`:
{#if visible}
<div>Me voici...</div>
{/if}
Enfin, ajoutez un bouton pour afficher ou masquer le `div`:
<button on:click={()=>visible=!visible}>
{visible ? "Masquer" : "Afficher"}
</button>
Lorsque vous exécutez le code dans le navigateur, vous observerez un effet de flou lors de l’apparition et de la disparition de l’élément.
Le module `svelte/transition` exporte sept fonctions : `fade`, `blur`, `fly`, `slide`, `scale`, `draw` et `crossfade`. Les transitions dans Svelte acceptent des paramètres. Par exemple, la fonction `blur` peut accepter les paramètres suivants : `delay`, `duration`, `easing` (la fonction d’adoucissement), `opacity` et `amount` (la taille du flou).
En plus des paramètres de transition, Svelte propose des transitions d’entrée et de sortie pour un contrôle plus fin. Si l’on reprend l’exemple précédent, que se passe-t-il si on veut une transition d’entrée avec un flou et une transition de sortie en glissant ? Voici la solution :
<script>
import { blur, slide } from 'svelte/transition';
let visible = false;
</script>{#if visible}
<div in:blur out:slide>Me voici...</div>
{/if}<button on:click={()=>visible=!visible}>
{visible ? "Masquer" : "Afficher"}
</button>
Remarquez qu’il n’y a plus de directive de transition sur l’élément `div`. Elle a été remplacée par les directives `in` et `out`, pointant respectivement vers `blur` et `slide`.
Animation d’éléments dans Svelte
Une méthode pratique pour animer des éléments dans Svelte est la fonction `flip` du module `svelte/animate`. FLIP signifie « First, Last, Invert, Play ». Elle accepte trois paramètres : `delay`, `duration` et `easing`. Voici un exemple :
<script>
import { flip } from "svelte/animate";
let originalList = ["Tomates", "Pain", "Poisson", "Lait", "Nourriture pour chat"];
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()}>Trier</button>
<button on:click={() => shoppingList = [...originalList]}>Réinitialiser</button>
Ce code montre comment utiliser la directive `animate` dans Svelte. La première ligne importe la fonction `flip`. Il existe deux tableaux : `originalList` et `shoppingList`. Dans le `div` « container », le bloc `keyed-each` affiche chaque élément de `shoppingList`.
Le `div` enfant a une directive `animate` pointant vers `flip`. Le premier bouton trie la liste par ordre alphabétique, et le second la réinitialise. Lors de l’exécution, les éléments se déplacent avec une animation fluide grâce à la directive `animate:flip`.
Pourquoi l’animation est-elle importante dans les applications Web ?
L’importance des animations dépasse le simple attrait visuel ; elles améliorent l’expérience utilisateur et la communication. En combinant esthétique et fonctionnalité, l’animation donne vie aux applications Web, les rendant à la fois attrayantes et intuitives.