備忘録的プログラミングリファレンス

requestAnimationFrame メソッド

Window.requestAnimationFrame()

 requestAnimationFrame() メソッドは、コールバック関数を使用した繰り返し処理をよりスムーズに処理できるメソッドです。アニメーション処理に利用されます。 このメソッドは Window インターフェイスのメソッドです。

 リフレッシュレートを基準に描写間隔を指定しますのでスムーズな描写ができます。

requestAnimationFrame メソッド
var count_ = 0;
const get_Animation() =>{
	if( count_ < 100 ){
		count_++;
		// ここに描写処理を定義

		// 繰り返し処理
		window.requestAnimationFrame(get_Animation);
	}
}

get_Animation();
	
詳しくはExampleを参照してください

 引数にコールバック関数を使います。

 一定間隔ごとに処理を行う setInterval() メソッドもありますが、requestAnimationFrame() メソッドの方がリフレッシュレートに合わせて描写しますのでよりスムーズです。

ページ内 Index

コールバック関数とは

 コールバック関数とは、引数として関数を渡す方法です。引数として関数を渡すと、その関数を処理してからその処理結果を関数内で利用します。
 繰り返しや現在の状態を監視しながら処理をする場合にコールバック関数が利用されています。

 requestAnimationFrame() メソッドにおけるコールバック関数は、引数で呼び出されるような関数のことです。

コールバック関数
...
	window.requestAnimationFrame( get_Animation );
...

Syntax

in JavaScript

 引数はコールバック関数です。多くの場合は、呼び出す関数はアニメーション処理を行う関数です。繰り返しの時は requestAnimationFrame() メソッド含んだ関数を引数に使います。
 返り値は long 型の ID です。ID はrequestAnimationFrame() メソッド固有の識別用 ID です。

long ID = window.requestAnimationFrame( callback );

引数(Parameter Values)

Value摘要
callbackコールバック関数。アニメーション処理をまとめた関数

返り値(Return Values)

 返り値は long 型の ID で、この値を window.cancelAnimationFrame() に渡すと描写処理をキャンセルします。

Type摘要
IDrequestAnimationFrame() メソッドによる固有の識別 ID

Example

 requestAnimationFrame() メソッドの例です。以下の例では、領域をマウスクリックすることでその領域が拡大するCSSアニメーションです。