デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

jQuery.fx.intervalアニメのフレームレートを変更

構文

アニメのフレームレートを変更返値:数値
jQuery.fx.interval = ミリ秒 ver1.4.3〜
※jQueryは$に置き換え可能

機能

jQuery.fx.intervalは、jQueryで実行する全てのアニメに関わる「プロパティ」で、設定したミリ秒の間隔でアニメを更新します。つまり1000を指定すれば1fpsになり、100を指定すれば10fpsになります。
計算式:fps = 1000 / ミリ秒

fpsはフレームレートの単位で、1秒間にアニメを更新する回数です。fpsが大きいほど(引数に設定する値が小さいほど)スムースなアニメになりますが、その分CPUに負荷が掛かります。スペックの低いPCによっては効果が期待できないかもしれません。デフォルトでは13ミリ秒が設定され、約77fpsになります。

解説

まずはjQuery.fx.intervalを利用しないサンプルから

jQuery.fx.intervalの機能と比較するため、jQuery.fx.intervalを設定しないサンプルから確認します。
サンプル(interval/01.html)を開いてbody内の構成にdiv要素が1つあることを確認してください。jQueryは以下のように記述され、div要素をクリックするとgoRightFuncを実行するようになっています。

$(function () {
	$("div").click(goRightFunc);
});

ポイントはgoRightFuncと、そのコールバックに設定されたgoLeftFuncです。
ここで利用されているanimateメソッドはお互いをコールバックで設定しているため、アニメが完了したらお互いを実行し合います。つまりループで永遠に左右の移動を繰り返します。

function goRightFunc(){
	$("div").animate({left:500}, 3000, "linear", goLeftFunc);
}
function goLeftFunc(){
	$("div").animate({left:0}, 3000, "linear", goRightFunc);
}

結果として、div要素をクリックするとdiv要素が3秒かけて右に移動し、続いて3秒かけて左に移動するという動作を繰り返します。

jQuery.fx.intervalを利用したサンプル

ではjQuery.fx.intervalを利用したサンプルを確認します。サンプル(interval/02.html)を開いてbody内の構成はinterval/01.htmlと同じ事を確認してください。jQueryもほとんど同じで、異なるのは以下の様にjQuery.fx.intervalプロパティを200(5fpsになります)に設定している点だけです。

$(function () {
	jQuery.fx.interval = 200;
	$("div").click(goRightFunc);
});

div要素をクリックしてアニメを確認して下さい。5fpsなのでカクカクとアニメが再生されます。

メモ

アニメの途中で実行しても効果ありません

jQuery.fx.intervalは現在実行されているアニメのフレームレートを変更することはできないようです。つまりjQuery.fx.intervalが効果を発揮するのは、jQuery.fx.intervalを設定した後で実行されるアニメのみということです。

サンプル(interval/test01.html)を開いてbody内にbutton要素が追加されたことを確認して下さい。このbuttonをクリックすると以下の様にjQuery.fx.intervalを設定するようにしています。

$("button").click(function(){
	jQuery.fx.interval = 200;
});

このサンプルで、最初にdiv要素をクリックしてアニメを開始して下さい。その後でbuttonをクリックしてもフレームレートは変更されません。

ページをリロードして、今度は先にbuttonをクリックしてからdiv要素をクリックして下さい。この順番だとフレームレートが変更されます。

デフォルトの77fpsって速すぎない?

私はFlashでコンテンツを作成する場合、大抵30fpsにします。なのでjQueryのアニメがデフォルトで約77fps(ミリ秒で13)ということに驚きました。よほどスペックの高いPCでないと意味ないのではないでしょうか?

試しに約30fps(ミリ秒で33)のサンプル(interval/test02.html)を作成しました。jQuery.fx.intervalを利用していないinterval/01.htmlと比較して下さい。ほとんどの環境で差は無いと思います。

$(function () {
	jQuery.fx.interval = 33;
	$("div").click(goRightFunc);
});

スマートフォンのような低スペック環境は調整した方がよいのかもしれません