ywork2020.com

Title

アニメーションの描画速度を取得、または設定する

目次 (INDEX)

fx.intervalとは

ここで説明する fx.interval とは次の語句からなるjQueryのプロパティです。
fx
読み: エフエックス
意味: effects (エフェクツ, エフェクト) の短縮類似発音語。「効果」の意味。
interval
読み: インターバル
意味: 間、間隔、区間、合間、休憩

目次に戻る

intervalプロパティの概要

このプロパティは、アニメーションの描画速度 (フレームレート) を取得、または設定することができます。

interval は jQuery version 3.0 では廃止されているので、使用する場合は ver 2 以下で使用する必要があります。

また、このプロパティ値の変更を有効化するためには、実行中のアニメーションがあれば、それを停止する必要があります。

プロパティの初期値は 13 ミリ秒 で、およそ 77 fps となります。 fps として表す場合の計算式は次の通りです。

fps = 1000 / interval ミリ秒

結果は、interval ミリ秒 の値が小さいほど、 fps の値は大きくなります。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

var interval = jQuery.fx.interval;
jQuery.fx.interval = interval;

目次に戻る

サンプルコードと実行結果

ここでは、input 要素 number 型に入力された値を、このページのアニメーション 描画速度に設定し、 div 要素をアニメーションさせてみます。

サンプルコード: CSS
<style>
	#idParent{
		background-color: ##ivory;
		padding: 10px;
		height: 120px;
		width: 96%;
	}
	#idDiv{
		position: relative;
		left: 0;
		top: 0;
		background-color: ##lightgreen;
		border: thin solid ##lightgray;
		padding: 19px;
		height: 80px;
		width: 80px;
	}
</style>
サンプルコード: HTML
<head>
	<style>...</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
	<div id="idParent">
		<div id="idDiv"> Element </div>
	</div>
	<button id="idButton">run animation</button><br>
	<input type="number" id="idNumber" value="100">
	<script>...</script>
</body>
  • 03: libs/jquery/2.0.0/ (jQuery ライブラリーから ver 2.0.0 を参照しています。このプロパティは ver 2 以下でないと動作しません。)
  • 06-08: div id="idParent" (親要素です。)
  • 07: div id="idDiv" (子要素です。この要素がアニメーションします。)
  • 09: button id="idButton" (アニメーションを開始する為のボタンです。)
  • 10: input type="number" id="idNumber" (この入力欄には interval に代入される数値を与えます。この値を自由に変更して検証していただけます。)
  • ※ ここでは 重要なコードのみ掲載していますので、少しだけ コードを省いています。
サンプルコード: script
<script>
	$("#idButton").click(function(){
		$.fx.interval = $("#idNumber").val();
		$("#idDiv").animate({"left":"300px"}, 1000);
		$("#idDiv").animate({"left":"0"}, 1000);
	});
</script>
  • 02-06: $("#idButton").click(function(){関数の処理}) (idButton のボタン要素にクリックイベントをバインドして関数をアタッチしています。この要素をクリックすることで {関数の処理} の部分が実行されます。)
  • 03: $.fx.interval = $("#idNumber").val() (jQuery オブジェクトから fx プロパティ経由で interval プロパティを参照し、idNumber の要素の入力値を代入しています。 )
  • 04, 05: $("#idDiv").animate() (animate() を使ってアニメーションキューを発行しています。)
実行結果:
Element

= 10 fps

目次に戻る