『jQueryでコマ撮りパラパラアニメ作ってやんよ!!!』

jQueryプラグインって便利でスゴいのたくさんありますが、「この動きをこうやってこうしてあーだこーだ・・・」ってしたい場合って完成されたスクリプトを解析・分解するのはかなり至難の業だったり・・・実は自分で作った方が早い場合も・・・ 今回はjsで作られたパラパラアニメを特定のスクロール位置で停止する物を自作

グローバル変数の設定

どうせ自作するならばjavascriptがわからない人にも扱える代物を作りたいのでパラメータを変数で持って数値さえイジれば自分のスキにカスタマイズできる仕様にしていきたいので

• ①使用する画像の横幅と縦幅の設定
• ②画像のフレーム値（パラパラのスピード）
• ③パラパラ画像を設置するクラスの指定
• ④パラパラ画像のディレクトリ及び拡張子の指定
• ⑤パラパラ画像の使用枚数

上記のパラメーターを設定できるフィールドをつくる

var width  = 134;	//①表示させたいエリアの幅（px）
var height = 120;	//①表示させたいエリアの高さ（px)
var fps    = 5;	        //②フレームレート（フレームス パー セコンド）
var slotImage = '.animation img';	//③スロットのクラス名
var imgSrc = 'img/';	//④画像の設定
var imgEx = '.jpg';	//④画像の設定
var current = 0;		//⑤画像の現在の番号
var slotMax = 49;	//⑤画像の最大枚数
var onceFlg = false;    //⑥画像ループONの設定
var reFlg = 1;          //⑥画像ループOFFの設定

インターバルと画像の指定

各パラメーターの変数を指定したら初期設定の処理を書く

//インターバル指定と表示画像の指定
$(document).ready(function (){
	var interval = 1/ fps * 1000;    //①1秒内に回すフレームの値（1/30*1000なら1秒間に30コマ切り替える）
	slotImg = 0;	　　　　　　　　　　//②画像の初期設定値
	for ( i = 0; i < current; i++){
		slotImg = i;
	}
	animation = setInterval(slotEvent, interval);
});

処理の初期設定

ページが読み込まれる段階で処理を開始させ、 ①のインターバル変数の宣言。 ③0～最大枚数（デモでは49の全50枚）をfor文で回す処理 上記の設定した変数intervalと後に作るイベント名sloteventを引き数に入れたユーザー定義関数setintervalを変数animationに代入する。

イベントの処理

//スロットのイベント
function slotEvent(){
    //イベントの対象の画像設置クラス③と画像の各設定④
    $(slotImage).attr("src", imgSrc + slotImg + imgEx);
    slotImg ++;	    //画像の読み込み位置
    if(slotImg >= slotMax){
    //条件から外れたらanimation_hのインターバル値をクリア
    if(onceFlg) clearInterval( animation );	//onceFlgで繰り返しreFlgで停止
	slotImg = 0;	//再読み込み画像の指定
    };
};

スロットイベントの対象となる画像を設置したクラスと画像のディレクトリとファイル名・拡張子の設定をして、処理を回す度にファイル名を一つ増やす記述をする。

イベントのループ処理

イベント処理で画像が1枚づつ増えていくのでif文で現在処理中の画像ファイル名が指定してある画像の最大値(最後のファイル名)が上回ったら イベントの処理に⑥のフラグを指定する事で変数oneceFlgならば最後の画像で終了。 変数reFlgならばその後に指定した変数slotImgのファイル名からまたループスタートの指定をする

完成デモ01

以上の記述でできるアニメーションがこちら パラパラアニメはcssでもできるみたいですけど、色々と記述が複雑になる印象があったので、 こういうスクリプトをライブラリで持っておけばフィールドの値の設定するだけで良いので使いまわせるのではないでしょうか？