From 67545296849cb04c49a05fd32600b7d5fc874d51 Mon Sep 17 00:00:00 2001 From: Norman Vasquez Date: Sat, 6 Feb 2021 20:40:24 -0600 Subject: [PATCH 1/3] refactor: requestAnimationFrame Migrating from setInterval to requestAnimationFrame for a more optimize animation --- .../src/lib/page-scroll-instance.ts | 5 ++-- .../lib/providers/ngx-page-scroll.service.ts | 23 +++++++++++-------- 2 files changed, 17 insertions(+), 11 deletions(-) diff --git a/projects/ngx-page-scroll-core/src/lib/page-scroll-instance.ts b/projects/ngx-page-scroll-core/src/lib/page-scroll-instance.ts index 360669f..ce242d5 100644 --- a/projects/ngx-page-scroll-core/src/lib/page-scroll-instance.ts +++ b/projects/ngx-page-scroll-core/src/lib/page-scroll-instance.ts @@ -80,9 +80,10 @@ export class PageScrollInstance { /* Whether an interrupt listener is attached to the body or not */ public interruptListenersAttached = false; - /* References to the timer instance that is used to perform the scroll animation to be + /* Value of the requestAnimationFrameId that is used to perform the scroll animation to be able to clear it on animation end*/ - public timer: any = null; + + public requestFrameId: number | null = null; /** * Private constructor, requires the properties assumed to be the bare minimum. diff --git a/projects/ngx-page-scroll-core/src/lib/providers/ngx-page-scroll.service.ts b/projects/ngx-page-scroll-core/src/lib/providers/ngx-page-scroll.service.ts index b0e87fa..a42f6b7 100644 --- a/projects/ngx-page-scroll-core/src/lib/providers/ngx-page-scroll.service.ts +++ b/projects/ngx-page-scroll-core/src/lib/providers/ngx-page-scroll.service.ts @@ -54,11 +54,11 @@ export class PageScrollService { pageScrollInstance.detachInterruptListeners(); } - if (pageScrollInstance.timer) { + if (pageScrollInstance.requestFrameId) { // Clear/Stop the timer - clearInterval(pageScrollInstance.timer); + window.cancelAnimationFrame(pageScrollInstance.requestFrameId) // Clear the reference to this timer - pageScrollInstance.timer = undefined; + pageScrollInstance.requestFrameId = null; pageScrollInstance.fireEvent(!interrupted); return true; @@ -198,7 +198,14 @@ export class PageScrollService { // .. and calculate the end time (when we need to finish at last) pageScrollInstance.endTime = pageScrollInstance.startTime + pageScrollInstance.executionDuration; - pageScrollInstance.timer = setInterval((instance: PageScrollInstance) => { + pageScrollInstance.requestFrameId = window.requestAnimationFrame(this.updateScrollPostion(pageScrollInstance)) + + // Register the instance as running one + this.runningInstances.push(pageScrollInstance); + } + + public updateScrollPostion(instance: PageScrollInstance){ + return ()=>{ // Take the current time const currentTime: number = new Date().getTime(); @@ -231,12 +238,10 @@ export class PageScrollService { // (otherwise the event might arrive at "too early") if (stopNow) { this.stopInternal(false, instance); + } else{ + window.requestAnimationFrame(this.updateScrollPostion(instance)) } - - }, this.config._interval, pageScrollInstance); - - // Register the instance as running one - this.runningInstances.push(pageScrollInstance); + } } public scroll(options: PageScrollOptions): void { From fe10ba7870ff75ed89ab103647158e0cc9bdc01c Mon Sep 17 00:00:00 2001 From: Norman Vasquez Date: Sun, 7 Mar 2021 17:54:49 -0600 Subject: [PATCH 2/3] refactor: requestAnimationFrame Now use the injected document to reference the window object. --- .../src/lib/providers/ngx-page-scroll.service.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/projects/ngx-page-scroll-core/src/lib/providers/ngx-page-scroll.service.ts b/projects/ngx-page-scroll-core/src/lib/providers/ngx-page-scroll.service.ts index a42f6b7..0887986 100644 --- a/projects/ngx-page-scroll-core/src/lib/providers/ngx-page-scroll.service.ts +++ b/projects/ngx-page-scroll-core/src/lib/providers/ngx-page-scroll.service.ts @@ -56,7 +56,7 @@ export class PageScrollService { if (pageScrollInstance.requestFrameId) { // Clear/Stop the timer - window.cancelAnimationFrame(pageScrollInstance.requestFrameId) + pageScrollInstance.pageScrollOptions.document.defaultView.cancelAnimationFrame(pageScrollInstance.requestFrameId) // Clear the reference to this timer pageScrollInstance.requestFrameId = null; pageScrollInstance.fireEvent(!interrupted); @@ -198,7 +198,7 @@ export class PageScrollService { // .. and calculate the end time (when we need to finish at last) pageScrollInstance.endTime = pageScrollInstance.startTime + pageScrollInstance.executionDuration; - pageScrollInstance.requestFrameId = window.requestAnimationFrame(this.updateScrollPostion(pageScrollInstance)) + pageScrollInstance.requestFrameId = pageScrollInstance.pageScrollOptions.document.defaultView.requestAnimationFrame(this.updateScrollPostion(pageScrollInstance)); // Register the instance as running one this.runningInstances.push(pageScrollInstance); @@ -239,7 +239,7 @@ export class PageScrollService { if (stopNow) { this.stopInternal(false, instance); } else{ - window.requestAnimationFrame(this.updateScrollPostion(instance)) + instance.pageScrollOptions.document.defaultView.requestAnimationFrame(this.updateScrollPostion(instance)) } } } From 656ad506ace25f5ff048b1d491947724aa4475c2 Mon Sep 17 00:00:00 2001 From: Norman Vasquez Date: Sun, 7 Mar 2021 19:44:05 -0600 Subject: [PATCH 3/3] refactor: requestAnimationFrame the _interval option is no longer needed --- .../src/lib/providers/config.provider.ts | 1 - .../src/lib/providers/ngx-page-scroll.service.ts | 12 ++---------- .../src/lib/types/page-scroll.config.ts | 6 ------ 3 files changed, 2 insertions(+), 17 deletions(-) diff --git a/projects/ngx-page-scroll-core/src/lib/providers/config.provider.ts b/projects/ngx-page-scroll-core/src/lib/providers/config.provider.ts index dfae972..bec313d 100644 --- a/projects/ngx-page-scroll-core/src/lib/providers/config.provider.ts +++ b/projects/ngx-page-scroll-core/src/lib/providers/config.provider.ts @@ -4,7 +4,6 @@ import { PageScrollConfig } from '../types/page-scroll.config'; export const NGXPS_CONFIG = new InjectionToken('ngxps_config'); export const defaultPageScrollConfig: PageScrollConfig = { - _interval: 10, _minScrollDistance: 2, _logLevel: 1, namespace: 'default', diff --git a/projects/ngx-page-scroll-core/src/lib/providers/ngx-page-scroll.service.ts b/projects/ngx-page-scroll-core/src/lib/providers/ngx-page-scroll.service.ts index 0887986..2ee4dba 100644 --- a/projects/ngx-page-scroll-core/src/lib/providers/ngx-page-scroll.service.ts +++ b/projects/ngx-page-scroll-core/src/lib/providers/ngx-page-scroll.service.ts @@ -157,17 +157,9 @@ export class PageScrollService { Math.abs(pageScrollInstance.distanceToScroll) / pageScrollInstance.pageScrollOptions.speed * 1000; } - // We should go there directly, as our "animation" would have one big step - // only anyway and this way we save the interval stuff - const tooShortInterval = pageScrollInstance.executionDuration <= pageScrollInstance.pageScrollOptions._interval; - - if (allReadyAtDestination || tooShortInterval) { + if (allReadyAtDestination) { if (this.config._logLevel >= 2 || (this.config._logLevel >= 1 && isDevMode())) { - if (allReadyAtDestination) { - console.log('Scrolling not possible, as we can\'t get any closer to the destination'); - } else { - console.log('Scroll duration shorter that interval length, jumping to target'); - } + console.log('Scrolling not possible, as we can\'t get any closer to the destination'); } pageScrollInstance.setScrollPosition(pageScrollInstance.targetScrollPosition); pageScrollInstance.fireEvent(true); diff --git a/projects/ngx-page-scroll-core/src/lib/types/page-scroll.config.ts b/projects/ngx-page-scroll-core/src/lib/types/page-scroll.config.ts index 95be409..99c9bff 100644 --- a/projects/ngx-page-scroll-core/src/lib/types/page-scroll.config.ts +++ b/projects/ngx-page-scroll-core/src/lib/types/page-scroll.config.ts @@ -2,12 +2,6 @@ import { EasingLogic } from './easing-logic'; export interface PageScrollConfig { - /** - * The number of milliseconds to wait till updating the scroll position again. - * Small amounts may produce smoother animations but require more processing power. - */ - _interval?: number; - /** * The amount of pixels that need to be between the current scrollTop/scrollLeft position * and the target position the cause a scroll animation. In case distance is below