feat: support requestAnimationFrame (#8112)

* feat: support requestAnimationFrame

* add native helpers to measure time

* test(animation-frame): add tests

* chore: refactor animation-frame to its own module

* chore: fix tslint

nativescript-core/animation-frame/animation-frame.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Allows you to create, cancel and react to listeners to animation frames.
+ * @module "animation-frame"
+ */ /** */
+
+/**
+ * Callback called on frame rendered
+ * @argument time Time of the current frame in milliseconds
+ */
+export interface FrameRequestCallback {
+    (time: number): void;
+}
+
+/**
+ * Requests an animation frame and returns the timer ID
+ * @param cb Callback to be called on frame
+ */
+export function requestAnimationFrame(cb: FrameRequestCallback): number 
+
+/**
+ * Cancels a previously scheduled animation frame request
+ * @param id timer ID to cancel
+ */
+export function cancelAnimationFrame(id: number): void;

nativescript-core/animation-frame/animation-frame.ts

@@ -0,0 +1,62 @@
+import { FPSCallback } from "../fps-meter/fps-native";
+import { getTimeInFrameBase } from "./animation-native";
+
+export interface FrameRequestCallback {
+    (time: number): void;
+}
+
+let animationId = 0;
+let nextFrameAnimationCallbacks: { [key: string]: FrameRequestCallback } = {};
+let shouldStop = true;
+let inAnimationFrame = false;
+let fpsCallback: FPSCallback;
+let lastFrameTime = 0;
+
+function getNewId() {
+    return animationId++;
+}
+
+function ensureNative() {
+    if (fpsCallback) {
+        return;
+    }
+    fpsCallback = new FPSCallback(doFrame);
+}
+
+function doFrame(currentTimeMillis: number) {
+    lastFrameTime = currentTimeMillis;
+    shouldStop = true;
+    const thisFrameCbs = nextFrameAnimationCallbacks;
+    nextFrameAnimationCallbacks = {};
+    inAnimationFrame = true;
+    for (const animationId in thisFrameCbs) {
+        if (thisFrameCbs[animationId]) {
+            thisFrameCbs[animationId](lastFrameTime);
+        }
+    }
+    inAnimationFrame = false;
+    if (shouldStop) {
+        fpsCallback.stop(); // TODO: check performance without stopping to allow consistent frame times
+    }
+}
+
+export function requestAnimationFrame(cb: FrameRequestCallback): number {
+    if (!inAnimationFrame) {
+        inAnimationFrame = true;
+        zonedCallback(cb)(getTimeInFrameBase()); // TODO: store and use lastFrameTime
+        inAnimationFrame = false;
+
+        return getNewId();
+    }
+    ensureNative();
+    const animId = getNewId();
+    nextFrameAnimationCallbacks[animId] = zonedCallback(cb) as FrameRequestCallback;
+    shouldStop = false;
+    fpsCallback.start();
+
+    return animId;
+}
+
+export function cancelAnimationFrame(id: number) {
+    delete nextFrameAnimationCallbacks[id];
+}

nativescript-core/animation-frame/animation-native.android.ts

@@ -0,0 +1,4 @@
+
+export function getTimeInFrameBase(): number {
+    return java.lang.System.nanoTime() / 1000000;
+}

nativescript-core/animation-frame/animation-native.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Gets the time in millisseconds in the same base as frames
+ */
+export function getTimeInFrameBase(): number;

nativescript-core/animation-frame/animation-native.ios.ts

@@ -0,0 +1,3 @@
+import { time } from "../profiling";
+
+export const getTimeInFrameBase = time;

nativescript-core/animation-frame/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "animation-frame",
+  "main": "animation-frame",
+  "types": "animation-frame.d.ts",
+  "nativescript": {}
+}

nativescript-core/globals/globals.ts

@@ -1,6 +1,7 @@
 import "./core";
 
 import "./polyfills/timers";
+import "./polyfills/animation";
 import "./polyfills/dialogs";
 import "./polyfills/xhr";
 import "./polyfills/fetch";

nativescript-core/globals/polyfills/animation/animation.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Installs animations polyfill.
+ * @module "globals/polyfills/animations"
+ */ /** */
+import "../../core";

nativescript-core/globals/polyfills/animation/animation.ts

@@ -0,0 +1,6 @@
+import "../../core";
+import { installPolyfills } from "../polyfill-helpers";
+
+global.registerModule("animation", () => require("../../../animation-frame"));
+
+installPolyfills("animation", ["requestAnimationFrame", "cancelAnimationFrame"]);

nativescript-core/globals/polyfills/animation/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "animation",
+  "main": "animation",
+  "types": "animation.d.ts",
+  "nativescript": {}
+}