Créer un chemin de mouvement CSS réactif? Bien sûr, nous le pouvons!

Récemment, une discussion sur l'animation de Work Slack Channel a déclenché un défi intéressant: créer des chemins de mouvement CSS réactifs. Cet article explore les complexités et présente une solution basée sur JavaScript.

Les chemins de mouvement CSS, en utilisant la propriété offset-path , permettent d'animer des éléments le long des chemins personnalisés définis de manière similaire aux chemins SVG. Cependant, une limitation clé est que les coordonnées du chemin sont traitées comme des valeurs de pixels, entravant la réactivité. Un chemin défini pour une taille spécifique ne sera pas révolue gracieusement avec les modifications de la fenêtre.

La propriété offset-distance contrôle la position d'un élément le long du chemin, tandis que offset-rotate gère sa rotation. L'animation offset-distance crée l'effet de mouvement.

Le problème central réside dans la nature des pixels fixes des chemins de mouvement CSS. Contrairement aux chemins SVG, qui évoluent avec la boîte de vue, les chemins CSS restent statiques, nécessitant des ajustements manuels pour différentes tailles de fenêtre. Ceci est gérable pour les chemins simples, mais des chemins complexes, en particulier ceux importés des éditeurs vectoriels, deviennent difficiles à maintenir. Le redimensionnement nécessite une réexportation du chemin de l'éditeur de vecteur pour chaque point d'arrêt, un processus lourd.

Considérez un chemin simple:

 .élément {
  - Path: «M20,20 C20,100 200,0 200,100»;
  Offset-Path: Path (var (- Path));
}

La mise à l'échelle nécessite de recalculer les coordonnées de chemin pour différents points d'arrêt:

 @Media (Min-Width: 768px) {
  .élément {
    --ATH: «M40,40 C40,200 400,0 400,200»; // Recalcul manuel
  }
}

Cela devient exponentiellement plus difficile avec des chemins complexes.

Une solution JavaScript offre une approche plus élégante. Alors que les bibliothèques comme le plugin MotionPath de Greensock offrent une mise à l'échelle des chemins SVG, une solution plus générale est nécessaire pour les chemins en dehors des contextes SVG. Une fonction personnalisée peut évoluer dynamiquement les chemins, mais ce n'est pas trivial.

Une approche de bibliothèque de cartographie

Une bibliothèque de cartographie comme D3.JS fournit une solution potentielle. Il permet de générer des chaînes de chemin à partir des ensembles de coordonnées, permettant des ajustements de mise à l'échelle et de courbe personnalisés. Cependant, cela nécessite toujours de convertir les chemins existants en ensembles de coordonnées, ce qui n'est pas idéal.

Une meilleure approche consiste à traiter directement la chaîne de chemin à partir d'un éditeur de vecteur. Après avoir optimisé le SVG à l'aide d'un outil comme SVGOMG, nous extraissons les données du chemin et les informations Viewbox:

<svg height="300" viewbox="0 0 79.375 79.375" width="300" xmlns="http://www.w3.org/2000/svg"><path d="M10.362 18.996s-6.046 21.453 1.47 25.329c10.158 5.238 18.033-21.308 29.039-18.23 13.125 3.672 18.325 36.55 18.325 36.55l12.031-47.544" fill="none" stroke="#000" stroke-width=".265"></path></svg>

Nous sommes intéressés par l'attribut d (Path String) et l'attribut viewBox .

Solution JavaScript améliorée

La fonction JavaScript prend la chaîne de chemin et les limites de la boîte de vue en entrée. Il convertit la chaîne de chemin en un ensemble de données à l'aide de l'API SVGGeometryElement , itérant sur la longueur du chemin pour extraire les points. Les échelles D3.js sont ensuite utilisées pour générer une chaîne de chemin à échelle à l'échelle en fonction de la taille du conteneur et des rapports Viewbox. Cela garantit que le chemin maintient son rapport d'aspect lors de l'échelle proportionnellement dans le conteneur. Un ResizeObserver met dynamiquement à jour le chemin de la route chaque fois que le conteneur redimensionne. La fonction complète est disponible dans la démo qui l'accompagne.

Cette approche permet d'utiliser des chemins directement à partir des éditeurs vectoriels sans recalcul manuel pour différents points d'arrêt, offrant une solution robuste et maintenable pour les chemins de mouvement CSS réactifs. Un package GitHub, "Meanderer", fournit cette fonctionnalité. Une démo présente la solution, permettant des tests avec divers chemins SVG optimisés.

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!