taler/wallet-core
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

fix bug in animation

Browse Source
This commit is contained in:
Florian Dold 2016-09-23 22:15:23 +02:00
parent b48de94ff4
commit a6fa45b2e0
1 changed files with 22 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
lib/wallet/chromeBadge.ts
View File

@ -34,9 +34,15 @@ export class ChromeBadge implements Badge {
canvas: HTMLCanvasElement; canvas: HTMLCanvasElement;
ctx: CanvasRenderingContext2D; ctx: CanvasRenderingContext2D;
talerLogo: HTMLImageElement; 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; isBusy: boolean = false;
rotationAngle: number = 0; rotationAngle: number = 0;
static rotationAngleMax = 50000; static rotationAngleMax = 1000;
constructor() { constructor() {
let bg = chrome.extension.getBackgroundPage(); let bg = chrome.extension.getBackgroundPage();
@ -78,13 +84,20 @@ export class ChromeBadge implements Badge {
} }
private animate() { private animate() {
let bg: Window = chrome.extension.getBackgroundPage(); if (this.animationRunning) {
return;
}
this.animationRunning = true;
let start: number|undefined = undefined; let start: number|undefined = undefined;
let step = (timestamp: number) => { let step = (timestamp: number) => {
if (!start) { if (!this.animationRunning) {
return;
}
if (!start) {console.log("r")
start = timestamp; start = timestamp;
} }
let delta = (timestamp - start); let delta = (timestamp - start);
console.log("rotating by", timestamp);
if (!this.isBusy && this.rotationAngle + delta >= ChromeBadge.rotationAngleMax) { if (!this.isBusy && this.rotationAngle + delta >= ChromeBadge.rotationAngleMax) {
// stop if we're close enough to origin // stop if we're close enough to origin
this.rotationAngle = 0; this.rotationAngle = 0;
@ -92,7 +105,10 @@ export class ChromeBadge implements Badge {
this.rotationAngle = (this.rotationAngle + timestamp - start) % ChromeBadge.rotationAngleMax; this.rotationAngle = (this.rotationAngle + timestamp - start) % ChromeBadge.rotationAngleMax;
} }
if (this.isBusy || this.rotationAngle != 0) { if (this.isBusy || this.rotationAngle != 0) {
start = timestamp;
rAF(step); rAF(step);
} else {
this.animationRunning = false;
} }
this.draw(); this.draw();
}; };
@ -108,6 +124,9 @@ export class ChromeBadge implements Badge {
} }
startBusy() { startBusy() {
if (this.isBusy) {
return;
}
this.isBusy = true; this.isBusy = true;
this.animate(); this.animate();
} }