EN
Ce contenu n’est pas disponible dans votre langue. Voici la version anglaise.

requestAnimationFrame method

Registers a function to call when the system is ready to update (repaint) the display. This provides smoother animations and optimal power efficiency by allowing the system to determine when the animation occurs. The visibility of the web application and the display refresh rate are used to determine the appropriate speed of the animations, e.g. the number of frames per second supported by the system. . For example, if the web application isn't visible, the browser will stop painting the animation by not calling the registered function.

Syntax

var handle = window.requestAnimationFrame(callback);

Parameters

callback [in]

Type: Function

The animation code to be run when the system is ready.

Return value

Type: Integer

A handle or ID to the requestAnimationFrame method that can be used to cancel the request if needed.

Standards information

Remarks

Unlike older animation techniques based on setTimeout and setInterval methods which required developers to make assumptions on when to schedule the next frame of animation, requestAnimationFrame requestAnimationFrame simplifies animations by scheduling the next animation frame only when the system is ready to paint. This leads to smoother animations and less power consumption than previous animation techniques because requestAnimationFrame takes the visibility of the web application and the refresh rate of the display into account.

The requestAnimationFrame method only schedules a single callback, like setTimeout method. To schedule subsequent animation frames, the requestAnimationFrame method must be called again from within the callback function.

You call requestAnimationFrame, by passing a callback function, that represents the frame of animation you want to paint. When the system is ready to paint the animation frame, it calls the callback function. The first parameter of the callback function is aDOMHighResTimeStamp format time. This time parameter is in milliseconds that represents the time when the callback function is called. In a Windows Store app using JavaScript, the format follows the latest W3C Timing control for script-based animation. If you want to compare the times or check the system, use window.performance.now to get the current time. . This time isn't comparable with Date.now(), which returns a time value in millisecond since 01 January 1970.

To cancel an animation request before the animation function is called back, use cancelAnimationFrame. It's a good practice to stop calling requestAnimationFrame at that time as well.

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 a Windows Store app using JavaScript. 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 difference between the starting time and the current time. The mod operator is used to constrain the movement to the screen, keeping the left style between 0 and 600. You can set it 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
cancelAnimationFrame

 

 

Afficher:
© 2014 Microsoft