Morphing svg avec react-spring

J'ai été attiré par l'effet de déformation depuis que je suis enfant. L'animation des changements de forme attire toujours mon attention. La première fois que j'ai vu l'effet de déformation m'a fait me demander "Wow, comment l'ont-ils fait?" Depuis lors, j'ai créé un programme de démonstration et écrit un article sur cet effet.

Il existe de nombreuses options en ce qui concerne différentes bibliothèques d'animation qui prennent en charge la déformation. Beaucoup d'entre eux sont bons et offrent beaucoup de fonctionnalités. Récemment, j'ai été fasciné par React-Spring. React-Spring est une bibliothèque d'animation physique concise construite sur React. Adam Rackis a récemment publié un bel aperçu. Cette bibliothèque a de nombreuses fonctionnalités, y compris (et bien d'autres) la déformation SVG. En fait, la beauté de React-Spring est la façon dont elle soutient la déformation. Il vous permet de vous déformer directement dans la balise qui définit le descripteur de chemin SVG. Du point de vue de la comptabilité, c'est génial. Les descripteurs de chemin SVG sont généralement situés là où vous vous attendez à ce qu'ils soient.

Ce qui suit est une vidéo du contenu discuté dans cet article:

Il s'agit d'un effet de déformation dans une séquence d'intégration. Ici, il est utilisé comme effet de fond. Il est conçu pour compléter l'animation de premier plan; Faites en sorte que cela se démarque davantage, plutôt que d'occuper la scène.

Créer un document SVG

La première chose que nous devons faire est de créer le modèle sous-jacent. Habituellement, une fois que j'ai une compréhension claire de ce que je veux faire, je crée une sorte de conception. La plupart de mes explorations commencent par le modèle et se terminent par une démo. Dans la plupart des cas, cela signifie créer un document SVG dans mon éditeur de vecteur. J'utilise Inkscape pour dessiner mon SVG.

Lors de la création d'un document SVG, j'utilise une échelle exacte. J'ai trouvé mieux d'être précis. Pour moi, cela m'aide à percevoir ce que je veux créer lorsque j'utilise le même système de coordonnées que dans le navigateur et l'éditeur de code. Par exemple, supposons que vous soyez sur le point de créer une icône SVG 24px ✕ 30px, y compris le rembourrage. La meilleure façon est d'utiliser exactement la même taille - un document SVG de 24 pixels de 24 pixels et 30 pixels de haut. Si le résultat proportionnel est incorrect, vous pouvez l'ajuster plus tard à tout moment. En ce sens, SVG est tolérant. Il est évolutif quoi que vous fassiez.

Le document SVG que nous avons créé est de 256 pixels en largeur et 464 pixels de hauteur.

Dessiner un modèle

Lors de la création d'un modèle, nous devons considérer où les nœuds sont placés et combien de nœuds sont utilisés. C'est très important. C'est là que nous jetons les bases de l'animation. La modélisation est l'ensemble du contenu de la déformation. Nous avons un ensemble de nœuds convertis en un autre ensemble de nœuds. Ces ensembles de nœuds doivent avoir exactement le même nombre de nœuds. Deuxièmement, ces ensembles doivent être associés d'une manière ou d'une autre.

Si la relation entre les formes de vecteur n'est pas soigneusement prise en compte, l'animation sera imparfaite. Chaque nœud affecte l'animation. Leur position et leur courbure doivent être correctes. Pour plus de détails sur la façon dont les nœuds sont construits dans les chemins SVG, consultez l'explication de la courbe de Bezier sur MDN.

Deuxièmement, nous devons considérer les deux formes en même temps. L'un des vecteurs peut contenir des pièces qui ne peuvent pas être trouvées dans l'autre vecteur. Alternativement, il peut y avoir d'autres différences entre les deux modèles. Pour ces cas, il est préférable d'insérer des nœuds supplémentaires à certains endroits. Il est préférable de développer une stratégie. Par exemple, cet angle est là, cette ligne droite se développe dans une courbe, etc.

J'ai compilé un stylo pour illustrer la situation où l'ensemble est mal corrélé avec une conception précise. Dans l'exemple suivant, les nœuds de l'effet de déformation sur la gauche sont placés au hasard. Il n'y a aucune relation entre les nœuds qui constituent les numéros un et deux. Dans l'exemple correct, le placement des nœuds est planifié plus attentivement. Cela apporte une expérience plus cohérente.

Le premier modèle

L'outil de ligne est l'outil que nous utilisons pour dessiner la première forme de vecteur. Étant donné que le modèle que nous avons créé est plus abstrait, il est un peu indulgent. Nous devons toujours considérer la position et la courbure, mais cela permet une plus grande arbitraire.

En ce qui concerne les vecteurs et les tailles, il en va de même pour la création de modèles de déformation. Ceci est un processus itératif. Si la première fois est incorrect, nous pouvons toujours revenir en arrière et faire des ajustements. Il faut généralement une ou deux itérations pour faire briller l'animation. Voici le look du modèle fini.

Le résultat est une forme SVG abstraite lisse avec huit nœuds.

Les deuxième et troisième modèles

Une fois le premier modèle terminé, le deuxième modèle peut être dessiné (nous pouvons également le traiter comme un état ). Il s'agit du premier ensemble de formes auxquelles il sera déformé. Il peut s'agir de l'état final, c'est-à-dire un seul effet de déformation. Ou cela pourrait être un pas en cours de route, comme une image clé. Dans le cas où nous regardons, il y a trois étapes. De même, chaque modèle doit être associé au modèle précédent. Une façon de s'assurer que le modèle correspond à créer le deuxième vecteur en tant que copie du premier vecteur. De cette façon, nous savons que le modèle a le même nombre de nœuds et la même apparence et la même sensation.

Soyez prudent avec l'éditeur. Les éditeurs vectoriels sont généralement optimisés pour la taille et le format des fichiers. Lors de l'épargne change, il est susceptible de rendre le modèle incompatible. J'ai développé l'habitude de vérifier le code SVG après avoir enregistré le fichier. Cela peut également vous aider si vous connaissez le format de descripteur de chemin. Si vous n'y êtes pas habitué, c'est un peu mystérieux. C'est également une bonne idée de désactiver l'optimisation dans les préférences de l'éditeur de vecteur.

Répétez le processus ci-dessus pour la troisième forme. Copiez, repositionnez tous les nœuds et définissez une troisième couleur.

Lumières, caméras ... actions!

Après avoir créé le modèle, nous avons fait la plupart du travail. Il est maintenant temps de consulter la section d'animation. React-Spring est livré avec un ensemble de crochets que nous pouvons utiliser pour les animations et les déformations. usingpring est idéal pour l'effet dans cet exemple. Il est destiné à être utilisé avec une seule animation comme celle que nous créons. Voici comment démarrer l'animation à l'aide du crochet USESPRING.

 <code>const [{ x }, set] = useSpring(() => ({ x: 0, }));</code>

Ce qui précède nous fournit une propriété d'animation X, qui construit notre effet de déformation autour de lui. L'un des grands avantages de ces propriétés d'animation est que nous pouvons les changer pour créer presque tous les types d'animation. Si la valeur est incorrecte, nous pouvons le modifier par interpolation.

Le deuxième paramètre, la fonction SET, nous permet de déclencher une mise à jour. Vous trouverez ci-dessous un extrait de code montrant son utilisation. Il met à jour la valeur d'animation x à l'aide du gestionnaire de gestes de la bibliothèque React-Use-Gregeture. Il existe de nombreuses façons de déclencher des animations dans React-Spring.

 <code>const bind = useDrag( ({ movement: [x] }) => {  // ...  set({ x }); }, );</code>

Nous sommes maintenant prêts à combiner notre modèle (descripteur de chemin) avec des balises. En ajoutant le mot-clé animé au code JSX, nous avons activé le système d'animation React-Spring. En passant un appel interpoleur à l'interpolate précédemment nommé, nous convertissons la distance de traînée en forme déformée. Le tableau de sortie contient les modèles discutés précédemment. Pour les mettre en place, nous copie simplement le descripteur de chemin du fichier SVG dans la balise. Maintenant, trois descripteurs différents D, à partir de trois éléments de chemin différents, sont copiés à partir de trois fichiers SVG différents et combinés en un. Voici comment les nœuds JSX recherchent un moteur à l'aide d'une animation React-Spring.

<code><svg ...="">
<animated.path c="" d="{x.to({" first="" model="" output:="" range:="" second="" third="" z=""></animated.path></svg></code>

Examinons la différence entre un élément de chemin JSX standard et celui que nous avons actuellement. Pour obtenir l'animation de déformation, nous avons:

• Ajout de mots clés animés pour faire animer les éléments de chemin JSX avec React Spring,
• Modifier le descripteur D de la chaîne pour réagir l'interpolation de ressort, et
• Convertissez la distance x en une animation d'image clé entre trois descripteurs de chemin.

Environnement de développement

Je n'ai pas trouvé un environnement de développement parfait pour gérer SVG. Actuellement, je fais des allers-retours entre l'éditeur de vecteur, IDE et le navigateur. Une réplication et une certaine redondance impliqués. Ce n'est pas parfait, mais ça marche. J'ai essayé d'analyser des scripts pour SVG dans le passé. Je n'ai toujours rien trouvé qui peut être appliqué à tous les scénarios. C'est peut-être juste que j'ai fait quelque chose de mal. Sinon, ce serait formidable si le développement Web à l'aide de SVG peut être plus transparent.

Commençons!

Enfin et surtout, la démo!

Merci d'avoir lu!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!