diff options
-rw-r--r-- | lib/wallet/chromeBadge.ts | 25 |
1 files changed, 22 insertions, 3 deletions
diff --git a/lib/wallet/chromeBadge.ts b/lib/wallet/chromeBadge.ts index 2443378b2..c22608f85 100644 --- a/lib/wallet/chromeBadge.ts +++ b/lib/wallet/chromeBadge.ts @@ -34,9 +34,15 @@ export class ChromeBadge implements Badge { canvas: HTMLCanvasElement; ctx: CanvasRenderingContext2D; talerLogo: HTMLImageElement; + /** + * True if animation running. The animation + * might still be running even if we're not busy anymore, + * just to transition to the "normal" state in a animated way. + */ + animationRunning: boolean = false; isBusy: boolean = false; rotationAngle: number = 0; - static rotationAngleMax = 50000; + static rotationAngleMax = 1000; constructor() { let bg = chrome.extension.getBackgroundPage(); @@ -78,13 +84,20 @@ export class ChromeBadge implements Badge { } private animate() { - let bg: Window = chrome.extension.getBackgroundPage(); + if (this.animationRunning) { + return; + } + this.animationRunning = true; let start: number|undefined = undefined; let step = (timestamp: number) => { - if (!start) { + if (!this.animationRunning) { + return; + } + if (!start) {console.log("r") start = timestamp; } let delta = (timestamp - start); + console.log("rotating by", timestamp); if (!this.isBusy && this.rotationAngle + delta >= ChromeBadge.rotationAngleMax) { // stop if we're close enough to origin this.rotationAngle = 0; @@ -92,7 +105,10 @@ export class ChromeBadge implements Badge { this.rotationAngle = (this.rotationAngle + timestamp - start) % ChromeBadge.rotationAngleMax; } if (this.isBusy || this.rotationAngle != 0) { + start = timestamp; rAF(step); + } else { + this.animationRunning = false; } this.draw(); }; @@ -108,6 +124,9 @@ export class ChromeBadge implements Badge { } startBusy() { + if (this.isBusy) { + return; + } this.isBusy = true; this.animate(); } |