web

SVGで波形のアニメーションを簡単に実装する

公開日:2022年1月20日
最終更新日:2022年1月20日
目次
  • 実装方法
  • 波形の作り方
  • CSSアニメーション
  • シンプルな波

まずはサンプルから。これはちょっと応用して、波を複数重ねたり、blend-modeを使ってます。
簡単な実装の考え方を書いた後に、シンプルなパターンも下の方に貼っておきます。


実装方法

実装方法の考え方は以下の通りです。

  • viewBoxの横幅いっぱい(100%)に波の形状を作る
  • その波形をviewBoxをはみ出して、もう一つ作る(200%分)
  • CSSアニメーションでviewBox内のpathtransform: 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%);
  }
}


シンプルな波

最後にシンプルな波のサンプルです。


About the author

大阪でフロントエンドエンジニアをしています。写真を撮るのが趣味です。よかったら500pxに載せてる写真も見てください。
web上に公開しているので、正確さに可能な限り努力してますが、個人の備忘録程度に書いてるので、ご自身の判断で参考程度に読んでください。
間違いやご意見があれば、コンタクトやSNSに気軽にご連絡ください。

Read next

Category

  • web
  • 雑記