use requestAnimationFrame to drive animations

Author: roman01la

examples/showcase/BouncingBall.jsx

@@ -3,7 +3,7 @@
 // See LICENSE file for full license text
 
 // Bouncing ball component - demonstrates custom drawing with rect and circle
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 
 export function BouncingBall() {
   // Content dimensions
@@ -20,18 +20,22 @@ export function BouncingBall() {
   const speed = 5.0;
   const angle = Math.random() * 2 * Math.PI;
 
-  const [velocityX, setVelocityX] = useState(Math.cos(angle) * speed);
-  const [velocityY, setVelocityY] = useState(Math.sin(angle) * speed);
+  const vx = useRef(Math.cos(angle) * speed);
+  const vy = useRef(Math.sin(angle) * speed);
 
-  // Update ball position every 16ms (~60fps)
+  // Update ball position every animation frame
   useEffect(() => {
-    const interval = setInterval(() => {
+    let time = performance.now();
+    function render(t) {
+      const dt = (t - time) / 10;
+      time = t;
+      
       setBallX(prevX => {
-        let newX = prevX + velocityX;
+        let newX = prevX + vx.current * dt;
 
         // Bounce off left/right walls
         if (newX - ballRadius <= borderThickness || newX + ballRadius >= contentWidth - borderThickness) {
-          setVelocityX(prev => -prev);
+          vx.current = -vx.current;
           // Clamp position to stay within bounds
           newX = newX - ballRadius <= borderThickness
             ? borderThickness + ballRadius
@@ -42,11 +46,11 @@ export function BouncingBall() {
       });
 
       setBallY(prevY => {
-        let newY = prevY + velocityY;
+        let newY = prevY + vy.current * dt;
 
         // Bounce off top/bottom walls
         if (newY - ballRadius <= borderThickness || newY + ballRadius >= contentHeight - borderThickness) {
-          setVelocityY(prev => -prev);
+          vy.current = -vy.current;
           // Clamp position to stay within bounds
           newY = newY - ballRadius <= borderThickness
             ? borderThickness + ballRadius
@@ -55,10 +59,13 @@ export function BouncingBall() {
 
         return newY;
       });
-    }, 16);
 
-    return () => clearInterval(interval);
-  }, [velocityX, velocityY]);
+      // Request next frame
+      requestAnimationFrame(render);
+    }
+
+    requestAnimationFrame(render);
+  }, []);
 
   return (
     <window title="Bouncing Ball" defaultX={600} defaultY={350} flags={64}>

lib/imgui-runtime/imgui-runtime.cpp

@@ -29,11 +29,13 @@ class HermesApp {
   facebook::hermes::HermesRuntime *hermes = nullptr;
   facebook::jsi::Function peekMacroTask;
   facebook::jsi::Function runMacroTask;
+  facebook::jsi::Function flushRaf;
 
   HermesApp(SHRuntime *shr, facebook::jsi::Function &&peek,
-            facebook::jsi::Function &&run)
+            facebook::jsi::Function &&run, facebook::jsi::Function &&flushRaf)
       : shRuntime(shr, &_sh_done), hermes(_sh_get_hermes_runtime(shr)),
-        peekMacroTask(std::move(peek)), runMacroTask(std::move(run)) {}
+        peekMacroTask(std::move(peek)), runMacroTask(std::move(run)),
+        flushRaf(std::move(flushRaf)) {}
 
   // Delete copy/move to ensure singleton behavior
   HermesApp(const HermesApp &) = delete;
@@ -275,6 +277,9 @@ static void app_frame() {
       s_hermesApp->hermes->drainMicrotasks();
     }
 
+    // Flush RAF callbacks (also a macrotask)
+    s_hermesApp->flushRaf.call(*s_hermesApp->hermes);
+
     // Render frame (this is also a macrotask)
     s_hermesApp->hermes->global()
         .getPropertyAsFunction(*s_hermesApp->hermes, "on_frame")
@@ -434,7 +439,8 @@ sapp_desc sokol_main(int argc, char *argv[]) {
     // Create and initialize HermesApp
     s_hermesApp =
         new HermesApp(shr, helpers.getPropertyAsFunction(*hermes, "peek"),
-                      helpers.getPropertyAsFunction(*hermes, "run"));
+                      helpers.getPropertyAsFunction(*hermes, "run"),
+                      helpers.getPropertyAsFunction(*hermes, "flushRaf"));
 
     // Initialize jslib's current time
     double curTimeMs = stm_ms(stm_now());

lib/jslib-unit/jslib.js

@@ -97,13 +97,64 @@
         }
     }
 
+    // requestAnimationFrame polyfill that adapts to the host's tick rate.
+    // We batch callbacks and flush them on the next macro task, so the
+    // frequency naturally follows the platform refresh cadence (e.g., 60/90/120Hz)
+    // if the host drives the event loop once per frame.
+    var rafQueue = {};
+    var rafNextId = 1;
+
+    function flushRaf() {
+        // Take a snapshot of callbacks and clear the queue so rAFs scheduled
+        // inside a callback run on the next tick (matching browser semantics).
+        var cbs = [];
+        for (var id in rafQueue) {
+            if (Object.prototype.hasOwnProperty.call(rafQueue, id)) {
+                cbs.push(rafQueue[id]);
+                delete rafQueue[id];
+            }
+        }
+        var ts = curTime;
+        for (var i = 0; i < cbs.length; i++) {
+        try {
+            cbs[i](ts);
+        } catch (e) {
+            try {
+                if (
+                    globalThis &&
+                    globalThis.console &&
+                    typeof globalThis.console.error === 'function'
+                ) {
+                    globalThis.console.error(e);
+                } else if (typeof print === 'function') {
+                    print('ERROR:', String(e && e.message ? e.message : e));
+                }
+            } catch (_) {}
+        }
+        }
+    }
+
+    function requestAnimationFrame(callback) {
+        var id = rafNextId++;
+        rafQueue[id] = callback;
+        return id;
+    }
+
+    function cancelAnimationFrame(id) {
+        if (rafQueue[id]) {
+        delete rafQueue[id];
+        }
+    }
+
     // Expose to global scope
     globalThis.setTimeout = setTimeout;
     globalThis.clearTimeout = clearTimeout;
     globalThis.setImmediate = setImmediate;
     globalThis.clearImmediate = clearImmediate;
     globalThis.setInterval = setInterval;
     globalThis.clearInterval = clearInterval;
+    globalThis.requestAnimationFrame = requestAnimationFrame;
+    globalThis.cancelAnimationFrame = cancelAnimationFrame;
 
     // Polyfills needed by React
     // NODE_ENV will be set from C++ based on build configuration
@@ -168,5 +219,5 @@
     };
 
     // Return helper functions for C++ to use
-    return {peek: peekMacroTask, run: runMacroTask};
+    return {peek: peekMacroTask, run: runMacroTask, flushRaf};
 })();