【jQuery】jQueryでパラパラアニメを実現するプラグイン

JavaScript

2012.12.21

イメージ

ノストラダムスのことも思い出してあげてください。minamiです。

jQueryを使ってちょっとしたアニメーションを作ることも多いかと思いますが、jQuery.animateのようにCSSのプロパティをいじってアニメーションするのに加えてちょっとだけgifアニメのようなことができたらな～ということでjQueryのプラグインを作ってみました。

まずはサンプルをごらんください。

サンプル

アニメーションの出来はともかくとして、動いています。STOPボタンを押すと途中で止めることもできます。

しくみ

用意するもの

アニメーション用png（スプライト）
jQuery※サンプルではv1.8.2
jquery.backgroundpos.min.js
jquery.limitAnime.js

まずアニメーション用の画像ですが、下記のようにコマを均等な幅で作った一枚の画像を用意します。これを要素の背景画像として設定し、１コマ目が一番左になるようにbackground-positionを0 0に設定します。

#cat01,
#cat02,
#cat03 {
	display: inline-block;
	*display: inline;
	*zoom: 1;
	width: 120px;
	height: 165px;
	background:url(test.png) no-repeat 0 0;
	margin: 0 auto;
}

プラグインの処理的には一定時間で背景画像のbackground-positionを移動させることでコマアニメを実現しています。ここでひとつ問題が・・・

FIrefoxで動かない

jQuery.cssでbackground-positionを操作しますが、そのままだとFirefoxで動きません。なぜかというとjQuery.cssでは

$(elm).css({
	backgroundPosition: '0px 0px'
});

のように、background-positionのx軸とy軸を同時に設定する書き方ができないためです。そしてFirefoxにはbackground-positionを片方だけ設定するプロパティがない・・・（IEやChromeにはbackground-position-x などの独自拡張があります。）
そこでjQuery Background Positionというライブラリを使います。

jQuery Background Position

このプラグインを使うと、jQuery.css でbackground-positionを上記のように一度に設定できます。

使い方

使い方は以下のようになります。

$('#cat01').limitAnime({
  width: 120, // 一コマの幅
  frames: 6, // コマ数
  loop: true, // ループ再生するか
  delay: 50 // 一コマを表示する秒数（1/1000秒）
})
.startAnimate(); //アニメーション再生

stopAnimate() で再生しているアニメーションを止めることもできます。