ホームページ > 記事 > ウェブフロントエンド > SVG (Scalable Vector Graphics) の破線関連のプロパティとライン アニメーションの原理: 動く線
SVGは非常にクールなラインアニメーションを実現できます
そのようなWebポータルでも
まずは簡単なSVGラインアニメーションを実装できます
このように
心配しないでください、その前にいくつかの属性値を理解するには
破線属性には、2つのストローク-ダシャーレイとストローク-ダショオフセットが含まれています
以下の例を見てみましょう
<svg width=300 height=300 viewbox="0 0 30 30"> <path id="path_a" d="M 5 10 L 25 10"></path> <path id="path_b" d="M 5 15 L 25 15"></path> <path id="path_c" d="M 5 20 L 25 20"></path></svg>rreee
3つの線分を設定しましたそれぞれ異なるストローク-ダシャーレイ
この属性が何に使われるのかはもう理解できたと思います
1つの値、点線の描画1px-空の1px-描画1px-空の1px-...
2つの値、点線の描画1px-empty 2px-draw 1px-empty 2px-...
3つの値、点線描画 1px-empty 2px-draw 3px-empty 1px-...
内部はループ
この属性点線の位置を調整します
path { stroke: #000;}#path_a { stroke-dasharray: 1;}#path_b { stroke-dasharray: 1 2;}#path_c { stroke-dasharray: 1 2 3;}
<svg width=300 height=300 viewbox="0 0 30 30"> <path id="path_a" d="M 5 10 L 25 10"></path> <path id="path_b" d="M 5 15 L 25 15"></path> <path id="path_c" d="M 5 20 L 25 20"></path></svg>
値が正の数の場合、点線は後ろに移動します
値が負の数の場合、点線は前に移動します
px単位は書いても書かなくても大丈夫です
上記の点線関連の属性を理解しました
上記の最も単純なラインアニメーションはCSSを使用して簡単に実装できます
JSも必要ありません(SMILアニメーションも必要ありません)
原則は、ストローク-ダッシュオフセットの値を変更することですパスがゆっくりと表示されるようにします
path { stroke: #000; stroke-dasharray: 5; }#path_a { stroke-dashoffset: 2;}#path_b { stroke-dashoffset: 0;}#path_c { stroke-dashoffset: -2;}
<svg width=300 height=300 viewbox="0 0 30 30"> <path d="M 5 15 L 25 15"></path></svg>
最初にストローク-ダッシュオフセットとストローク-ダッシュオフセットの線分の長さを設定します
この方法では、線分は見えなくなります
アニメーションアニメーションが使用される場合、ストローク-ダッシュオフセットは徐々に0になります
ここでforwards属性値を使えば実現できますanimation: act 1s linear forwards;
線画アニメーション
パス長の取得
上記の小さな例ではjsを使用していませんが
、実際にはまだより豪華で複雑な効果を実現するには、js と連携する必要があります
別の例を見てみましょう 小さな例では、パスの長さは簡単にわかります
これには js が必要です
path { stroke: #000; stroke-dasharray: 20px; stroke-dashoffset: 20px; animation: act 1s linear infinite alternate;}@keyframes act { 100% { stroke-dashoffset: 0; }}
さらに、パス上の始点xからの距離の座標を取得できるgetPointAtLength(x)もあります
(XMLタグの取得にはgetElementsByTagNameNSを使用します。実際にはここでもgetElementsByTagNameが使用できます)
まず稲妻を描きます
var char = 'http://www.w3.org/2000/svg';var path = document.getElementsByTagNameNS(char, 'path')[0]; console.log(path.getTotalLength()); //20rree
事前に @keyframes ルールを記述する必要があります
を入力し、スタイルを追加します
<svg width="580" height="400"> <path d="m262.59622,90.56177l34.74561,60.80042l-14.32703,7.17541l43.75135,52.09264l-14.32061, 8.69967l54.08581,87.23186l-91.73919,-66.84884l17.49797,-9.28344l-57,-42.81731l20.425,-13.23194l-60.18379,-44.91723l67.06487,-38.90124z"></svg>
もちろん、より複雑でカッコいいラインアニメーション
例えば以下のようになります