CSS3 を使用した SVG パス ストロークのアニメーション化入門チュートリアル

JavaScript に依存せず、純粋な CSS を使用してsvgストローク描画アニメーション効果と効果デモンストレーションアニメーションを実装します。

基本:

SVG には比較的重要な属性ブランチstrokeがあり、中国語のソフトウェアでは「ストローク」と呼ばれます。脳卒中に関連する特性には次のものがあります。

1. strokeストロークの色を示します。色を表す名前は、stroke-color ではなく、単にstroke です。その値は正式には「paint」と呼ばれ、オプションの値の型にはnone 、 currentColor 、 <color>が含まれます。

なし
<色>
現在の色

2. stroke-widthストロークの太さを示します。

3.stroke stroke-linecapストロークの終点の表現を示します。使用可能な値は、 butt 、 round 、 square 、 inherit 。図は以下のとおりです。

4.stroke stroke-linejoinストロークコーナーの表現を示します。可能な値: miter 、 round 、 bevel 、 inherit 。図は以下のとおりです。

5.stroke stroke-miterlimitストロークの交差（鋭角）の表現を示し、デフォルトのサイズは4です。ベベルからベベルまでの角度損失のようなものです。値が大きいほど損失は小さくなります。

stroke-dasharray破線ストロークを示します。オプションの値は、 none 、 <dasharray> 、 inherit

なし
<ダシャレイ>
継承する

7.stroke stroke-dashoffset破線の開始オフセットを示します。オプションの値は、 <percentage> 、 <length> 、 inherit 。それぞれ、パーセンテージ値、長さ値、継承を表します。

8.stroke stroke-opacityストロークの透明度を示します。デフォルトは 1 です。

このチュートリアルに関連するアニメーション効果はstroke-dasharrayとstroke-dashoffsetです。

ストロークダシャアレイとストロークダッシュオフセット

便宜上、また干渉を減らすために、次のように直線で栗を揚げてみましょう。

以下のスライダーをクリック（または値入力）して、次の操作を体験してください。

ストローク-ダッシュ配列:

ストローク-ダッシュオフセット:

HTML コードは次のとおりです。

<svg id="svgForStroke" 幅="400" 高さ="200" xmlns="http://www.w3.org/2000/svg">
 <g>
  <line fill="none"stroke="#000000"stroke-width="5"stroke-dasharray="null"stroke-linejoin="null"stroke-linecap="round" x1="0"y1="90"x2="400"y2="90"/>
 </g>
</svg>

スライダーを動かすと（またはテキストボックスに入力すると）、setAttribute メソッドを通じて <line> ノード要素のstroke-dasharray 値とstroke-dashoffset 値が設定され、上記の効果が得られます。

特別なケース

ここで考えてみましょう。stroke stroke-dasharrayとstroke-dashoffset値が両方とも非常に大きく、ストロークされたパスの合計の長さを超えた場合はどうなるでしょうか。

中国語で説明すると、ソーセージの長さは12cmで、15cm間隔で点線を引くことになります。 dashoffsetがないと、ソーセージの前方15cmがチリソースで覆われてしまいます。実際はわずか12センチなので、私たちが目にしているのはチリソースに覆われたハムソーセージ全体です。

ここでdashoffsetも 15 cm になり、点線が 15 cm 後方にオフセットされます。その結果、チリソースはハムの外側に広がり、ハムの上にチリソースが付かなくなります。上記の直線 SVG を使用すると、直線が見えなくなります。

dashoffset値を徐々に減らしていくと、ハムの根元にチリソースが塗られているかのように、ハムの上のチリソースが少しずつ現れてくることがわかります。

両方のスライダーを右にスライドし、次にスライダーをゆっくりと左にスライドします (type=range をサポートするブラウザを使用してください)。ゆっくりと直線が表示されます。これが SVG パス アニメーションの原理です。

CSS3 animationサポート

インライン SVG の強みは、従来の高さや幅の配置、境界線や背景色などを処理しながら、CSS 属性で制御できる HTML 要素でもあるという点にあります。SVG 自体のいくつかの特殊な属性も、CSS3 animationでも CSS でサポートできます。

したがって、上で説明した SVG ストローク アニメーション効果は、JavaScript を使用せずに CSS3 animationを使用して簡単に実装できます。これは、最初にデモ ページを実装した方法です。

CSS コードは次のとおりです。

パス {
  ストロークダッシュ配列: 1000;
  ストロークダッシュオフセット: 1000;
  アニメーション: ダッシュ 5 秒 直線 無限;
}

@keyframes ダッシュ {
  に {
    ストロークダッシュオフセット: 0;
  }
}

1000 には特別な意味はありません。各パスの長さよりも大きいことを確認するのに十分な大きさです。1500 も使用できますが、違いはストロークの速度が少し速くなることです。

CSS3 アニメーション プロパティに詳しい人なら、上記のコードの意味を一目で理解できるはずです。5 秒のアニメーションでは、stroke-dashoffset が 1000 から 0 に変化します。ストローク アニメーションが形成されます。

上記の CSS コードはほぼ普遍的です。

SVG パスがどんなに複雑であっても、そのストロークをアニメーション化できます。私の独自のテストによると、IE10+ ではアニメーション効果はありません。これは、CSS が SVG のストロークに関連する属性をサポートしていないためではなく、アニメーションがストロークに関連する属性のアニメーションをサポートしていないためです。

上記のエフェクトの用途は何でしょうか? 次のようなシナリオを思いつきました。デモンストレーション中にいくつかの重要なポイントを段階的に表示する、写真にホバー ストローク エフェクトを適用する、Web サイトのヒント項目に矢印ガイダンス エフェクトを適用するなど、いずれも非常に便利です。

パスの長さ

パス、または線の正確な長さを知りたい場合。次のコードのような JavaScript を使用する必要がある場合があります。

var パス = document.querySelector('パス');
var 長さ = path.getTotalLength();

参考文献

ポリゴンフィーチャーデザイン: 楽しみと利益のための SVG アニメーション

SVG でベクターをアニメーション化する

SVG ラインアニメーションの仕組み

SVG でのアニメーション線画

W3 – ストロークのプロパティ

チュートリアルの転送元:

https://www.zhangxinxu.com/wordpress/2014/04/animateion-line-drawing-svg-path-%e5%8a%a8%e7%94%bb-%e8%b7%af%e5%be%84/

要約する

上記は、CSS3 を使用して SVG パス ストローク アニメーション効果を実現する方法の入門チュートリアルです。お役に立てれば幸いです。ご質問がある場合は、メッセージを残していただければ、すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!