点線が描かれるようなアニメーションの方法

エンジニアの岡村です。
今日は下記のサイトで使った点線箇所の部分についてです。
https://think-local.dmdepart.jp/
コーディングで点線を引くって、実は結構大変です。というのもcssだけでは、点線の間隔を自由に決められないからです。
また演出を入れる際も入れづらく、小回りが効きづらいです。
mdn web docs border-style
そこで、今回は、svgのstrokeで上記サイトの点線部分を作りました。
svgにすることのメリットは、
- 点線の間隔を自由に決められる
- 演出もある程度小回りがきく
- domの形によらない自由な線を書くことができる
ためです。
この記事でわかること
準備1
svgは以下の特徴を持っています。
- svgのviewBoxはpathのdの数値のときの数値になります。
- svgのwidth,heightは実際に描画する時の大きさです。
今回は、わかりやすくbody全体の大きさをviewBox,width,height共に設定します。
<svg class=“dot-svg”></svg>
const svg = document.querySelector(‘.dot-svg’);
svg.setAttribute(“width”, document.body.clientWidth);
svg.setAttribute(“height”,document.body.clientHeight);
svg.setAttribute(“viewBox”,`0 0 ${document.body.clientWidth} ${document.body.clientHeight}`);
重要なのは、widthとheightとviewBoxの値を揃えることです。ここがズレた値だと、計算が面倒になります。。。
pathを書いていこう!
svgのタグは色々あるのですが、ここではpathタグを使って自由な線を書いていきます。
<svg class=“dot-svg”>
<path class=“dot-svg-path”/>
</svg>
pathはdという普段聞きなれないアトリビュートを持っています。
dには、次のように書いていきます。
<path d=“M0 0L100 0”/>
上記は、0 0の位置から、100 0の位置に直線を引いたことになります。
下記にwebで使えるpathのコマンドが書いてあります。
mdn web docs paths
慣れれば、普段のcanvas2dと同じような感覚で色々書けると思います。
https://think-local.dmdepart.jp/
では、各必要な座標をgetBoundingBoxで取得し、それぞれコマンドを入れて行ってます。
実際に出力されたコード
<path class=“dot-line” d=“M0,846.9921875L692.9140625,846.9921875M992.078125,846.9921875
L1382.5,846.9921875
a40,40,90,0,1,40,40
L1422.5,2021.375
a40,40,90,0,1,-40,40L1040.8515625,2061.375M644.140625,2061.375
L302.5,2061.375
a40,40,90,0,0,-40,40
L262.5,3605.359375
a40,40,90,0,0,40,40L662.09375,3645.359375M1022.90625,3645.359375
L1382.5,3645.359375
a40,40,90,0,1,40,40
L1422.5,4454.953125
a40,40,90,0,1,-40,40L1058.703125,4494.953125M626.2890625,4494.953125
L302.5,4494.953125
a40,40,90,0,0,-40,40
L262.5,5204.21875
a40,40,90,0,0,40,40
L591.4453125,5244.21875M1093.5546875,5244.21875
L1382.5,5244.21875
a40,40,90,0,1,40,40
L1422.5,6019.1484375
”></path>
点線にしてみよう!
ここまできてようやくcssの登場です。
点線にするには、下記のcssを当てるだけです
.dot-svg-path{
stroke: #221613; //線の色
stroke-dasharray: 0 0 0 6; //点線の間隔
stroke-linecap: round; //点線の形
stroke-width: 2px; // 線の幅
fill: none; //塗りつぶしの色、noneだと塗りつぶさない
}
線が描かれるアニメーションを書いてみよう!
svgのstrokeは描かれたようなアニメーションを付けることができます。
下記は有料プランですが、gsapでのdrawsvgプラグインを使ってアニメーションしています。(この案件でも使っています。)
gsap draw svg
このライブラリがしていることは実際には、stroke-dasharrayとstroke-dashoffsetの値をアニメーションさせて線が描かれているようなアニメーションを実現しています。
ただし、点線では、stroke-dasharrayはすでに点線部分で使っているので別アプローチが必要になります。
maskを利用しよう!
svgのmaskは、色が黒だと何も表示されず、色が白だとmask側の白い部分にmaskされたものが表示されます。
書き方は下記です。
<svg class=“dot-svg”>
<mask id=“dot-svg-mask”>
<path />
</mask>
<path class=“dot-svg-path” mask=“url(#dot-svg-mask)“/>
</svg>
最終的にはこの
最後に
下記から簡単な動作例とコードを確認できます。(typesctiptです)。mocではgsapの有料プランを使わない方法で実装しているので、参考までにどうぞ
