CSSのSVGパスのアニメーション

SVG<path></path>要素は強力な描画機能を提供し、私は時々それを使用していくつかの形を描画しようとします。私はその完全な機能についての毛皮だけを知っていますが、興味深いアニメーション効果を試すだけで十分です。すべての線形構文コマンド（ Lなど）は非常にシンプルで理解しやすいですが、曲線コマンドQも非常に直感的です。図面をviewBox="0 0 100 100"に制限すると、単純なグラフを描くのは難しくありません。

CSS（Chromiumブラウザーのみ）を使用して、すべての基本コマンドとアニメーションを使用してグラフィックを描画する典型的な例を次に示します。

奇妙に思えますが本物です：

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

 SVG：ホバーパス{
  遷移：0.2秒;
  D：PATH（ "M8,2 L2,8"）;
}

最近、状態によってアイコンが異なるUI要素が必要です。 「ログ」の形状のようなもので、デフォルトの状態はまっすぐで、ハンバーガーメニュー（4行のみ、テキストの行のようなもの）、そして他のさまざまな状態のようなものです。

1. デフォルト（デフォルト）
2. アクティビティ（アクティブ）
3. 成功（成功）
4. エラー

最初に、私は非常に複雑な有限状態マシンを書きました：

 const indicator = document.queryselector（ "。要素"）;

currentState = indicatator.dataset.state;

indicator.addeventlistener（ "click"、（）=> {
  nextState = "";

  if（currentState == "default"）{
    nextState = "Active";
  } else if（currentState == "Active"）{
    nextState = "success";
  } else if（currentState == "success"）{
    nextState = "error";
  } それ以外 {
    nextState = "default";
  }

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

これにより、データ属性を使用してスタイルを設定するためのドアが開きます。

 。要素 {
  ＆[data-state = "default"] {
  }
  ＆[data-state = "Active"] {
  }
  ＆[data-state = "success"] {
  }
  ＆[data-state = "error"] {
  }
}

したがって、私の要素が4行のデフォルト状態で始まる場合：

<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>

... CSSの他の状態へのパスを変更できます。たとえば、CSSを使用してこれらの4つの直線を変更できます。

これらの4つの「線」には、未使用の曲線ポイントが便利に含まれていることに注意してください。同じ数とタイプのポイントを持つパスのみがCSSのアニメーションになります。曲線ポイントを追加すると、より多くの可能性が開きます。

これらの4つの新しいパスは、実際にサークルに似た形を描きます！

 .editor-indicator {
  ＆[data-state = "Active"] {
    .icon {
      ：nth-​​child（1）{
        D：PATH（ "M50、0 Q95、5 100,50"）;
      }
      ：nth-​​child（2）{
        D：PATH（ "M100、50 Q95、95 50,100"）;
      }
      ：nth-​​child（3）{
        D：PATH（ "M50,100 Q5、95 0、50"）;
      }
      ：nth-​​child（4）{
        D：PATH（ "M0、50 Q5、5 50、0"）;
      }
    }
  }
}

他の州では、ラフなティック（成功を示します）と大まかな感嘆符（故障を示します）を描きます。

デモ（Chromiumブラウザのみ）、クリックしてステータスを変更できます。

FirefoxとSafariはCSSのd: path()サポートしていないため、最終的に使用しませんでした。アニメーション化できないということではなく、単に機能しないので、私には利用できません。最終的には、別の状態でアイコンを交換することになりました。

ブラウザ全体で形状の変形が必要な場合は、これに関する完全な記事があります。 （ここに記事のリンクを挿入する必要がありますが、リンクを提供できないため、説明することしかできません）

以上がCSSのSVGパスのアニメーションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。