デザイン・技術

TOP デザイン・技術 点線が描かれるようなアニメーションの方法

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

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

エンジニアの岡村です。
今日は下記のサイトで使った点線箇所の部分についてです。
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>

最終的にはこのタグの中身のpathをstroke-dasharrayとstroke-dashoffsetを使ってアニメーションさせることで、マスクされた点線が描かれるようなアニメーションが実装できます。

 

最後に

下記から簡単な動作例とコードを確認できます。(typesctiptです)。mocではgsapの有料プランを使わない方法で実装しているので、参考までにどうぞ

動作例

コード

 

 

RECRUIT

BALANCeでは共に働く仲間を随時お待ちしております。
印象に残るプロダクトを一緒に作りませんか?

採用情報はこちら

関連記事

2022.10.12

【React + gsap】でモーダルを作る!

2022.08.11

【コピペOK】CSS/JSで作る印象的なhoverのアイデアと実装方法

2022.09.29

いろいろなパターンで画像をループさせてみた

2023.04.03

【2023年最新】映画キャンペーン事例まとめ!話題になる企画を立てるコツは?

yuki okamura
yuki okamura

WRITTEN BY

yuki okamura

フロントエンドエンジニア。
業務では、reactやwebglを担当することが多いです。

人気記事ランキング

BALANCeおすすめ記事

集客イベントを成功へ導く
効果測定・分析ソリューション

資料ダウンロードはこちら!