Animer les changements de chemin SVG dans CSS

SVG<path></path> Les éléments offrent une fonctionnalité de dessin puissante et j'essaie occasionnellement de l'utiliser pour dessiner quelques formes. Bien que je ne connaisse que la fourrure sur toute sa fonctionnalité, il me suffit d'essayer des effets d'animation intéressants. Toutes les commandes de syntaxe linéaire (telles que L ) sont très simples et faciles à comprendre, tandis que la commande Curve Q est également assez intuitive. Limitant le dessin à viewBox="0 0 100 100" , il ne semble pas difficile de dessiner un graphique simple.

Voici un exemple classique qui dessine des graphiques en utilisant toutes les commandes et animations de base à l'aide de CSS (navigateur de chrome uniquement):

Cela semble étrange mais réel:

<svg viewbox="0 0 10 10"><path d="M2,2 L8,8"></path></svg>

 svg: chemin de survol {
  transition: 0,2 s;
  D: PATH ("M8,2 L2,8");
}

Récemment, j'ai besoin d'un élément d'interface utilisateur dont les icônes varieront selon l'État. C'est un peu comme une forme de "journal", l'état par défaut est droit, un peu comme un menu de hamburger (seulement quatre lignes, plus comme une ligne de texte), puis divers autres états.

1. Par défaut (par défaut)
2. Activités (actifs)
3. Succès (succès)
4. ERREUR

Tout d'abord, j'ai écrit une machine d'État finie très complexe:

 const Indicator = document.QuerySelector (". élément");

Soit CurrentState = indicator.dataset.state;

indicator.addeventListener ("cliquez", () => {
  Soit NextState = "";

  if (currentState == "Default") {
    NextState = "Active";
  } else if (currentState == "active") {
    NextState = "Success";
  } else if (currentState == "Success") {
    NextState = "Erreur";
  } autre {
    NextState = "Default";
  }

  indicator.dataset.state = nextState;
  currentState = nextState;
});

Cela ouvre la porte à régler les styles à l'aide de l'attribut de données:

 .élément {
  & [data-state = "default"] {
  }
  & [data-state = "active"] {
  }
  & [Data-State = "Success"] {
  }
  & [data-state = "error"] {
  }
}

Donc, si mon élément commence par l'état par défaut de quatre lignes:

<div data-state="DEFAULT">
  <svg viewbox="0 0 100 100"><path d="M0, 20 Q50, 20 100, 20"></path><path d="M0, 40 Q50, 40 100, 40"></path><path d="M0, 60 Q50, 60 100, 60"></path><path d="M0, 80 Q50, 80 100, 80"></path></svg>
</div>

... Je peux changer le chemin vers d'autres états dans CSS. Par exemple, je peux modifier ces quatre lignes droites en utilisant CSS.

Notez que ces quatre "lignes" contiennent commodément des points de courbe inutilisés. Seuls les chemins avec le même nombre et le même type de points peuvent être une animation dans CSS. L'ajout de points de courbe ouvre plus de possibilités.

Ces quatre nouveaux chemins dessinent des formes similaires aux cercles!

 .Editor-indicator {
  & [data-state = "active"] {
    .icon {
      : nième-enfant (1) {
        D: Path ("M50, 0 Q95, 5 100,50");
      }
      : nième-enfant (2) {
        D: Path ("M100, 50 Q95, 95 50,100");
      }
      : nième-enfant (3) {
        D: Path ("M50,100 Q5, 95 0, 50");
      }
      : nième-enfant (4) {
        D: Path ("M0, 50 Q5, 5 50, 0");
      }
    }
  }
}

Pour d'autres États, je dessine une tique brutale (indique le succès) et une marque d'exclamation approximative (indique l'échec).

Démo (navigateur de chrome uniquement), vous pouvez cliquer dessus pour modifier l'état: (le lien ou le code de démonstration doit être inséré ici, mais comme je ne peux pas créer de contenu dynamique, seule description)

Étant donné que Firefox et Safari ne prennent pas en charge d: path() dans CSS, j'ai fini par ne pas l'utiliser. Ce n'est pas que ça ne peut pas être animé, cela ne fonctionne tout simplement pas, donc il n'est pas disponible pour moi. J'ai fini par remplacer l'icône dans un état différent.

Si vous avez besoin de déformation de forme entre les navigateurs, nous avons un article complet à ce sujet. (Le lien de l'article doit être inséré ici, mais comme je ne peux pas fournir le lien, je ne peux que le décrire)

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!