Catégories
Astuces et Design

Animations sveltes et printanières | Astuces CSS

Les animations printanières sont un excellent moyen de donner vie aux interactions de l'interface utilisateur. Plutôt que de simplement changer une propriété à une vitesse constante sur une période de temps, les ressorts nous permettent de déplacer des objets en utilisant la physique des ressorts, ce qui donne l'impression d'une chose réelle en mouvement et peut paraître plus naturel aux utilisateurs.

J'ai déjà écrit sur les animations printanières. Ce message était basé sur React, utilisant react-spring pour les animations. Cet article explorera des idées similaires dans Svelte.

Développeurs CSS! Il est courant de penser à une simplification lorsqu'il s'agit de contrôler la sensation des animations. Vous pourriez considérer les animations «printanières» comme une sous-catégorie d’assouplissement basée sur la physique du monde réel.

Svelte a en fait des ressorts intégrés dans le framework, sans avoir besoin de bibliothèques externes. Nous allons répéter ce qui a été couvert dans la première moitié de mon précédent post sur react-spring. Mais après cela, nous allons approfondir toutes les façons dont ces ressorts peuvent être utilisés avec Svelte, et laisser la mise en œuvre dans le monde réel pour un prochain article. Bien que cela puisse sembler décevant, Svelte possède un certain nombre de fonctionnalités uniques et merveilleuses sans contrepartie dans React, qui peuvent être efficacement intégrées à ces primitives d'animation. Nous allons passer du temps à en parler.

Une autre note: certaines des démos éparpillées peuvent sembler bizarres parce que j'ai configuré les ressorts pour être plus «rebondissants» pour créer un effet plus évident. Si vous le code pour l'un d'eux, assurez-vous de trouver une configuration de ressort qui fonctionne pour toi.

Voici un merveilleux REPL Rich Harris conçu pour montrer toutes les différentes configurations de ressorts et comment ils se comportent.

Un bref aperçu des magasins Svelte

Avant de commencer, faisons un tour très, très rapide des magasins Svelte. Alors que les composants de Svelte sont plus que capables de stocker et de mettre à jour l'état, Svelte a également le concept de magasin, qui vous permet de stocker l'état en dehors d'un composant. Étant donné que l'API Spring de Svelte utilise des magasins, nous allons rapidement en présenter les principaux éléments.

Pour créer une instance d'un magasin, nous pouvons importer le writable tapez et créez-le comme ceci:

import { writable } from "svelte/store";
const clicks = writable(0);

le clicks variable est un magasin qui a une valeur de 0. Il existe deux façons de définir une nouvelle valeur pour un magasin: set et update méthodes. Le premier reçoit la valeur à laquelle vous définissez le magasin, tandis que le second reçoit un rappel, acceptant la valeur actuelle et renvoyant la nouvelle valeur.

function increment() {
  clicks.update(val => val + 1);
}
function setTo5() {
  clicks.set(5);
}

L'état est inutile si vous ne pouvez pas réellement le consommer. Pour cela, les magasins proposent un subscribe , qui vous permet d'être informé des nouvelles valeurs – mais lorsque vous l'utilisez à l'intérieur d'un composant, vous pouvez préfixer le nom du magasin avec le $ caractère, qui indique à Svelte non seulement d'afficher la valeur actuelle du magasin, mais de se mettre à jour lorsqu'elle change. Par exemple:

Value {$clicks}

Voici un exemple complet et fonctionnel de ce code. Les magasins offrent un certain nombre d'autres fonctionnalités, telles que les magasins dérivés, qui vous permettent de chaîner les magasins ensemble, les magasins lisibles et même la possibilité d'être averti lorsqu'un magasin est observé pour la première fois et lorsqu'il n'a plus d'observateurs. Mais pour les besoins de cet article, le code ci-dessus est tout ce dont nous devons nous soucier. Consultez la documentation Svelte ou le didacticiel interactif pour plus d'informations.

Un cours intensif sur les ressorts

Passons en revue une brève présentation des ressorts et de ce qu’ils accomplissent. Nous allons examiner une interface utilisateur simple qui modifie un aspect de présentation de certains éléments – l'opacité et la transformation -, puis nous examinerons l'animation de ce changement.

Il s'agit d'un composant Svelte minimal qui fait basculer le opacity d'un

et fait basculer l'axe des x transform d'un autre (sans aucune animation).



Contenu à basculer


Je suis une boîte.

Ces modifications sont appliquées instantanément, nous allons donc les animer. C'est là que les ressorts entrent en jeu. Dans Svelte, un ressort est un magasin sur lequel nous définissons la valeur souhaitée, mais au lieu de changer instantanément, le magasin utilise en interne la physique des ressorts pour modifier progressivement la valeur. Nous pouvons ensuite lier notre interface utilisateur à cette valeur changeante, pour obtenir une belle animation. Voyons cela en action.



Contenu à se faner


Je suis une boîte.

Nous obtenons notre fonction de ressort de Svelte, configurons différentes instances de ressort pour notre opacité et transformons les animations. La configuration du ressort de transformation est délibérément configurée pour être extra élastique, pour vous aider à montrer plus tard comment nous pouvons désactiver temporairement les animations de printemps et appliquer instantanément les modifications souhaitées (ce qui sera utile plus tard). À la fin du bloc de script se trouvent nos gestionnaires de clics pour définir les propriétés souhaitées. Ensuite, dans le HTML, nous lions nos valeurs changeantes directement à nos éléments… et c'est tout! C’est tout ce qu’il faut aux animations printanières de base dans Svelte.

Le seul élément restant est le snapTransform fonction, où nous définissons notre transform spring à sa valeur actuelle, mais passons également un objet comme deuxième argument, avec hard: true. Cela a pour effet d'appliquer immédiatement la valeur souhaitée sans aucune animation.

Cette démo, ainsi que le reste des exemples de base que nous allons examiner dans cet article, se trouvent ici:

Animation de la hauteur

Animer height est plus compliqué que les autres propriétés CSS, car nous devons connaître la hauteur réelle à laquelle nous animons. Malheureusement, nous ne pouvons pas animer à une valeur de auto. Cela n’aurait aucun sens pour un ressort, car le ressort a besoin d’un nombre réel pour pouvoir interpoler les valeurs correctes via la physique du ressort. Et comme cela se produit, vous ne pouvez même pas animer auto hauteur avec des transitions CSS régulières. Heureusement, la plate-forme Web nous offre un outil pratique pour obtenir la hauteur d'un élément: a ResizeObserver, qui bénéficie d'un très bon support parmi les navigateurs.

Commençons par une animation de hauteur brute d'un élément, produisant un effet de "glissement vers le bas" que nous affinons progressivement dans d'autres exemples. Nous utiliserons ResizeObserver pour lier à la hauteur d'un élément. Je dois noter que Svelte a un offsetHeight liaison qui peut être utilisée pour lier plus directement la hauteur d'un élément, mais elle est mise en œuvre avec certains