メニュー

【CSS】スプライト画像をstepsでアニメーションさせる方法・作り方

こんにちは。
Webデザイナーの山本です。
今回はCSSアニメーション、animation-timing-functionのstepsとスプライト画像を使ってアニメーションさせる方法をご紹介します。

CSSアニメーションに関しましては、こちらの記事をご覧ください。

スプライト画像とは?

まずスプライト画像とは、複数の画像を1枚にまとめた画像のことで、CSSで表示範囲を指定して使用します。
マウスオーバーや容量軽減、今回のようなアニメーションのために使われることが多いです。

アニメーションにするなら、こんな感じの画像になります。

上記をcssアニメーションのstepsを使うと以下のようになります。

stepsとは?

stepsはCSSのプロパティであるanimation-timing-functionの値の一つで、コマ撮りのアニメーションのような動きをさせることが出来ます。
animation-timing-functionは、アニメーションの速度を指定するときに記載します。

animation-timing-function(速度)の値一覧

step-start:最初からアニメーション終了時の状態になる
step-end:最後に一瞬でアニメーション終了時の状態になる
steps(n , start):nの回数だけコマ送りする。開始直後に1段階目の変化が発生。
steps(n , end):nの回数だけコマ送りする。最初のインターバル経過後に1段階目の変化が発生。endを省略することも可(初期値)
・ease:ゆっくり始まって、ゆっくり終わる(初期値)
・ease-in:ゆっくり始まる
・ease-out:ゆっくり終わる
・ease-in-out:easeよりさらにゆっくり始まって、ゆっくり終わる
・linear:一定の速度で始まって終わる
・cubic-bezier(x1, y1, x2, y2):[0.0 , 0.0] から始まり、[x1 , y1], [x2 , y2] を経由して最終的に[1.0 , 1.0]に変化。X軸は時間経過率、Y軸は変化率を表す。xは0.0 ~ 1.0まで、yは基本自由で負の値も使用可

動きのサンプルはこんな感じ。

See the Pen
jOEwxpr
by otwo (@otwo)
on CodePen.

サンプルのようにCSSで作成したシェイプを動かすこともできますが、スプライト画像を使うことが多いかと思います。
n回数が増えれば増えるほど滑らかな動きになります。(作った画像にもよりますが…)

作り方

では早速作っていきましょう。

スプライト画像(アニメーション用)の作り方

先程お見せしたチャカくんを例に作ります。
今回は横長で作成していますが、縦長でも構いません。

① 1コマの縦幅と、横幅を決める。※サイズが分かりやすいように背景色つける

② 作りたいコマ数 × 横幅(79px)で横幅を伸ばす。※コマ数が未知の場合適当に伸ばす

③ 最初のコマをコピペ。※背景色は同じ色だとわかりにくいので色変える

④ 各コマに動きをつける。

⑤ 背景を消して書き出して完了!※背景を適当に伸ばした場合は、コマ数×横幅で計算して合わせる

ということで、全20コマ × 79pxで全長1580pxの画像が出来上がりました。

中途半端な79pxと121px…
私は謎な数値で作ってしまっていますが、キリのいい数字のほうが作りやすいと思います確実に。

サイズはともかく、1コマの横幅(縦幅) × コマ数で覚えておきましょう。
1pxでもズレると変な動きになるので気を付けてください。

cssで動かす

画像が出来たら、実際にcssで動かしてみましょう。

そもそもですが、原理としてはこういうイメージです。
backgroundの画像を、速さやタイミングを調整して動かす。

表示領域以外はマスクがかかったみたいな感じ。
そのため、1つでもサイズがズレていたりすると少しずつズレて全てが崩れます。

そして、以下がこのチャカくんに使っているhtmlとcssです。

▼html

▼css

.chaka{
	width:79px;
	height:121px;
	background:url(任意のパス) no-repeat;
	animation: fuwari 2.9s steps(20) infinite;
}
@keyframes fuwari {
	to{
		background-position: -1580px 0;
	}
}
@-webkit-keyframes fuwari {
	to{
		background-position: -1580px 0;
	}
}
@-moz-keyframes fuwari {
	to{
		background-position: -1580px 0;
	}
}

htmlとcssの内容を簡単に説明します。

width、height

widthに指定するのは、1コマ分の横幅
heightに指定するのは、1コマ分の縦幅
と言いたいところですが、今回は横長の画像なのでheightは121px以上であれば問題はありません。

逆に縦長の画像の場合は、heightは1コマ分のサイズじゃないとズレるので気を付けてください。
widthは1コマ分サイズ以上であれば問題はありません。

animation

書き方は一括指定(ショートハンド)で記載しています。

「fuwari」というanimation-nameにしていますが、任意で変更してください。
「2.9s」は、何秒間アニメーションさせるか(animation-duration)を指定しています。
「steps(20)」は、()内の数字の回数だけコマ送りします(animation-timing-function)。今回全部で20コマだったので20。
「infinite」は、再生回数(animation-iteration-count)を指定しており、今回は無限にリピートさせるのでinfiniteにしています。

cssアニメーションの詳しい内容は以下を参考にしてください。

background-position

backgroudとして背景にした画像を、X軸の-1580pxまで負の方向←(左)にスライドさせています。
正の方向→(右)に画像を動かすなら正の数字になります。

また、縦に長い画像ならbackground-position: 0px ○○○px(または-○○○px)になります。
画像に合わせてbackground-positionのpxを指定してください。


どうでしょうか。
うまく作れましたでしょうか。

別の画像を組み合わせたりすると、こういうのも作れます。

スプライト画像を作るのが少し手間ですが、CSSの指定自体は難しくないのでぜひ試してみてください!

ありがとうございました。

この記事をシェアする

  • twitter
  • facebook
  • Google+
  • B!はてブ
  • pocket
トップへ戻る

CONTACT

ゲーム開発、Webサイト制作に関するご相談等ございましたら、お気軽にお問い合わせください。

ゲーム開発に関する
お問い合わせはこちら

Webサイト制作に関する
お問い合わせはこちら