SVGアニメーション

Web

2022年2月15日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回はSVGをアニメーションさせてみたいと思います。

・SVGアニメーション

・アニメーションさせよう

・まとめ

SVGアニメーション

SVGをアニメーションさせるにはいくつか方法があるようです。

・CSSを使う

・SMILを使う

・JavaScriptを使う

今回はCSSを使ってやってみます（というか他2つがよくわからない）

アニメーションさせよう

うちの会社のロゴマークを使います。

まずは3つのパスにそれぞれc1、p1、p2というクラス名を付けます。

<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">

<path class="c1" d="M327.5,383.3c4.7,4.7,4.7,12.3,0,17L282.8,445c-59.3,59.3-155.7,59.3-215,0c-59.3-59.3-59.3-155.7,0-215l44.7-44.7c4.7-4.7,12.3-4.7,17,0l39.6,39.6c4.7,4.7,4.7,12.3,0,17l-44.7,44.7c-28.1,28.1-28.1,73.8,0,101.8c28.1,28.1,73.8,28.1,101.8,0l44.7-44.7c4.7-4.7,12.3-4.7,17,0L327.5,383.3z" />

<path class="p1" d="M216.7,177.3c4.7,4.7,12.3,4.7,17,0l44.7-44.7c28.1-28.1,73.8-28.1,101.8,0c28.1,28.1,28.1,73.8,0,101.8l-44.7,44.7c-4.7,4.7-4.7,12.3,0,17l39.6,39.6c4.7,4.7,12.3,4.7,17,0l44.7-44.7c59.3-59.3,59.3-155.7,0-215c-59.3-59.3-155.7-59.3-215,0l-44.7,44.7c-4.7,4.7-4.7,12.3,0,17L216.7,177.3L216.7,177.3z" />

<path class="p2" d="M408.9,352.9L371,390.8c-4.9,4.9-12.8,4.9-17.6,0L139,176.5c-4.9-4.9-4.9-12.8,0-17.6l37.9-37.9c4.9-4.9,12.8-4.9,17.6,0l214.3,214.3C413.8,340.2,413.8,348.1,408.9,352.9z" />

</svg>

それぞれのクラスのスタイルを定義していきます。まずはc1

.c1 {
  fill: #32bdeb;
  stroke: #32bdeb;
  stroke-width: 2px;
  stroke-dasharray: 2000px;
  animation: svgc1 5s ease-in both infinite;
}

@keyframes svgc1 {
  0% {
    fill: transparent;
    stroke-dashoffset: 2000px;
  }
  20% {
    fill: transparent;
    stroke-dashoffset: 0;
  }
  60% {
    fill: transparent;
  }
  70% {
    fill: #32bdeb;
  }
}

strokeは線
stroke-widthは線の太さ
stroke-dasharrayは破線
stroke-dashoffsetは破線の間隔？

@keyframesで破線の間隔を2000から0に変化させることで、徐々に縁取りさせるような見た目になっています。

最後にfillで色を付ける感じです。

同様にp1、p2もスタイルを定義します。

.p1 {
  fill: #ff1493;
  stroke: #ff1493;
  stroke-width: 2px;
  stroke-dasharray: 2000px;
  animation: svgp1 5s ease-in both infinite;
}

@keyframes svgp1 {
  0% {
    fill: transparent;
    stroke-dashoffset: 2000px;
  }
  20% {
    fill: transparent;
    stroke-dashoffset: 2000px;
  }
  40% {
    fill: transparent;
    stroke-dashoffset: 0;
  }
  60% {
    fill: transparent;
  }
  70% {
    fill: #ff1493;
  }
}

.p2 {
  fill: #ff1493;
  stroke: #ff1493;
  stroke-width: 2px;
  stroke-dasharray: 2000px;
  animation: svgp2 5s ease-in both infinite;
}

@keyframes svgp2 {
  0% {
    fill: transparent;
    stroke-dashoffset: 2000px;
  }
  40% {
    fill: transparent;
    stroke-dashoffset: 2000px;
  }
  60% {
    fill: transparent;
    stroke-dashoffset: 0;
  }
  60% {
    fill: transparent;
  }
  70% {
    fill: #ff1493;
  }
}

Pをなんとか1つの図形にしたいんですけどね（パスファインダーを使えば一発でできそうです）

文字を1文字ずつアニメーションさせることもできます。