CSS3とjQueryでオリジナル画像のスプライトアニメーションを実装する方法

どうもですよ、フロントエンドエンジニアのはやちですよ( ˘ω˘)✌

今回はスプライト画像を使用した、アニメーションの実装方法を2つご紹介いたします(´ʘ‿ʘ｀)✌

実装する前に準備をしよう

画像

まず画像が必要ですね。今回はこのような画像を用意いたしました。
1つの絵に対して100×126で作っております。ズレがないようにご注意くださいまし( ˘ω˘)☝

HTML

マークアップはこんな感じで、sectionの中のspriteを動かします( ˘ω˘)☝

<section class="section css">
   <h2>CSS</h2>
   <div class="sprite"></div>
</section>

準備はこれで以上になります( ˘ω˘)☝

実装をしよう

お次にそれぞれの実装方法をご紹介します( ˘ω˘)

CSS3を使用した形での実装方法

CSS3ではanimationを使用します。
animateで1秒間に動くフレームの数を指定して、keyframesで動かしたい場所のスタイルを記述してあげます( ˘ω˘)☝

.sprite {
    width: 126px;
    height: 100px;
    margin: 100px auto;
    background: url(../images/sprite.png) no-repeat 0 0;
}

.css .sprite {
    /*一秒間に動くフレーム数*/
    -webkit-animation: play 1s steps(6) infinite;
    animation: play 1s steps(6) infinite;
}

@-webkit-keyframes play {
    /*一秒間に動くスタイル*/
    0% {
        background-position: 0px 0;
    }

    100% {
        background-position: -756px 0;
    }
}

@keyframes play {
    /*一秒間に動くスタイル*/
    0% {
        background-position: 0px 0;
    }

    100% {
        background-position: -756px 0;
    }
}

これでCSSでの実装は完了になります( ˘ω˘)☝

jQueryを使用した形での実装方法

jQueryで実装する場合は、まずCSSを下のように書き換えましょう。
フレームごとにclassを振ってあげて、background-positionを指定しておきます。

CSS

.sprite{
  width: 126px;
  height: 100px;
  margin: 100px auto;
  background: url(../images/sprite.png) no-repeat 0 0;
}
.jQuery {
  .frame1{ background: url(../images/sprite.png) no-repeat 0 0; }
  .frame2{ background: url(../images/sprite.png) no-repeat -126px 0; }
  .frame3{ background: url(../images/sprite.png) no-repeat -252px 0; }
  .frame4{ background: url(../images/sprite.png) no-repeat -378px 0; }
  .frame5{ background: url(../images/sprite.png) no-repeat -504px 0; }
  .frame6{ background: url(../images/sprite.png) no-repeat -630px 0; }
}

JavaScript

JavaScriptはこのようになります。
フレームごとに関数を分けてsetTimeoutで先程のclassたちをつけたり外したりをして動かします( ˘ω˘)☝

$(function () {
    var TIMER = 180; //一つのフレームに対しての時間
    var animeTimer; //タイマー設定用

    //アニメーションの関数
    var spriteAnimation = function() {
        var $jsAnime = $('.jQuery').find('.sprite'); //動かしたいセレクタ

        //フレーム毎の関数
        var frame1 = function(){
            removeanimeClass();
            $jsAnime.addClass('frame1'); //フレーム1のクラスをつける
            animeTimer = setTimeout(frame2, TIMER);//次のフレームに移る
        }

        var frame2 = function(){
            removeanimeClass();
            $jsAnime.addClass('frame2');
            animeTimer = setTimeout(frame3, TIMER);
        }

        var frame3 = function(){
            removeanimeClass();
            $jsAnime.addClass('frame3');
            animeTimer = setTimeout(frame4, TIMER);
        }

        var frame4 = function(){
            removeanimeClass();
            $jsAnime.addClass('frame4');
            animeTimer = setTimeout(frame5, TIMER);
        }

        var frame5 = function(){
            removeanimeClass();
            $jsAnime.addClass('frame5');
            animeTimer = setTimeout(frame1, TIMER);
        }

        //フレームリセット用の関数
        var removeanimeClass = function(){
            $jsAnime.removeClass('frame1');
            $jsAnime.removeClass('frame2');
            $jsAnime.removeClass('frame3');
            $jsAnime.removeClass('frame4');
            $jsAnime.removeClass('frame5');
            $jsAnime.removeClass('frame6');
        }

        //フレーム１の関数を呼び出す
        frame1();
    }

    //アニメーション発火
    spriteAnimation();
});

これでJavaScriptの実装は完了になります( ˘ω˘)☝
完成したスプライトアニメーションはこちらでご覧いただけます( ˘ω˘)☞三☞ｼｭｯｼｭｯ
DEMO

まとめ

いかがでしたでしょうか。

完成形は、ほぼ同じような感じになりましたね。

CSS3のanimationはIE10からなのでかなりモダン向けなサイトにしか使用はできませんが、jQueryならIE10以前のバージョンにも対応しているので安心です( ˘ω˘)

ただし、CSSで対応したアニメーションの方が処理が軽いです。どちらの方法で対応していくかは時と場合次第ですね(´∵｀)

ではではこのへんで( ˘ω˘)

【JavaScriptでアニメーション表現を作ってみるの巻】

※ animateとjQuery.Deferredで動きのある「トップへ戻る」ボタンを作ってみよう

※ アニメーションに便利なJavaScriptライブラリTweenMaxを使ってみる（その1）

※ アニメーションに便利なJavaScriptライブラリTweenMaxを使ってみる（その2）

※ ScrollMagicを使ってスクロールに応じたアニメーションをさせてみよう

※ アニメーションを実装するなら知っておきたい「requestAnimationFrame」の使い方

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。