SVGとCSSアニメーションで 必殺技の練習をしよう
- 2014/06/30
- 近藤
お世話になっております。制作部の2児の父、近藤です。
子供と歩いていると、「お父さんとそっくり」「近藤さんちっちゃくしたみたい！」と良く言われますが、実際のところ、「近藤（父）」×0.43 = 「近藤（長男坊）」 のようには変換できません。
出来たら面白いとは思いますが、長男坊と嫁が困りそうですね。
さて、ウェブのグラフィックには、
・ビットマップ
・ベクター
という、大きな2つの区分があります。
ビットマップは、写真などの、ピクセル（画素）に基づいた画像形式。
ベクターというのは、幾何図形を作成するための情報を数値や式として表現したものです。
SVGとは？
SVG（スケーラブル・ベクター・グラフィックス）はテキストベースの画像フォーマット。
ベクターデータなので、拡大・縮小しても、粗く見えない、という点が特徴です。
IE8以前では対応していませんが、現在、ほとんどのブラウザで対応されています。
基本的な書き方
SVGはXMLをベースとしていますので、<svg>～～～</svg>の形で記述します。
SVGタグに記述できる図形要素は、以下のものがあります。
・rect：長方形
・circle：円形
・ellipse：楕円形
・line:直線
・polyline：折れ線
・polygon：多角形
rect を例に、図形を描いて見ましょう。
・横幅：100px
・高さ：60px
・X座標：100px
・Y座標：20px
・塗りつぶしの色：green
記述は、以下になります。
|
1 2 3 |
<svg width="400" height="200" fill="red"> <rect fill="green" width="50" height="50" x="100" y="20" /> </svg> |
緑の■が、簡単に描けますね。
SVGタグが、描画領域。絵を描く、画用紙、のようなイメージです。
では次に、赤丸を追加してみましょう。
●は、circle要素、円の中心座標をcx,cyで設定して、半径をrで指定します。
|
1 2 3 4 |
<svg width="400" height="200" fill="red"> <rect fill="green" width="50" height="50" x="100" y="20" /> <circle fill="red" cx="300" cy="100" r="50" /> </svg> |
アニメーション
CSS、SVG（とその各要素）に対して設定することができます。
先ほどの、circleに、.cricleBlue というクラスを付与して、以下のCSSをあててみましょう。
|
1 |
.cricleBlue { fill:blue;} |
こんな風に、簡単にCSSでの制御も可能です。
続いて、CSS3のアニメーションを設定してみましょう。緑の■に .rectGreen というクラスを振り以下のCSSを記述します。
SVGをマウスオーバーすることで、緑の■が動きます。
|
1 2 |
.rectGreen { -webkit-transform:translate(0,0); -webkit-transition:all 1s;} svg:hover .rectGreen { -webkit-transform:translate(300px,100px);} |
動きますね。ちなみに、svgの各要素はz-indexのような概念は無く、「記述された順番が遅いほど上に」表示されます。
SVGは、スケーラブル。ディスプレイサイズなどの制約にも柔軟に対応できるため、色々な用途ですでに使われています。
- グラフの描画
http://d3js.org/ - アイコンなど
http://tympanus.net/codrops/2013/11/05/animated-svg-icons-with-snap-svg/ - ロゴなどの表現
http://carlphilippebrenner.com/portfolio/beatricecreations
おまけ
SVGのアニメーションは、簡単に導入できて見栄えの調整も楽しいので、たとえば、「新しい必殺技」なんかを考えるときにも有効でしょう。
例）アライド君の必殺技案 その1：ヘソビーム
ぜひ、遊んでみてください。
