滑らかで美しい表現ができる!SVGアニメーションを使ってみよう



滑らかで美しい表現ができる!SVGアニメーションを使ってみよう

Web デザインで文字や画像に動きをつける方法はいくつかあり、多くの方は馴染みのある gif 形式や動画、JavaScript での制御を思いつくと思います。しかし、これらの手法では画像が滑らかでなかったり、ページサイズが大きくなったり、スマホでは動きが表現できなかったりと何かと不満を抱えている方も少なくないと思います。

そんな悩みを解決してくれる一つの方法が「SVG アニメーション」です。Gif や動画とは動きのニュアンスが異なりますが、SVG 特有の滑らかな動きと美しさはユーザーの視線をくぎ付けにすること間違いありません。そこで今回は「SVG アニメーション」の基礎知識から実践で使えるツールまでご紹介していきたいと思います。

目次
  1. SVG アニメーションの概要
  2. SVG アニメーションとは?
  3. メリット・デメリット
  4. SVG アニメーション ブラウザの対応状況
  5. SVG アニメーションの用途
  6. SVG アニメーションの作成方法
  7. SVG アニメーションに役立つ jQuery プラグイン
  8. ちょこっと SVG アニメーションを体験
  9. まとめ

image

##SVG アニメーションの概要

SVG アニメーションとは?

image

SVG アニメーションの歴史は、2001 年に Web の標準化団体「W3C」から SVG 1.0 がリリースされた事にはじまります。SVG ファイルのコードに、アニメーション要素および属性を加えて、動きのあるベクター画像を実現しました。SMIL 形式の SVG アニメーションに加えて、HTML でも<img alt="" />要素を使うことによって SVG アニメーションを実現しています。現在では、CSS や JavaScript とも SVG アニメーションは連携し、様々なブラウザ環境、端末環境でも楽しめるようになっています。

メリット・デメリット

メリット

  • ベクター画像特有の美しさと滑らかな動き jpeg や png 画像などのビットマップ画像に比べると、画像を拡大した場合でも曲線部が滑らかです。また数学の2次曲線のような滑らかな動きを実現します。
  • HTTP リクエストの削減 SVG 画像は、HTML ファイルに画像コードを直接記述でき、jpeg や png 画像のようにサーバーに画像読み込みのアクセスをしなくても出力することができます。
  • スタイル設定が多様 一つの SVG 画像も CSS や JavaScript を組み合わせることによって、多様な表現が実行できます。
  • ファイルサイズが小さい jpeg や png 画像などのビットマップ形式に比べると、画像ファイルのサイズは軽量です。

デメリット

  • プログラミング力が必要 SVG アニメーションの実行には、HTML、CSS、JavaScript の理解が必要となります。
  • 長くなるコーディング 一つの画像やアニメーションを出力する場合、jpeg や png の場合は 1 行のHTML コードを書くだけで済むのに対して、SVG の場合は数十行のコーディングが必要となります。
  • ブラウザを考慮する必要がある SVG アニメーションはいくつかの記述方法がありますが、SMIL 形式などの場合 Internet Explorer ではアニメーションが実行されないので事前に検討しておく必要があります。

SVG アニメーション ブラウザの対応状況

  SMIL     CSS     JavaScript  
Internet Explorer ×
Firefox 4 以上
Chrome 5 以上
Safari 6 以上
Opera 10.1 以上
iOS Safari 6.1 以上
Android Browser 3 以上

SVG アニメーションの表現方法は、主に「SMIL」「HTML + CSS」「JavaScript」の 3 形式があります。JavaScript(jQuery) による SVG アニメーションは、多くのブラウザに対応していますので、Web デザイン上メインストリームとなっています。 ・ブラウザテストに用いたファイル/SMIL(from CODEPEN)、CSSJavaScript(from CODEPEN

SVG アニメーションの用途

ロゴ

image CODEPEN

アイコン

image codrops

テキスト

image photo : ASCII.jp 

イラストアニメ

image

David Walsh

ゲーム

image

XUL

SVG アニメをつかった Web サイト例

image 2015年の腕時計トレンド

SVG アニメーションの作成方法

SVG 画像からの作成

Illustrator や Inkscape で書いた文字や画像を元に、SVG ファイルにアニメーション要素を加えて作成することができます。jQuery を使ってアニメーション要素を加えるやり方とマニュアリーにアニメーション要素を加えるやり方があります。 必要なツール/Illustrator や Inkscape などの SVG ソフト、テキストエディタ、必要に応じて jQuery プラグイン

HTML + CSS で作成

ラインやサークルなどシンプルなアニメーションを設定して SVG アニメーションを作成することができます。 必要なツール/テキストエディタ

SVG CIRCUS で作成

オープンソースの SVG CIRCUS を使って、オンライン上で丸や四角などを用いた SVG アニメーションを作成することができます。

SVG アニメーションに役立つ jQuery プラグイン

image photo : polygon.com

Vivus.js

デモ / ダウンロード ライン描画のアニメーションに特化した軽量な JavaScript ライブラリーになります。

Snap.js

デモダウンロード Adobe 社が開発した SVG アニメーションの JavaScript ライブラリーになります。

Lazy Line Painter

デモ ダウンロード Vivus.js 同様、ライン描画に特化した JavaScript ライブラリーになります。公式ページに SVG ファイルをドロップダウンしてアニメーションを加え、コードを出力することができます。SVG アニメーション初心者でも扱いやすいソフトです。

Bonsai

デモ / ダウンロード / 公式サイト アニメーション以外にもチャートやイベントなど多様なライブラリーが用意されています。サンプルのコード集も充実しています。

Walkway

サンプルダウンロード PS 4 のレビューサイトにも採用されている JavaScript ライブラリーになります。

ちょこっと SVG アニメーションを体験

image ボタンデザインに使えそうな SVG アニメーションを体験してみたいと思います。CODEPEN で紹介されているコードをベースに少しアレンジします。(推奨ブラウザ:Chrome or Firefox )

CODEPEN ソースコード

まず簡単に体験できるように CODEPEN で紹介されている CSS コードを HTML に統合してみます。



<samp>
<!DOCTYPE html>
<html>
<head></head>
<body>
<strong><style>
</strong>/*全体*/
html, body {
background: <span style="color: red;">rgb(20,20,20)</span>;
text-align: center;
height: 100%;
overflow: hidden;
}
/*ボタンの表示位置*/
.svg-wrapper {
position: relative;
top: 50%;
transform: translateY(-50%);
margin: 0 auto;
width: 320px;
}
/*初期表示のラインとラインの動き*/
.shape {
stroke-dasharray: 140 540;
stroke-dashoffset: -474;
stroke-width: 8px;
fill: transparent;
stroke: #19f6e8;
border-bottom: 5px solid black;
transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;
}
/*文字*/
.text {
font-family: '<span style="color: red;">Roboto Condensed</span>';
font-size: 22px;
line-height: 32px;
letter-spacing: 8px;
color: #fff;
top: -48px;
position: relative;
}
/*ラインの動き*/
@keyframes draw {
0% {
stroke-dasharray: 140 540;
stroke-dashoffset: -474;
stroke-width: 8px;
}
100% {
stroke-dasharray: 760;
stroke-dashoffset: 0;
stroke-width: 2px;
}
}
/*マウスオンした時の動き*/
.svg-wrapper:hover .shape {
-webkit-animation: 0.5s draw linear forwards;
animation: 0.5s draw linear forwards;
}
<strong></style></strong>
<div class="svg-wrapper">
<svg height="60" width="320" xmlns="http://www.w3.org/2000/svg">
<rect class="shape" height="60" width="320" />
</svg>
<div class="text"><span style="color: red;">ZACH SAUCIER</span></div>
</div>
</body>
</html>
</samp>


上記コードをもとに、表示する文字を CodeCamp に変更し、文字にリンク設定をしてみます。そして色合いも自分好みに変更してみます(変更箇所:上記コードの赤色部分)。編集の結果は、こちらをクリックして確認してみてください。また実際の編集内容は、画面上で「右クリック」「ページのソースを表示」でご確認頂くことができます。

まとめ

いかがでしたでしょうか?SVG アニメーションは少々手間に感じますが、この方式のアニメーションを採用している Web サイトは直感的に“美しい”と感じる印象があります。

また SVG アニメーションは、従来デザイン描画専用として使っていた Illustrator の利用用途を広げ、より個性的な Web デザインを描くことができると思います。まだ SVG アニメーションの世界を未体験の方は、ぜひ一度試してみてください。

image

関連記事

オシママサラ
この記事を書いた人
オシママサラ
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp