SVGアニメーションを用いると、さまざまなサイズのディスプレイで印象的なマイクロインタラクションを実現できます。マイクロインタラクションの導入によってUI改善に役立てているケースもあるでしょう(参考「SVGで始めるマイクロインタラクション入門」)。SVGでアニメーションを実装するには、CSSを使う方法、JavaScriptを使う方法、動画作成ソフトを使う方法等、さまざまなアプローチがあります。

今回は、コーダー、フロントエンドエンジニア、デザイナーの分野別のSVGアニメーションのアプローチ方法を挙げ、その特徴と具体的な実装方法について紹介します

CSSでSVGアニメーションを実現する方法(コーダー向け)

コーダーにお勧めするSVGアニメーション実現方法の一つは、CSSプロパティを使う方法です。

SVGはCSSプロパティによってグラフィックの形状を変更できます。例えば、次のコードでは、HTML(index.html)に記述した円のスタイルを、CSS(style.css)によって更新しています。

<circle id="myCircle" r="50" cx="270" cy="270" />

▲ index.html

#myCircle {
  fill: blue;
}

▲ style.css

この性質を利用し、CSSのTransitionsAnimationsでプロパティを徐々に変化させることで、SVGアニメーションを実現します。例えば円(#myCircle)の塗り(fillプロパティ)の色を、1秒かけて赤色にするCSSは次のとおりです。

#myCirle {
  transition: all 1s;
}

#myCirle:hover {
  fill: red;
}

▲ style.css

コーディングの様子は次のとおりです。

CSSによるアニメーションの実例1:ハンバーガーメニュー

CSSによるアニメーションの実例として、CSSのみでハンバーガーメニューのアニメーションを作成しました。次のデモをご覧ください。ボタンにマウスホバーすることで、アニメーションしながら閉じるボタンに切り替わります。

このアニメーションを実現するCSSは次の部分です。CSSのTransitionsを使っています。

/* 各ボーダーは、ホバー時に茶色に変更する */
.menu:hover .border {
  fill: #890a0c;
}
/* 1本目のボーダーは、ホバー時に回転させる */
.menu:hover .border1 {
  transform: translate(-102px, 102px) rotate(45deg);
}
/* 2本目のボーダーは、ホバー時に透明にする */
.menu:hover .border2 {
  opacity: 0;
}

CSSによるアニメーションの実例2:いいねボタン

Twitterのいいねボタンのようなアニメーションを、CSSのみ(※)で作成しました。次のデモをご覧ください。各ボタンをクリックすることで、アニメーションが開始します。

※ ボタンクリック時のクラスの付与のみJavaScriptを用いています。

ボタンをクリックすると、爆発のアニメーション、パーティクルのアニメーション、ハートのアニメーションがそれぞれ実行され、全体としてTwitterのいいねボタンのようなアニメーションとなります。

爆発、ハート、パーティクルのアニメーションを実現するコードについて、それぞれ抜粋します。主にCSSのAnimationsで実現しています。

次のコードは爆発のアニメーションコードの抜粋です。stroke-widthプロパティ(線の太さ)とscaleプロパティ(拡大率)を徐々に大きくすることで、爆発時に円が広がる様子を表現しています。

/* クリックされたら、爆発のアニメーションを開始 */
.likeButton.clicked .explosion {
 animation: explosionAnime 800ms;
}

/* 爆発のアニメーション内容 */
@keyframes explosionAnime {
  (中略)
  0%  { transform: scale(0); stroke-width: 0; }
  5%  { stroke-width: 200; }
  20% { stroke-width: 300; }
  50% { transform: scale(1.1); }
  (中略)
}

次のコードはハートのアニメーションコードの抜粋です。縦方向・横方向のスケールを不規則に変化させることで有機的な動きを実現しているのがポイントです。こういったアニメーションのTipsについては、記事「CSS Animationだけで実現するキャラクターアニメーション」も参照ください。

/* クリックされたら、ハートのアニメーションを開始 */
.likeButton.clicked .heart {
  animation: heartAnime 800ms;
}

/* ハートのアニメーション内容 */
@keyframes heartAnime {
  0% { transform: scale(0); }
 (中略)  
  75%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  80%  { transform: scale(0.95, 1.05) translate(0%, -3%); }
  100% { transform: scale(1, 1) translate(0%, 0%); }
}

次のコードはパーティクルのアニメーションコードの抜粋です。ボタンクリック後、一定時間後(@keyframes30%)に指定の座標への移動を開始します。移動に用いているのはtransformプロパティのtranslate値です。17個のパーティクルをランダムな位置に移動させることで、爆発時のパーティクルが広がり、ハートの動きとあいまってキラリとしたアニメーションになります

/* クリックされたら、パーティクルのアニメーションを開始 */
.likeButton.clicked circle:nth-child(7) {
  animation: particleAnimate7 800ms;
}

/* パーティクルの移動アニメーションを内容 */
@keyframes particleAnimate7 {
  0% { transform: translate(0, 0); }
  30% { transform: translate(0, 0); }
  80% { transform: translate(-69px, -36px); }
  (中略)
}

CSSのアニメーションのメリットとデメリット

CSSによるSVGアニメーションのメリットは、JavaScriptによるプログラミングがほとんど不要なことです。CSSプロパティでアクセスできる塗りや線、拡縮・回転・移動のプロパティであれば、手軽にアニメーションが実現できます。ただ、path要素のd属性にアクセスできないため、パスの変形やパスに沿った移動は実現できません。 さらに、Internet Explorer 11(以下、IE 11)では動作しない点にも注意が必要です

CSSプロパティでアクセスできるシンプルなアニメーションであり、かつIE 11ではアニメーションをしない場合には、有効な選択肢です。

SMILでSVGアニメーションを実現する方法(コーダー向け)

「SMIL」というXMLベースの言語(HTMLやSVG)を用いると、CSSやJavaScriptを使わず、HTML内にコードを書くだけでSVGのアニメーションが実現できます。

例えば、円の塗りを1秒かけて赤色にするコードは、HTML内に記述したSVGコードに対して次のように記述します。

<circle>
  <animate attributeName="fill" to="red" dur="1s" ></animate>
</circle>

▲ index.html

d属性を徐々に変化させれば、形状が徐々に変換する「モーフィング」も実現できます。

属性値の変化には<animate>タグ、回転・移動・拡縮などのCSSのTransforms系の変形には<animatetransform>タグ、パスに沿った移動は<animatemotion>タグをそれぞれ用います。

SMILの特徴

SMILはHTMLコードだけでアニメーションが可能なことが魅力です。塗りと線の変化、拡縮・回転・移動に加えて、パスの変形やパスに沿ったアニメーションが実現できます。現状で多くのブラウザーで対応していますが、IE 11とMicrosoft Edgeでは動作しません(参考「Can I use」)。モバイルサイトのみに対応したウェブコンテンツでSVGアニメーションを実装する場合には、SMILが有効が手段です。

Tips: SMILは廃止予定なのか?

SMILはGoogle Chromeで一度非推奨になりましたが、後に非推奨の措置の保留が発表されました(参考「#35:SVGアイコン管理ツール、SMILの今後についてなど – 週刊SVG」)。少なくとも執筆時点(2017年7月段階)ではIE 11・Microsoft Edge以外のブラウザではSMILが使える状態です(※)。

※ 読者の方から直接連絡をいただき、誤解を招く表現を一部調整しました。ご指摘ありがとうございました。

次のページでは、JavaScript、動画作成ソフトによるアニメーション実現方法について紹介します。