diff --git a/packages/@react-stately/virtualizer/src/tween.ts b/packages/@react-stately/virtualizer/src/tween.ts index 0a57aa8bc48..0f6e44b43cc 100644 --- a/packages/@react-stately/virtualizer/src/tween.ts +++ b/packages/@react-stately/virtualizer/src/tween.ts @@ -16,15 +16,11 @@ import {Point} from './Point'; let perf = typeof window !== 'undefined' ? window.performance : null; // @ts-ignore let perfNow = perf && (perf.now || perf.webkitNow || perf.msNow || perf.mozNow); -let getTime = perfNow ? perfNow.bind(perf) : function () { - return Date.now ? Date.now() : new Date().getTime(); -}; - -// check if we need to get the time each frame (see below) -let fixTs = false; -requestAnimationFrame(function (t) { - fixTs = (t > 1e12) !== (getTime() > 1e12); -}); +let getTime = perfNow + ? perfNow.bind(perf) + : function () { + return Date.now ? Date.now() : new Date().getTime(); + }; export interface CancelablePromise extends Promise { cancel(): void @@ -32,14 +28,15 @@ export interface CancelablePromise extends Promise { export function tween(begin, end, duration, ease, fn): CancelablePromise { let canceled = false; - let raf_id; + let raf_id: number = 0; - let promise = new Promise(resolve => { - let start = getTime(); - let diffX = end.x - begin.x; - let diffY = end.y - begin.y; + const promise = new Promise((resolve) => { + const start = getTime(); + const diffX = end.x - begin.x; + const diffY = end.y - begin.y; raf_id = requestAnimationFrame(function run(t) { + const fixTs = t > 1e12 !== getTime() > 1e12; // if we're using a high res timer, make sure timestamp is not the old epoch-based value. // http://updates.html5rocks.com/2012/05/requestAnimationFrame-API-now-with-sub-millisecond-precision if (fixTs) { @@ -47,16 +44,18 @@ export function tween(begin, end, duration, ease, fn): CancelablePromise { } // check if we're done - let delta = t - start; + const delta = t - start; if (delta > duration) { fn(end); resolve(); } else { // call frame callback after computing eased time and get the next frame - let proceed = fn(new Point( - begin.x + diffX * ease(delta / duration), - begin.y + diffY * ease(delta / duration) - )); + const proceed = fn( + new Point( + begin.x + diffX * ease(delta / duration), + begin.y + diffY * ease(delta / duration) + ) + ); if (proceed !== false && !canceled) { raf_id = requestAnimationFrame(run); } @@ -78,5 +77,5 @@ export function linearEasing(t) { } export function easeOut(t) { - return Math.sin(t * Math.PI / 2); + return Math.sin((t * Math.PI) / 2); }