requestAnimationFrame

< dom‎ | Window
Jump to: navigation, search

requestAnimationFrame

Mixed

Summary

A method to invoke at the optimal time a callback to update the frame of an animation.

Method of dom/Window

Syntax

var handle = window.
  • Some part "<nowiki>...</nowiki>" of the query was not understood.
  • Some subquery has no valid condition.
(x1, constraints, x, x, index, token, token, token, element, format, namespace, name, namespace, text, text, tagName, eventType, rootNode, target, text, rootNode, x, id, name, namespace, url, node, str, psarray, eventType, fragment, where, name, namespaceURI, namespace, name, namespaceURI, where, Range, label, candidate, data, track, x, x, x, when, when, waveTable, frequencyHz ... further results);

Parameters

callback

Data-type: function


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

Return Value

Returns an object of type Number.

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

Examples

HTML

<!DOCTYPE html>
<html>
<head>
<title>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>

Notes

Unlike older animation techniques based on setTimeout and setInterval methods, requestAnimationFrame based animation occurs when the system is ready. This leads to smoother animations and less power consumption than animations because requestAnimationFrame takes the visibility of the web application and the refresh rate of the display into account, The requestAnimationFrame method creates only a single animation request. To create continous animation, a new request must be registered for each frame. To cancel an animation request before the animation function is called back, use cancelAnimationFrame.


Related specifications

Specification Status Related Changes
Timing control for script-based animations W3C Working Draft

Compatibility

Desktop

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic Support 24
21 -webkit
14 -moz
10
Unsupported
6 -webkit

Mobile

Feature Android BlackBerry Chrome for mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Opera Mini Safari Mobile
Basic support ? ? ? ? ? ? ? ?

The given value was not understood.

Attribution

The given value was not understood. This article contains content originally from external sources.

Portions of this content come from the Microsoft Developer Network: [requestAnimationFrame Article]


The given value was not understood.