Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-20 00:08:02 +01:00
Code Issues Projects Releases Wiki Activity

remove semiease and set back to 5s animation

Browse Source
This commit is contained in:
sveisvei 2016-12-17 19:49:31 +01:00
parent d06be100d6
commit ce30f9a6b5
2 changed files with 10 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/component/feature/progress-styles.scss
View File

@ -1,7 +1,7 @@
.path {
stroke: #3f51b5;
stroke-linecap: round;
transition: stroke-dashoffset 11s ease 0s;
transition: stroke-dashoffset 5s ease 0s;
}
.trail {

25
frontend/src/component/feature/progress.jsx
View File

@ -1,5 +1,11 @@
import React, { PropTypes, Component } from 'react';
import styles from './progress-styles.scss';
import easing from 'bezier-easing';
const fn = easing(0, 0, 1, 0.5);
window.easing = easing;
// console.log(s);
class Progress extends Component {
constructor (props) {
@ -37,30 +43,17 @@ class Progress extends Component {
getTarget (target) {
const start = this.state.percentageText;
const TOTAL_ANIMATION_TIME = 10000;
const TOTAL_ANIMATION_TIME = 5000;
const diff = start > target ? -(start - target) : target - start;
const perCycle = TOTAL_ANIMATION_TIME / diff;
const cyclesCounter = Math.round(Math.abs(TOTAL_ANIMATION_TIME / perCycle));
const perCycleTime = Math.round(Math.abs(perCycle));
let usedTime = 0;
// this initial value could be tweaked more
let lastTime = perCycleTime / 4;
return {
start,
target,
cyclesCounter,
getTimer () {
/* Somewhat tweaked values to get a curve on the counting */
if (usedTime > (TOTAL_ANIMATION_TIME / 2)) {
// if halfway, lets speed up timeouts
lastTime *= 0.95;
} else {
lastTime *= 1.1;
}
usedTime += lastTime;
return lastTime;
},
perCycleTime,
increment: diff / cyclesCounter,
};
}
@ -82,7 +75,7 @@ class Progress extends Component {
this.setState({ percentageText: next });
this.nextTimer = setTimeout(() => {
this.animateTo(next, targetState);
}, targetState.getTimer());
}, targetState.perCycleTime);
});
}