Animations Svelte et Spring

L'animation de printemps est un excellent moyen de donner vie aux interactions d'interface utilisateur. Au lieu de changer les propriétés à un rythme constant sur une période de temps, l'animation de printemps utilise la physique du printemps pour déplacer les choses, donnant aux gens l'impression que les objets réels se déplacent et offrent aux utilisateurs une expérience plus naturelle.

J'ai déjà écrit sur l'animation de printemps. Cet article est basé sur React et utilise React-Spring pour l'animation. Cet article explorera des idées similaires à Svelte.

Développeur CSS! Lorsque vous contrôlez les effets d'animation, vous pensez généralement à l'assouplissement. Vous pouvez considérer l'animation "printemps" comme une sous-catégorie d'assouplissement basée sur la physique réelle.

Svelte a en fait des ressorts intégrés dans le cadre sans aucune bibliothèque externe requise. Nous passerons en revue la première moitié de l'article précédent sur React-Spring. Mais après cela, nous fouillerons dans toute l'utilisation des ressorts à Svelte et laisserons la mise en œuvre réelle à un futur article. Bien que cela puisse sembler décevant, Svelte a des fonctionnalités uniques que l'on ne trouve pas dans React pour s'intégrer efficacement à ces primitives d'animation. Nous prendrons un certain temps pour en discuter.

Une autre chose à noter: certaines des démonstrations entrecoupées dans cet article peuvent sembler bizarres, car j'ai configuré les ressorts pour être "élastiques" pour produire un effet plus visible. Si vous avez utilisé un code de démonstration, assurez-vous de trouver la configuration de ressort qui vous convient.

Ceci est un excellent REPORT fait par Rich Harris pour présenter diverses configurations de printemps et leur comportement.

Démarrage rapide avec le stockage svelte

Avant de commencer, jetons un coup d'œil à Svelte Storage. Alors que les composants de Svelte sont entièrement capables de stocker et de mettre à jour l'état, Svelte a également le concept de stockage, vous permettant de stocker l'état en dehors du composant. Étant donné que l'API de printemps de Svelte utilise le stockage, nous couvrirons brièvement ses parties importantes ici.

Pour créer une instance de stockage, nous pouvons importer le type écrivative et le créer comme ceci:

 import {writeable} de "svelte / store";
const Clicks = Writable (0);

La variable Clicks est un magasin avec une valeur de 0. Il existe deux façons de définir la nouvelle valeur stockée: les méthodes SET et UPDATE. Le premier reçoit la valeur à défaire pour stocker, tandis que le second reçoit une fonction de rappel qui accepte la valeur actuelle et renvoie la nouvelle valeur.

 fonction incrément () {
  clics.update (val => val 1);
}
fonction setTo5 () {
  clics.set (5);
}

Si vous ne pouvez pas réellement utiliser l'état, l'état est inutile. Pour ce faire, le magasin fournit une méthode d'abonnement qui vous permet de recevoir des notifications de nouvelles valeurs, mais lorsque vous l'utilisez dans le composant, vous pouvez préfixer le nom de stockage avec un caractère $, qui indique à Svelte non seulement d'afficher la valeur actuelle stockée, mais aussi de mettre à jour lorsqu'elle change. Par exemple:

<h1 id="Valeur-cliquez"> Valeur {$ cliquez}</h1>
Incrément
Réglé sur 5

Il s'agit d'un exemple complet de code de travail. Le stockage fournit de nombreuses autres fonctionnalités telles que le stockage dérivé (qui vous permet de relier le stockage ensemble), le stockage lisible et même la possibilité d'être averti lorsque le stockage est observé pour la première fois et n'a plus d'observateur. Mais aux fins de cet article, le code indiqué ci-dessus est tout ce à quoi nous devons faire attention. Veuillez vous référer à la documentation Svelte ou au didacticiel interactif pour plus d'informations.

Course accidenté du printemps

Préduisons rapidement le ressort et sa fonction. Nous examinerons une interface utilisateur simple qui modifie les aspects de rendu de certains éléments (opacité et transformations), puis examiner les changements d'animation.

Il s'agit d'un composant svelte minimal qui passe à un<div> Opacité et basculer vers un autre<code><div> Conversion de l'axe X (sans aucune animation).<pre class="brush:php;toolbar:false">&lt;div style=&quot;opacity: {shown ? 1 : 0}&quot;&gt; Contenu à basculer&lt;/div&gt; &lt;br&gt;Basculer &lt;hr&gt;&lt;div style=&quot;transform: translateX({moved}px)&quot;&gt;Je suis une boîte.&lt;/div&gt; &lt;br&gt;Déplacez-le!</pre> <p> Ces modifications s'appliquent immédiatement, alors voyons comment les animer. C'est là que le ressort entre en jeu. Dans Svelte, un ressort est un stockage sur lequel nous pouvons définir la valeur souhaitée, mais elle ne change pas immédiatement, mais stocke plutôt la valeur modifiée progressivement à l'aide de la physique du ressort. Nous pouvons ensuite lier notre interface utilisateur à cette valeur modifiée pour obtenir un bel effet d'animation. Voyons comment cela fonctionne réellement.</p> <pre class="brush:php;toolbar:false"> import {printemps} de &quot;svelte / motion&quot;; const fadespring = printemps (1, {rigidité: 0,1, amortissement: 0,5}); const transformspring = printemps (0, {rigidité: 0,2, amortissement: 0,1}); const togglefade = () =&gt; fadespring.update (val =&gt; (val? 0: 1)); const toggleransform = () =&gt; transformSpring.update (val =&gt; (val? 0: 500)); const SnapTransform = () =&gt; transformspring.update (val =&gt; val, {hard: true}); &lt;div style=&quot;opacity: {$fadeSpring}&quot;&gt;Contenu à s'estomper&lt;/div&gt; &lt;br&gt;Faire basculer &lt;hr&gt;&lt;div style=&quot;transform: translateX({$transformSpring}px)&quot;&gt;Je suis une boîte.&lt;/div&gt; &lt;br&gt;Déplacez-le! Se mettre en place</pre> <p> Nous obtenons la fonction de ressort de Svelte et définissons différentes instances de ressort pour les animations d'opacité et de transformation. La configuration à ressort de conversion est délibérément définie pour être <em>très élastique</em> pour aider à montrer plus tard comment fermer temporairement l'animation à ressort et appliquer les modifications requises immédiatement (cela sera utile plus tard). À la fin du bloc de script se trouve le gestionnaire de clics utilisé pour définir les propriétés requises. Ensuite, dans HTML, nous lions directement la valeur modifiée à notre élément ... c'est tout! Il s'agit de l'animation de printemps de base à Svelte.</p> <p> Le seul élément restant est la fonction SnapTransform, que nous définissons le ressort de conversion en sa valeur actuelle, mais passons également un objet en deuxième paramètre, où dur: vrai. Cela a pour effet d'appliquer les valeurs requises immédiatement sans aucune animation.</p> <p> Cette démo et le reste des exemples de base que nous verrons dans cet article sont ici: [Le lien de démonstration doit être inséré ici]</p> <p> ... (La pseudo-originalité du reste de l'article maintient le sens original inchangé et maintient la position et le format de l'image)</p> </div>