こんにちは。
Webデザイナーの山本です。
今回はCSSアニメーション、animation-timing-functionのstepsとスプライト画像を使ってアニメーションさせる方法をご紹介します。
もくじ
CSSアニメーションに関しましては、こちらの記事をご覧ください。
スプライト画像とは?
まずスプライト画像とは、複数の画像を1枚にまとめた画像のことで、CSSで表示範囲を指定して使用します。
マウスオーバーや容量軽減、今回のようなアニメーションのために使われることが多いです。
アニメーションにするなら、こんな感じの画像になります。
上記をcssアニメーションのstepsを使うと以下のようになります。
stepsとは?
stepsはCSSのプロパティであるanimation-timing-functionの値の一つで、コマ撮りのアニメーションのような動きをさせることが出来ます。
animation-timing-functionは、アニメーションの速度を指定するときに記載します。
animation-timing-function(速度)の値一覧
・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回数が増えれば増えるほど滑らかな動きになります。(作った画像にもよりますが…)
作り方
では早速作っていきましょう。
スプライト画像(アニメーション用)の作り方
先程お見せしたチャカくんを例に作ります。
今回は横長で作成していますが、縦長でも構いません。
ということで、全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の指定自体は難しくないのでぜひ試してみてください!
ありがとうございました。