web
SVGで波形のアニメーションを簡単に実装する
公開日:2022年1月20日
最終更新日:2022年1月20日
まずはサンプルから。これはちょっと応用して、波を複数重ねたり、blend-modeを使ってます。
簡単な実装の考え方を書いた後に、シンプルなパターンも下の方に貼っておきます。
実装方法
実装方法の考え方は以下の通りです。
- viewBoxの横幅いっぱい(100%)に波の形状を作る
- その波形をviewBoxをはみ出して、もう一つ作る(200%分)
- CSSアニメーションでviewBox内の
path
をtransform: translateX(-100%)
で左に100%動かす- 左に100%動かすとちょうど2つ目の波形の右端まで移動する
- そのアニメーションを
infinite
で無限に繰り返す
波形の作り方
以下のようなsvgを作ります。
- viewBox は以下の例だと、
横 : 縦
が12 : 1.8
の画像を作ってると思ってください。 - pathについて
- X 座標は 30 おきに指定してます。
- 30 おきに Y 座標の位置を指定することで波線を表現しています。
- なので基本的には Y 座標の方を変更して、波の高さを調整してください。
- 注意点としては 0 は下ではなく、viewBox の上です。
- SVG の左端(0)の高さと右端(240)の Y 座標は揃っていないと、途切れてるように見えてしまいます。
<svg viewBox="0 0 120 18" class="svg-wave">
<path
class="wave"
d="M 0,0 C 30,0 30,5 60,5 90,5 90,0 120,0 150,0 150,5 180,5 210,5 210,0 240,0 v 28 h -240 z"
/>
</svg>
アルファベットの意味は以下です。 気になったら調べてください
- M・・・開始点
- C・・・開始点から終点までのベジェ曲線を描く
- z・・・終点
参考 https://developer.mozilla.org/ja/docs/Web/SVG/Attribute/d
CSSアニメーション
波形ができれば後はアニメーションさせるだけです。path
に指定している .wave
に対してアニメーションを指定すると、波打ってるように見えます。
.wave {
animation: wave 3s cubic-bezier(0.55, 0.5, 0.45, 0.5);
animation-iteration-count: infinite;
fill: #000;
}
@keyframes wave {
100% {
transform: translateX(-100%);
}
}
シンプルな波
最後にシンプルな波のサンプルです。
Read next
- 2021年10月17日フロントエンド・コーダーが知っておきたい画像の知識
- 2021年10月31日アニメーションライブラリGSAPについて
- 2022年1月15日Next.js × microCMS × VercelでOGP画像をブログのタイトルで自動生成する