pixel.horse/src/ts/components/services/frameService.ts

import { Injectable, NgZone } from '@angular/core';

export interface FrameLoop {
  init(): void;
  destroy(): void;
}

@Injectable({
  providedIn: 'root',
})
export class FrameService {
  constructor(private zone: NgZone) {
  }
  create(frame: (delta: number) => void) {
    const zone = this.zone;
    let ref = 0;
    let last = 0;

    function tick(now: number) {
      ref = requestAnimationFrame(tick);
      frame((now - last) / 1000);
      last = now;
    }

    return {
      init() {
        if (!ref) {
          last = performance.now();
          zone.runOutsideAngular(() => ref = requestAnimationFrame(tick));
        }
      },
      destroy() {
        cancelAnimationFrame(ref);
        ref = 0;
      }
    };
  }
}