ticker-service
Version:
A service used to create animation loops in a simple way and to keep everything in sync within an app.
232 lines (231 loc) • 6.89 kB
TypeScript
/**
* Extend the Window interface
*/
declare global {
interface Window {
setAnimationLoop: (callback: TimerHandler, frameRate: number) => number;
clearAnimationLoop: (loopId: number) => void;
setCounter: (callback: TimerHandler, time: number, repeats: number, ...params: any[]) => number;
clearCounter: (counterId: number) => void;
sleep: (time: number) => Promise<unknown>;
frame: () => Promise<unknown>;
}
}
/**
* Define a service used to keep all the timing functions in sync by replacing the
* internal JavaScript timer with one based on a frame animation loop.
* All the timing functions will be overridden with the service once and some other
* will be added to make animator lives easier.
* @class
*/
export default class TickerService {
/**
* Current index generated for a ticker method.
* @type {Number}
* @private
*/
private currentIndex;
/**
* Current running time of the ticker since it was last started.
* @type {Number}
* @private
*/
private currentTime;
/**
* Delta time since the last tick.
* @type {Number}
* @private
*/
private delta;
/**
* Reference to the latest frame request.
* @type {Number}
* @private
*/
private animationFrameRequest;
/**
* Flag used to toggle the scope functions with the ticker ones.
* @type {Boolean}
* @private
*/
private useScopeFunctionsFlag;
/**
* Running status of the ticker.
* @type {Boolean}
* @private
*/
private running;
/**
* List of the latest frames registered.
* @type {Array}
* @private
*/
private frameRateHistory;
/**
* List of all the ticker callbacks.
* @type {Object}
* @private
*/
private tickerCallbacks;
constructor();
/**
* Get the current application frame rate.
* @returns {Number}
*/
get frameRate(): number;
/**
* Get the maximum frame rate supported by the browser.
* @returns {Number}
*/
get maxFrameRate(): number;
/**
* Get the average frame rate recorded during the last couple of seconds.
* @returns {Number}
*/
get averageFrameRate(): number;
/**
* The score is a number that can be used to assess the device performance.
* It is a value between 0 to 100, if the value goes below a certain threshold
* it means that the device is struggling executing the animation loop and some
* action should be taken to ease the load from the CPU/GPU.
* @returns {Number}
*/
get score(): number;
/**
* Check if the service is running.
* @returns {Boolean}
*/
get isRunning(): boolean;
/**
* Check if the service is using the scope timing function.
* @returns {Boolean}
*/
get useScopeFunctions(): boolean;
/**
* Toggle the timing function from the default JavaScript once to the service once and vice-versa.
* @param {Boolean} value
*/
set useScopeFunctions(value: boolean);
/**
* Register a callback that will be executed after a specific amount of time.
* @param {Function} callback
* @param {Number} time
* @param {Array} params
* @returns {Number}
*/
setTimeout(callback: TimerHandler, time?: number, ...params: any[]): number;
/**
* Clear a registered timeout.
* @param {Number} index
*/
clearTimeout(index: number): void;
/**
* Register a callback that will be executed at regular intervals.
* @param {Function} callback
* @param {Number} time
* @param {Array} params
* @returns {Number}
*/
setInterval(callback: TimerHandler, time?: number, ...params: any[]): number;
/**
* Clear a registered interval.
* @param {Number} index
*/
clearInterval(index: number): void;
/**
* Register a callback that will be executed for a specific amount of times over regular intervals.
* @param {Function} callback
* @param {Number} time
* @param {Number} repeats
* @param {Array} params
* @returns {Number}
*/
setCounter(callback: TimerHandler, time: number, repeats: number, ...params: any[]): number;
/**
* Clear a registered counter.
* @param {Number} index
*/
clearCounter(index: number): void;
/**
* Execute a callback on the next available frame.
* @param {Function} callback
* @returns {Number}
*/
requestAnimationFrame(callback: TimerHandler): number;
/**
* Cancel a request to execute a callback on the next available frame.
* @param {Number} index
*/
cancelAnimationFrame(index: number): void;
/**
* Create an animation loop where the callback will be executed at every frame.
* It is possible to specify a frame rate different from the browser one.
* @param {Function} callback
* @param {Number} frameRate
* @returns {Number}
*/
setAnimationLoop(callback: TimerHandler, frameRate: number): number;
/**
* Clear a registered animation loop.
* @param {Number} index
*/
clearAnimationLoop(index: number): void;
/**
* Return a promise that will be automatically resolved after a certain amount of time.
* @param {Number} time
* @returns {Promise}
*/
sleep(time: number): Promise<any>;
/**
* Return a promise that will be automatically resolved on the next available frame.
* @returns {Promise}
*/
frame(): Promise<any>;
/**
* Start the service.
* @returns {TickerService}
*/
start(): TickerService;
/**
* Stop the service.
* @returns {TickerService}
*/
stop(): TickerService;
/**
* Get the current timestamp.
* @returns {Number}
*/
private getTime;
/**
* Clear one of the ticker callbacks.
* @param {Number} index
* @private
*/
private clearTickerCallback;
/**
* Register a ticker callback.
* @param {Function} callback
* @param {Array} params
* @param {Number} repeats
* @param {Number} delay
* @returns {Number}
* @private
*/
private createTickerCallback;
/**
* Execute all the callbacks that have requested to be run at the current frame.
* @param {Number} delta
* @private
*/
private tick;
/**
* Create the main animation loop.
* @private
*/
private playAnimationFrame;
/**
* Store a frame into the history.
* @private
*/
private storeFrameRateHistory;
}