jQuery入門講座：アニメの一時停止

アニメの一時停止

サンプル紹介

既存のanimateメソッドを拡張

プラグイン「pause plug-in」を利用すればアニメを簡単に一時停止/再開することができます。左の画像をクリックするとサンプルが開きます。サンプルのページ内にある「pause」ボタンでアニメを一時停止し、「resume」ボタンでアニメを再開します。

組み込み

jQuery pause plugin著作権：GPL level2: ダウンロードサイト：Pause | A jQuery plugin to pause and resume animations
※リンク先に利用方法が記述されています。

htmlへの組み込みは以下の様に、jQuery同様scriptタグでリンクします。プラグインはjQueryのリンクより後に記述するようにしましょう。

<script type="text/javascript" src="jquery.pause.min.js"></script>

構文

「jQuery pause plugin」プラグインを組み込むと、以下2つのメソッドが追加されます。

アニメの一時停止返値：jQueryオブジェクト: jQo.pause( )
・animateメソッドによるアニメを一時停止します
・引数はありません

アニメの再開返値：jQueryオブジェクト: jQo.resume( )
・pauseメソッドによる一時停止を解除しアニメを再開します
・引数はありません

解説

一時停止させるアニメの確認

まずは一時停止させるアニメの確認をします。サンプル（pause/01.html）を開いて、body内にdiv要素が1つあることを確認してください。jQueryは以下の様に記述され、2〜4行目で右に移動するmoveRightFuncが作成され、5〜7行目で左に移動するmoveLeftFuncが作成されています。

moveRightFunc();
function moveRightFunc(){
	$("div").animate({left:400},1000,moveLeftFunc);	
}
function moveLeftFunc(){
	$("div").animate({left:0},1000,moveRightFunc);	
}

ポイントはanimateメソッドに設定されたfunctionです。moveRightFuncのアニメが完了したらmoveLeftFuncを実行し、moveLeftFuncのアニメが完了したらmoveRightFuncを実行するようにしてあります。こうすることで永遠に左右に動き続けるアニメを作成できます。

また最初に移動させるため、1行目でmoveRightFuncを実行するのも忘れないでください。次項では、このアニメを一時停止/再開するようにします。

アニメの一時停止と再開

サンプル（pause/02.html）を開いて、body内に2つのbutton（id属性はpauseとresume）が追加されていることを確認してください。

<button id="pause">pause</button>
<button id="resume">resume</button>

jQueryには以下の処理が追加されています。1〜3行目では、id属性がpauseの要素をクリックしたら、div要素（アニメが設定されている要素）に対しpauseメソッドを実行します。4〜6行目では、id属性がresumeの要素をクリックしたら、div要素に対しresumeメソッドを実行します。

$("#pause").click(function(){
	$("div").pause();
});
$("#resume").click(function(){
	$("div").resume();
});

結果としてpauseボタンをクリックするとアニメが停止し、resumeボタンをクリックすると一時停止したアニメが再開します。

キューに対応していない...

このプラグインの登場は2010年でプラグインとしては古株なのですが、検索しても余り記事がありません。こんな便利なプラグインなのに何故だろうと思っていたのですが、いろいろサンプルを作成して理由が分かった気がします。このプラグイン、キューに対応していないのです。

サンプル（pause/03.html）を開いてbody内にid属性startのbuttonが追加されているのを確認してください。

<button id="start">start</button>
<button id="pause">pause</button>
<button id="resume">resume</button>

id属性startの処理は以下の様に記述され、ボタンをクリックすると右に移動した後に左に移動して停止します。これまでのサンプルと異なり、アニメが終わった後の処理（function）を設定せずに、普通に連続して記述しています。つまりキューに追加して順々に再生しているだけです。

$("#start").click(function(){
	$("div").animate({left:400},1000);	
	$("div").animate({left:0},1000);	
});

pauseとresumeの処理はpause/02.htmlから変更ありません。startボタンをクリックして、右に到着する前に「pause」ボタンをクリックしてください。私としては「一時停止」することを期待したのですが、実際は右に移動するアニメが停止したと判断され、次のキューに進んでしまいます。つまり左に行くアニメが再生されてしまい、一時停止できません。

このサンプルでpauseボタンを機能するようにするためには、結局サンプルpause/02.htmlと同じように、処理が終わった後に新たなアニメの処理を追加するようにします。サンプル（pause/03b.html）を開いてstartボタンの処理が以下の様に変更されているのを確認してください。

$("#start").click(function(){
	$("div").animate({left:400},1000,function(){
		$("div").animate({left:0},1000);	
	});	
});

この記述であればpauseボタンも機能しますが、複雑なアニメになるほど入れ子が深くなり見にくいスクリプトとなってしまいます。なのでpause/02.htmlと同じようにアニメごとにfunctionを作成する方がよいでしょう。

サンプル（pause/04.html）を開いてアニメごとに4つのfunction（anime_1〜anime_4）が作成されているのを確認してください。アニメの数が4つになっただけで、仕組みとしてはpause/02.htmlとまったく同じです。

function anime_1 (){
	$('div').animate({left:400},1000, anime_2);
}
function anime_2 (){
	$('div').animate({top:400},1000, anime_3);
}
function anime_3 (){
	$('div').animate({left:0},1000, anime_4);
}
function anime_4 (){
	$('div').animate({top:0},1000, anime_1);
}

キューに対応していないとはいえ、シンプルなアニメの場合には知っておいて損はないように思います。

メモ

deferredにも対応していない

2010年のプラグインというと、たぶんdeferredオブジェクトの登場前です。ですからdeferredオブジェクトにも対応していないとは思いますが、一応確認してみました（結果、対応していませんでした）。

サンプル（pause/test01.html）を開いて、startボタンの処理が以下の様に変更されているのを確認してください。whenメソッドを利用して2つのアニメからpromiseオブジェクトを作成し、それに対してdoneメソッドを利用しています。

$.when(
	$("div").animate({left:400},1000),	
	$("div").animate({left:0},1000)
).done(function(){
	$("div").text("DONE!");	
});

結果として2つのアニメが完了すると、div要素に「DONE!」と表示されます。ここでもpause/03.htmlと同じように、右に到着する前にpauseボタンをクリックすると、一時停止せずに左に移動するアニメが再生されてしまいます。deferredオブジェクトに対応していたら（pauseを利用してもアニメが終了と判断されなければ）、配列で一時停止が可能なアニメを管理できると思ったのですが...。
→サンプル（pause/test01b.html）

var animeArray = [
	"$('div').animate({left:400},1000);",
	"$('div').animate({top:400},1000);",
	"$('div').animate({left:0},1000);",
	"$('div').animate({top:0},1000);"
];

次のページ：2章 nivo slider(1)