Browse Source

Fix animated counter: first decimal animation

master
Eduard Kuzmenko 4 years ago
parent
commit
89d05c5795
  1. 30
      src/components/chat/pinnedMessage.ts

30
src/components/chat/pinnedMessage.ts

@ -96,6 +96,7 @@ class AnimatedSuper {
} }
class AnimatedCounter { class AnimatedCounter {
static EMPTY_INDEX = -1;
static BASE_CLASS = 'animated-counter'; static BASE_CLASS = 'animated-counter';
container: HTMLElement; container: HTMLElement;
decimals: { decimals: {
@ -157,12 +158,10 @@ class AnimatedCounter {
hideLeft(number: number) { hideLeft(number: number) {
const decimals = ('' + number).length; const decimals = ('' + number).length;
const byDecimal = this.decimals.slice(decimals);//this.decimals.splice(deleteCount, this.decimals.length - deleteCount); const byDecimal = this.decimals.slice(decimals);//this.decimals.splice(deleteCount, this.decimals.length - deleteCount);
const EMPTY_INDEX = 0;
byDecimal.forEach((decimal) => { byDecimal.forEach((decimal) => {
const row = decimal.animatedSuper.getRow(EMPTY_INDEX, true); const previousDecimalNumber = +decimal.placeholder.innerText || 0;
decimal.animatedSuper.animate(EMPTY_INDEX, this.previousNumber, this.reverse ? number < this.previousNumber : number > this.previousNumber, true); const row = decimal.animatedSuper.getRow(AnimatedCounter.EMPTY_INDEX, true);
//decimal.container.remove(); decimal.animatedSuper.animate(AnimatedCounter.EMPTY_INDEX, previousDecimalNumber, this.reverse ? number < this.previousNumber : number > this.previousNumber, true);
//decimal.animatedSuper.clearRows();
}); });
this.clear(number); this.clear(number);
@ -171,27 +170,18 @@ class AnimatedCounter {
setCount(number: number) { setCount(number: number) {
//this.prepareNumber(number); //this.prepareNumber(number);
const previousByDecimal = Array.from('' + this.previousNumber).map(n => +n);
const byDecimal = Array.from('' + number).map(n => +n); const byDecimal = Array.from('' + number).map(n => +n);
byDecimal.forEach((decimalNumber, idx) => { byDecimal.forEach((decimalNumber, idx) => {
const decimal = this.getDecimal(idx); const decimal = this.getDecimal(idx);
const row = decimal.animatedSuper.getRow(number, true); //const row = decimal.animatedSuper.getRow(number, true);
const row = decimal.animatedSuper.getRow(decimalNumber, true);
const previousDecimalNumber = previousByDecimal[idx] ?? AnimatedCounter.EMPTY_INDEX;
row.innerText = decimal.placeholder.innerText = '' + decimalNumber; row.innerText = decimal.placeholder.innerText = '' + decimalNumber;
decimal.animatedSuper.animate(number, this.previousNumber, this.reverse ? number < this.previousNumber : number > this.previousNumber, true); //decimal.animatedSuper.animate(number, this.previousNumber, this.reverse ? number < this.previousNumber : number > this.previousNumber, true);
decimal.animatedSuper.animate(decimalNumber, previousDecimalNumber, this.reverse ? number < this.previousNumber : number > this.previousNumber, true);
}); });
/* const sides = ['from-top', 'from-bottom'];
if(this.reverse) {
sides.reverse();
}
const isHigher = number > this.previousNumber;
if(!isHigher) {
sides.reverse();
}
this.container.classList.add(sides[0]);
this.container.classList.remove(sides[1]); */
this.hideLeft(number); this.hideLeft(number);
//this.clear(number); //this.clear(number);
this.previousNumber = number; this.previousNumber = number;

Loading…
Cancel
Save