cancelAnimationFrame method

Cancels a requestAnimationFrame request.

Internet Explorer 10

 

Syntax

window.cancelAnimationFrame(handle);

Parameters

handle [in]

Type: Integer

The handle of the animation request to cancel. handle is the value returned by requestAnimationFrame.

Return value

This method does not return a value.

Standards information

Examples

The following example shows several functions that demonstrate how to use requestAnimationFrame to create an animation, and cancelAnimationFrame to stop it.

The example starts by creating a <div> element and a start and stop button. When the page finishes loading (<body onload=...>), it initiates the elm variable. The elm variable is the ID of the <div> element.

When the start button is clicked, the animation is started by requesting an animation frame, and passing the callback function (render()) to Internet Explorer 10. When the system is ready to paint a frame, it calls the render function. The render function then moves the <div> element by calculating the amount to move from the difference between the last time and the current time (passed by callback function). The mod operator is used to constrain the movement to the screen, keeping the left style between 0 and 600. You can set the maximum left style to any value you want.


<!DOCTYPE html>
<html>
<head>
<title>Script-based animation using requestAnimationFrame</title>
<style type="text/css">
div { position: absolute; left: 10px; top:100px; padding: 50px;
  background: crimson; color: white }
</style>

</head>
<body>

<div id="animated">Hello there.</div>
<button onclick="start()">Start</button>
<button onclick="stop()">Stop</button>
    <script type="text/javascript">
        var elm = document.getElementById("animated");
        var stopped;
        var requestId = 0;
        var starttime;

        function render(time) {
            // set left style to a function of time. 
          if (!stopped) {
            elm.style.left = ((Date.now() - starttime) / 4 % 600) + "px";
            requestId = window.requestAnimationFrame(render);
            }
        }

        function start() {
            starttime = Date.now();
            requestId = window.requestAnimationFrame(render);
            stopped = false;
        }
        function stop() {
            if (requestId) {
                window.cancelAnimationFrame(requestId);
            }
            stopped = true;
        }


</script>
</body>
</html>


A quick search online will reveal discussions about additional issues that can help when implementing these APIs, such as requestAnimationFrame for smart animating, The secret to silky smooth JavaScript animation!, or Improving HTML5 Canvas Performance.

See also

window
requestAnimationFrame API demo
requestAnimationFrame

 

 

Show:
© 2014 Microsoft