Window.requestAnimationFrame() - 60fpsの間隔で繰り返し処理を実行する
requestAnimationFrame()は、Windowのメソッドです。アラートを表示します。60fpsの間隔で繰り返し処理を実行します。繰り返し処理という点ではWindowOrWorkerGlobalScope.setInterval()と目的が同じですが、こちらはアニメーションを想定しているため、ブラウザがアクティブでない時は処理を一時停止するなどCPUメモリを節約してくれます。繰り返し処理はcancelAnimationFrame()で中止できます。
概要
- 名前
- requestAnimationFrame
- 所属
- Window
- IDL
unsigned long requestAnimationFrame(FrameRequestCallback callback); callback FrameRequestCallback = void (DOMHighResTimeStamp time); typedef double DOMHighResTimeStamp;
- 仕様書
- https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#dom-window-requestanimationframe
説明
引数(callback)には、繰り返し処理の内容であるコールバック関数を指定します。この関数は引数で、初回実行時からの秒数を受け取ります。
コールバックidを返します。このidを引数にcancelAnimationFrame()を実行すると、繰り返し処理を中止できます。
チュートリアル
requestAnimationFrame()は、WindowOrWorkerGlobalScope.setInterval()と違い、再帰的に実行しなければいけません。下記に正しい例と間違いの例を示します。
// コールバックid (中止する時に必要)
var callbackId ;
/********** 正しい例 **********/
function myFunction ( timeStamp ) {
// 繰り返し処理の内容
// ...
// 再帰的に実行する
callbackId = requestAnimationFrame( myFunction ) ;
}
// 初回の実行
requestAnimationFrame( myFunction ) ;
/********** 間違いの例 (1回だけ実行して終わる) **********/
callbackId = requestAnimationFrame( function ( timeStamp ) {
// 繰り返し処理の内容
// ...
} ) ;
繰り返し処理は、返り値のコールバックidをcancelAnimationFrame()の引数にすることで、中止させることができます。
cancelAnimationFrame( callbackId ) ;
デモ
Window.requestAnimationFrame()のデモです。
<!-- このコードは編集できます。 -->
<!DOCTYPE html>
<html>
<head>
<style>
div#result { white-space: pre-wrap ; }
</style>
</head>
<body>
<p><button id="run">開始</button></p>
<p><button id="cancel">停止</button></p>
<hr>
<p><img id="hoge" src="./image.png" width="50" height="auto"></p>
<hr>
<div id="result"></div>
<script>
var callbackId ;
var element1 = document.getElementById( "hoge" ) ;
var element2 = document.getElementById( "result" ) ;
var calc = 1 ;
function myFunction ( timeStamp ) {
element1.width += 1 * calc ;
if ( element1.width > 200 || 50 > element1.width ) {
calc *= -1 ;
}
callbackId = requestAnimationFrame( myFunction ) ;
element2.textContent = "経過秒数: " + timeStamp + "\n" ;
element2.textContent += "返り値: " + callbackId + "\n" ;
}
myFunction() ;
document.getElementById( "run" ).onclick = function() {
cancelAnimationFrame( callbackId ) ;
myFunction() ;
}
document.getElementById( "cancel" ).onclick = function() {
cancelAnimationFrame( callbackId ) ;
}
</script>
</body>
</html>
サポート状況
Chrome | Firefox | Safari | Edge | IE | Opera | iOS Safari | Android |
---|---|---|---|---|---|---|---|
● 24+ | ● 23+ | ● 7.1+ | ● | ● 10+ | ● 15+ | ● 7.0+ | ● 4.4+ |
関連記事
- Window.cancelAnimationFrame()
- cancelAnimationFrame()は、Windowのメソッドです。requestAnimationFrame()で実行されている繰り返し処理を中止します。
- 配列から要素を削除する
- 配列から先頭、末尾、または指定位置の要素を削除します。
- Window.matchMedia()
- matchMedia()は、Windowのメソッドです。MediaQueryListを作成します。
- IDLリファレンス
- WHATWGやW3Cで定義されているDOMなどのWeb APIの仕様を、サンプルコードやデモ付きでまとめています。