SHIDEN DESIGN BLOG

thumnail_20170809

SVGでスプライトアニメーション

SponsorLink

SVGでスプライトアニメーションと言っても、CSSでanimation-timing-functionsteps()を使ったスプライトアニメーションです。アニメーションの有無にかかわらず、CSSスプライトにSVGが使えないと思っている人が居たので、今回この記事を書くことにしました。
 
先に述べた通りanimation-timing-functionsteps()を使ったスプライトアニメーションですので、jpegやpngで作っていたスプライトシートをSVGで作るだけってことになります。
 
 
 

CSSスプライト

 
 
まずは、ここから簡単に説明していきます。
 
CSSスプライトは、サイト内で使用するアイコンやボタンなど、複数の画像を1つにまとめた画像を用意し、CSSのbackground-imagebackground-positionを使って画像の一部分だけを見せる、HTTPリクエスト数の削減を目的とした技術です。

image_20170809_02
 
 
上のスプライトシートを要素の背景に指定し、CSSのbackground-positionを使って位置をずらしてあげることで、表示させたい画像を表示させます。

image_20170809_03

 

 
 
 

steps()を使ったスプライトアニメーション

 
 
CSSスプライトの説明に使用した画像を見てお気付きかと思いますが、スプライトアニメーションはパラパラ漫画と同じです。古くからテレビゲームやスマホアプリでキャラクターやアイテムのアニメーションにも用いられていました。
WEB制作でも「CSS3のanimationとkeyframesを使うとjavascriptを書かなくてもCSSだけでスプライトアニメーションを実装できるぜ」と2015年頃、各ブログなどで挙って紹介された技術です。
 
では、CSSスプライトの説明に使用したスプライトシートを例にアニメーションさせてみます。
説明には加工して背景を加えたjpeg画像を使用しましたが、用意したスプライトシートは1コマ120px×120pxのコマを10コマ横に並べたSVGです。
 
1コマ分の要素を用意しCSSスプライトと同じように背景を指定した後、animationとkeyframesを使ってbackground-positionをずらしていきます。
 

 

 
アニメーションしているのが確認できるかと思いますが、ここで注目して欲しいのがsteps()と言う関数型の値です。
ショートハンドで書くとわかりにくいですが、これはeaselinearなどと同じ、アニメーションの変化を指定するanimation-timing-functionの値です。
 
第一引数は正の整数のみあつかえ、その整数をもって何段階でアニメーションさせるかを指定することができます。スプライトアニメーションを行う場合はコマ数を指定しましょう。
今回は1コマ120px×120pxの10コマですのでsteps(10)と言うことになります。
 
 

一時停止

 
animation-play-stateプロパティーにpausedを指定することで、アニメーションを一時停止させることもできたりします。
 

 
マウスオーバーで一時停止します。

 
 

ボタンの背景として

 
ボタンの背景に使ったりすると、工夫次第で変わったボタンが作れたりします。
 

 

 
マウスオーバーでボタンの背景が...
 

Button

 
 
 

さいごに

 
 
ここまでスプライトアニメーションについて説明してきました。
SVGも使えるんだから使わないと勿体なくない?って話なですが、スプライトシートを作るのって大変ですよね。
 
 
 

SponsorLink

Related Articles