Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-03-27 00:19:39 +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 { .path {
stroke: #3f51b5; stroke: #3f51b5;
stroke-linecap: round; stroke-linecap: round;
transition: stroke-dashoffset 11s ease 0s; transition: stroke-dashoffset 5s ease 0s;
} }
.trail { .trail {

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

@ -1,5 +1,11 @@
import React, { PropTypes, Component } from 'react'; import React, { PropTypes, Component } from 'react';
import styles from './progress-styles.scss'; 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 { class Progress extends Component {
constructor (props) { constructor (props) {
@ -37,30 +43,17 @@ class Progress extends Component {
getTarget (target) { getTarget (target) {
const start = this.state.percentageText; const start = this.state.percentageText;
const TOTAL_ANIMATION_TIME = 10000; const TOTAL_ANIMATION_TIME = 5000;
const diff = start > target ? -(start - target) : target - start; const diff = start > target ? -(start - target) : target - start;
const perCycle = TOTAL_ANIMATION_TIME / diff; const perCycle = TOTAL_ANIMATION_TIME / diff;
const cyclesCounter = Math.round(Math.abs(TOTAL_ANIMATION_TIME / perCycle)); const cyclesCounter = Math.round(Math.abs(TOTAL_ANIMATION_TIME / perCycle));
const perCycleTime = Math.round(Math.abs(perCycle)); const perCycleTime = Math.round(Math.abs(perCycle));
let usedTime = 0;
// this initial value could be tweaked more
let lastTime = perCycleTime / 4;
return { return {
start, start,
target, target,
cyclesCounter, cyclesCounter,
getTimer () { perCycleTime,
/* 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;
},
increment: diff / cyclesCounter, increment: diff / cyclesCounter,
}; };
} }
@ -82,7 +75,7 @@ class Progress extends Component {
this.setState({ percentageText: next }); this.setState({ percentageText: next });
this.nextTimer = setTimeout(() => { this.nextTimer = setTimeout(() => {
this.animateTo(next, targetState); this.animateTo(next, targetState);
}, targetState.getTimer()); }, targetState.perCycleTime);
}); });
} }