jQuery入門講座使い方-汎用的なアニメ(2)

汎用的なアニメ(2)

概要

animateメソッドの詳細

前回はanimateメソッドで属性の値を変化させてアニメを実現することを説明しましたが、まだ色々な機能があります。ここではアニメの速度やイージング、コールバックなどについて説明します。

解説

アニメの速度を設定する

animateメソッドでは第2引数に数値（ミリ秒）を設定することで、アニメの速度（演出時間）を変更できます（属性を設定するobjectオブジェクトとは別なことに注意してください）。

サンプル（animate2/01.html）のソースを開いてjQueryを確認してください。jQueryは前回のサンプル（animate1/04.html）とほとんど同じですが、以下の様にanimateの第２引数にミリ秒が設定してあります。属性を設定している{ }とは別なことに気を付けてください。

function rightFunc() {
	$(this).next().animate({left: "200px"}, 1000);
}
function leftFunc() {
	$(this).next().animate({left: "0px"}, 50);
}

このサンプルでは右に移動する時は1000ミリ秒（1秒）で移動し、左に移動する時は50ミリ秒（0.05秒）で移動します。

加速の種類（イージング）を設定する

animateメソッドでは加速の種類（イージング）を設定することができます。jQueryで利用できる設定はswingとlinearの２種類だけですが、プラグインを追加することで多様なイージングを導入できます。
→参考：プラグイン「イージングの追加」

イージングの種類: swing：徐々に加速したのち減速して停止します。デフォルトはこちらです。
linear：加速度は0。つまり等速移動します。自然界にあまり無い動きなので少し違和感があります。

２つのイージングの違いをサンプルで確認しましょう。サンプル（animate2/02.html）のソースを開いて、body内の構成を確認してください。移動対象のdivを２つに増やし、それぞれidをeasing_swing、easing_linearと設定しました。

<div id="touchArea">touch me!</div>
<div id="easing_swing">swing</div>
<div id="easing_linear">linear</div>

jQueryでは、これまで同様にhoverメソッドを利用してマウスオーバーでdownFuncとマウスアウトでupFuncを実行するようにしています。

$(function () {	
	$("#animeButton").toggle(downFunc, upFunc);			
});

downFuncとupFuncは以下の様に記述され、イージングの設定を変えて2つのdiv要素を同時に移動させるようにしました。イージングの設定は下記のようにanimateメソッドの第3引数に設定します（クォートが必要なので忘れないで下さい）。

function downFunc() {
	$("#easing_swing").animate({top: "200px"}, 1000, "swing");
	$("#easing_linear").animate({top: "200px"}, 1000, "linear");
}
function upFunc() {
	$("#easing_swing").animate({top: "0px"}, 1000, "swing");
	$("#easing_linear").animate({top: "0px"}, 1000, "linear");
}

青いdiv要素にマウスオーバーして違いを確認して下さい。違いが分かりにくいのですが、linearの設定の方は自然界にない動きなので少々違和感があります。そのため通常はswingを利用することになるでしょう（デフォルトはswingです）。リファレンスでも詳しく説明しているので興味があったら確認して下さい。

コールバックの設定

jQueryではアニメが完了したら特定の処理を実行するようにできます。このような処理をコールバックと呼びます。これはイージングよりも重要なので覚えるようにしましょう。

コールバック（call back）: 特定の処理が完了したら、それを知らせる処理のこと。jQueryのアニメではfunctionを設定することで、アニメの完了後にそれを実行します。

サンプル（animate2/03.html）のソースを開いてalertFuncが作成されているのを確認して下さい。実行するとアラートで「アニメが完了しました」と表示します。

function alertFunc() {
	alert("アニメが完了しました")	
}

そして以下のjQueryではid属性animeButtonをクリックしたら、id属性animeTargetの要素をアニメするようにしています。このときanimateメソッドの第4引数にアニメが完了した時に実行したいfunctionを設定します。設定するだけなのでfunctionの後に()を付けてはいけません。

$("#animeButton").click(function(){
	$("#animeTarget").animate({top: "200px"}, 1000, "swing", alertFunc);
});

このサンプルでは上記のようにalertFuncを設定したので、アニメが完了するとアラートが表示されます。実際に青いdiv要素をクリックして確認してください。

構文のまとめ

これでanimateメソッドに設定できる引数の紹介が終わったので以下にまとめておきます。このようにanimateメソッドでは４つの設定ができるのです。 ※汎用的なアニメ(3)では別の構文の説明をします。

animateメソッドの構文(1): $(セレクタ).animate(属性,期間,イージング,コールバック)
・属性はobjectオブジェクトによって設定します。
・速度はミリ秒で設定します。（ダブル）クォートは必要ありません。
・イージングは"swing"か"linear"しか設定できません。イージングプラグインの追加で種類が増えます。
・コールバックにはfunctionを設定します。設定するだけなので（）を付けないことに注意しましょう

このanimateメソッドの構文では属性以外の引数は省略可能です（省略する場合は詰めて設定します）。例えば、期間やイージングは設定したくないけれどコールバックは設定したい場合は、サンプル（animate2/04.html）のように属性のすぐ後にfunctionを設定します。

$("#animeButton").click(function(){
	$("#animeTarget").animate({top: "200px"}, alertFunc);
});

サンプルでは期間とイージングを省略して第2引数にコールバックのfunctionを設定していますが、実際に青いdiv要素をクリックすると問題なく機能することが確認できます。

メモ

jQueryのアニメの特長

jQueryのアニメは、前のアニメが完了してからでないと次のアニメを開始しない仕様になっています。
サンプル（animate2/05.html）のソースを開いてjQueryを確認してください。以下の様に、青いdiv要素（id属性animeButton）をクリックすると２つのアニメを実行します（２行目の処理でＸ座標が300pxの位置に移動し、３行目の処理でＹ座標が300pxの位置に移動します）。

$("#animeButton").click(function(){
	$("#animeTarget").animate({left: "300px"});
	$("#animeTarget").animate({top: "300px"});
});

Ｘ方向とＹ方向を操作しているのでナナメに移動しそうですが、実際にクリックすると最初Ｘ方向に300px移動し、それが完了してからＹ方向にアニメします。この仕様は3ページ後で紹介する「汎用的なアニメ(3)」で変更することができますが、まずは以下の様に覚えて下さい。

jQueryのアニメの特長: jQueryのアニメは1つずつ実行されます。つまりアニメが完了してからでないと次のアニメを実行しません。
※複数のアニメを同時に実行したい場合は複数の属性を設定して下さい。

もしナナメに移動させたい場合は２つのanimateメソッドを書くのではなく、１つのanimateメソッドに複数の属性を設定します。サンプル（animate2/06.html）を開いて下さい。以下の様にanimateメソッドは１つにまとめられ、属性の部分でleftとtopの設定するようにしました。

$("#animeButton").click(function(){
	$("#animeTarget").animate({left:"300px", top:"300px"});
});

ひとまずanimateメソッドの説明は終わりです。次回はアニメを停止するstopメソッドについて説明します。

次のページ：アニメの停止