SYNCERのロゴ
アイキャッチ画像

Window.cancelAnimationFrame() - 60fpsの繰り返し処理を中止する

cancelAnimationFrame()は、Windowのメソッドです。requestAnimationFrame()で実行されている繰り返し処理を中止します。

概要

名前
cancelAnimationFrame
所属
Window
IDL
void cancelAnimationFrame(unsigned long handle);
仕様書
https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#dom-window-cancelanimationframe

説明

引数(handle)には、中止する繰り返し処理のコールバックidを指定します。このコールバックidはrequestAnimationFrame()の返り値で得られます。

チュートリアル

cancelAnimationFrame()は、requestAnimationFrame()の繰り返し処理を中止させます。繰り返し処理をリクエストした時の返り値であるコールバックidを引数に指定して下さい。

var callbackId ;

function myFunction () {
	callbackId = requestAnimationFrame( myFunction ) ;
}

myFunction() ;

cancelAnimationFrame( callbackId ) ;

デモ

Window.cancelAnimationFrame()のデモです。

<!-- このコードは編集できます。 -->

<!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>

サポート状況

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
24+ 23+ 7.1+ 10+ 15+ 7.0+ 4.4+
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月14日 (土)
コンテンツを公開しました。