Questions tagged [requestanimationframe]

HTML5 window.requestAnimationFrame API is an alternative to setTimeout for animations or applications running in a loop.

The HTML5 window.requestAnimationFrame(callback) function sends a request to the browser that the callback() function is to be called before the next repaint of the window.

When the callback() function is invoked, it is passed a DOMHighResTimeStamp parameter, indicating the time in milliseconds at which the callback function was called.

To continue an animation, call the requestAnimationFrame() function from within itself:

function nextFrame(timeStamp) {
// animation
requestAnimationFrame(nextFrame); // repeats the animation
}

requestAnimationFrame(nextFrame); // starts the animation

The browser handles the repaint.

Specification

Resources

804 questions
22
votes
1 answer

What happen when I call requestAnimationFrame multiple times

I mean calling multiple requestAnimationFrame with the same function in one time function Draw() { /* DoSomething */ } function AFunc() { /* prepare something */ requestAnimationFrame(Draw); } function BFunc() { /* prepare something */ …
Thaina Yu
  • 1,372
  • 2
  • 16
  • 27
21
votes
2 answers

When to use requestAnimationFrame?

Having discovered requestAnimationFrame just a moment ago, I have dived into all the information I could find about it. To name just a few of the resources I came across in case there are others looking for more info about…
Martijn Hols
  • 1,470
  • 1
  • 10
  • 21
20
votes
3 answers

setTimeout or setInterval or requestAnimationFrame

For HTML5 games,with canvas animation for mobile devices. I'm facing some performance issues which differ the speed between each device and the others. requestAnimationFrame speed the animation of the game according to the device speed. setInterval…
Soliman
  • 1,132
  • 3
  • 12
  • 32
18
votes
4 answers

How can I use RxJS to generate a requestAnimationFrame loop?

My goal is to create an animation loop à la requestAnimationFrame so that I could do something like this: animationObservable.subscribe(() => { // drawing code here }); I tried this code as a basic test: let x = 0; Rx.Observable .of(0) …
Kendall Frey
  • 43,130
  • 20
  • 110
  • 148
18
votes
2 answers

JS global "let" variable not updating in function?

Edit: I've reported this as a Chromium bug: https://bugs.chromium.org/p/chromium/issues/detail?id=668257 I'm creating a little canvas game in JS with enemies that can shoot. For testing, I created a flag, declared globally as let fancy = true;, to…
qxz
  • 3,814
  • 1
  • 14
  • 29
18
votes
5 answers

Call a function each x second in requestAnimationFrame

I'm working on some personal project by Three.js. I'm using requestAnimationFrame function. I want to call a function each 2 seconds. I've search but I couldn't find anything useful. My code is like this: function render() { // each 2 seconds…
Siamak Motlagh
  • 5,028
  • 7
  • 41
  • 65
17
votes
3 answers

Get frame numbers in HTML5 Video

I am trying to capture each frame number of the video however it looks like there is no way of achieving it. So I started my own clock to match the frame numbers of the video but they never match and the difference keeps increasing as the video…
SayedTaqui
  • 173
  • 1
  • 1
  • 6
16
votes
6 answers

How do I test code that uses `requestAnimationFrame` in jest?

I want to write a jest unit test for a module that uses requestAnimationFrame and cancelAnimationFrame. I tried overriding window.requestAnimationFrame with my own mock (as suggested in this answer), but the module keeps on using the implementation…
htho
  • 1,549
  • 1
  • 12
  • 33
15
votes
1 answer

React: If you set state in a request animation frame will react schedule rendering on the animation frame?

I'm trying to understand the nuances of using something like a game loop inside of React (version 16+). I'm confused as to how React's rendering strategy conflicts (or doesn't conflict) with another rendering scheduler - in this case: request…
MFave
  • 1,044
  • 2
  • 8
  • 19
15
votes
2 answers

requestAnimationFrame is being called only once

I'm trying to achieve a pretty basic animation using ThreeJS in my Ionic 2 application. Basically trying to rotate a cube. But the cube isn't rotating because requestAnimationFrame is being executed only once inside the render loop. I'm able to see…
somnathbm
  • 649
  • 1
  • 9
  • 19
15
votes
4 answers

requestAnimationFrame [now] vs performance.now() time discrepancy

Assumptions: rAF now time is calculated at the time the set of callbacks are all triggered. Therefore any blocking that happens before the first callback of that frame is called doesn't affect the rAF now and it's accurate--at least for that first…
15
votes
3 answers

Is it true that if possible I should never use setInterval & setTimeout?

I am learning to code in JavaScript. I am programming something with some timed mouse animation. I'm just about to add some code which draws the mouse path. It's going to be something that takes the mousemove event, and every time the mouse moves…
irenicus
  • 163
  • 1
  • 1
  • 5
15
votes
1 answer

Use requestAnimationFrame in a class

I'm having problem finding out how I can use requestAnimationFrame in a class. This code is working fine: window.onload = function () { var width = 20; function animation() { width++; var element =…
Tc_
  • 505
  • 1
  • 6
  • 15
15
votes
3 answers

Is there anything faster than setTimeout and requestAnimationFrame?

(I need a process.nextTick equivalent on browser.) I'm trying to get the most out of javascript performance so I made a simple counter ... In a second I make continuous calls to a function that just adds one to a variable. The code:…
14
votes
2 answers

Large "idle" bars in Chrome dev tools Frames Timeline

I'm drawing some shapes (arc, lineTo, etc.) to a using requestAnimationFrame. Nothing too fancy, but I'm noticing some occasional jerky animation. I profiled using the Timeline inspector in Chrome dev tools, and am seeing a large amount of idle…
1
2
3
53 54