requestAnimationFrame メソッド
window.requestAnimationFrame()
requestAnimationFrame() メソッドは、コールバック関数を使用した繰り返し処理をよりスムーズに処理できるメソッドです。CSS アニメーション処理に利用されます。 このメソッドは Window インターフェイスのメソッドです。
リフレッシュレートを基準に描写間隔を指定しますのでスムーズな描写ができます。
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 | 摘要 |
|---|---|
| ID | requestAnimationFrame() メソッドによる固有の識別 ID |
Example
requestAnimationFrame() メソッドの例です。以下の例では、領域をマウスクリックすることでその領域が拡大するCSSアニメーションです。