株式会社オーツー|スタッフブログ検索:公式サイトお問い合わせメニューすべて(96)ゲーム開発(3)Web制作(32)デザイン(4)サーバー(23)企画・開発(2)その他(32)オーツー公式ページはこちらお問い合わせWeb制作2020.1.30山本さ【CSS】スプライト画像をstepsでアニメーションさせる方法・作り方こんにちは。Webデザイナーの山本です。今回はCSSアニメーション、animation-timing-functionのstepsとスプライト画像を使ってアニメーションさせる方法をご紹介します。くじスプライト画像とは?stepsとは?作り方CSSアニメーションに関しましては、こちらの記事をご覧ください。【保存版】CSSアニメーションの種類・使い方・サンプルスプライト画像とは?まずスプライト画像とは、複数の画像を1枚にまとめた画像のことで、CSSで表示範囲を指定して使用します。マウスオーバーや容量軽減、今回のようなアニメーションのために使われることが多いです。アニメーションにするなら、こんな感じの画像になります。上記をcssアニメーションのstepsを使うと以下のようになります。}stepsとは?stepsはCSSのプロパティであるanimation-timing-functionの値の一つで、コマ撮りのアニメーションのような動きをさせることが出来ます。animation-timing-functionは、アニメーションの速度を指定するときに記載します。start):nの回数だけコマ送りする。開始直後に1段階目の変化が発生。end):nの回数だけコマ送りする。最初のインターバル経過後に1段階目の変化が発生。X軸は時間経過率、Y軸は変化率を表す。動きのサンプルはこんな感じ。CodePen.サンプルのようにCSSで作成したシェイプを動かすこともできますが、スプライト画像を使うことが多いかと思います。n回数が増えれば増えるほど滑らかな動きになります。(作った画像にもよりますが...)作り方では早速作っていきましょう。先程お見せしたチャカくんを例に作ります。今回は横長で作成していますが、縦長でも構いません。79pxで全長1580pxの画像が出来上がりました。中途半端な79pxと121px...私は謎な数値で作ってしまっていますが、キリのいい数字のほうが作りやすいと思います確実に。コマ数で覚えておきましょう。1pxでもズレると変な動きになるので気を付けてください。cssで動かす画像が出来たら、実際にcssで動かしてみましょう。そもそもですが、原理としてはこういうイメージです。backgroundの画像を、速さやタイミングを調整して動かす。表示領域以外はマスクがかかったみたいな感じ。そのため、1つでもサイズがズレていたりすると少しずつズレて全てが崩れます。以下がこのチャカくんに使っているhtmlとcssです。0;}}htmlとcssの内容を簡単に説明します。width、heightwidthに指定するのは、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アニメーションの詳しい内容は以下を参考にしてください。【保存版】CSSアニメーションの種類・使い方・サンプルbackground-positionbackgroudとして背景にした画像を、X軸の-1580pxまで負の方向←(左)にスライドさせています。正の方向→(右)に画像を動かすなら正の数字になります。○○○px(または-○○○px)になります。画像に合わせてbackground-positionのpxを指定してください。うまく作れましたでしょうか。別の画像を組み合わせたりすると、こういうのも作れます。スプライト画像を作るのが少し手間ですが、CSSの指定自体は難しくないのでぜひ試してみてください!ありがとうございました。WHを使ってSES...2019/3/29メニューを閉じるCONTACTゲーム開発、Webサイト制作に関するご相談等ございましたら、お気軽にお問い合わせください。