SVGアニメーション

Web

2022年2月15日

SVG SVGアニメーション

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

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

今回は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文字ずつアニメーションさせることもできます。

もうちょっとこう、ペンで書いている感じでアニメーションさせたいなあ。


Illustratorで練習がてら作ってみました。

参考:フーノページ|SVGアニメーション、mask要素で手書き風テキスト。

これを英語の筆記体でできたらかっこよさそうですが、難易度は高そうです。


クリックするとボヨンとなります。

参考:ICS MEDIA|UI改善にキラリと役立つ!SVGアニメーションの作り方まとめ

・・・いつかどこかで使いたいです!

まとめ

SVGアニメーションはロゴやアイキャッチ以外にも、ボタンやチェックボックスなどのエフェクトにも使えそうです。

当サイトに関するご意見、ご感想、制作のご依頼はお問い合わせフォームのほか、Chatworkでも受け付けております。

私たちは、クラウド型ビジネスチャットChatworkを導入しています。

国内利用者数No.1 中小企業向けビジネスチャット「Chatwork」

もっといろいろな表現ができるようになりたいものです。

この記事を書いた人
みやの
Web・DTP担当

Contact Us

ご意見、ご相談、料金のお見積もりなど、お気軽にお問い合わせください。

お問い合わせはこちら

TOP