Last active
March 13, 2019 11:36
-
-
Save nagarajanpp8/9de15e29f5893535193dca92590902d6 to your computer and use it in GitHub Desktop.
ember-number-count-animation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import Ember from 'ember'; | |
export default Ember.Component.extend({ | |
didInsertElement(){ | |
this._super(...arguments); | |
/* Ember.run.next(()=>{ | |
var countup = new CountUp(); | |
console.log("run next"); | |
}, 1000); | |
this.runCountAnimation(); */ | |
}, | |
didReceiveAttrs(){ | |
this._super(...arguments); | |
this.runCountAnimation(); | |
}, | |
runCountAnimation(){ | |
var start = this.get("start") || 0; | |
var end = this.get("end") || 0; | |
var duration = this.get("duration") || 2000; | |
var _this = this; | |
var range = end - start; | |
// no timer shorter than 50ms (not really visible any way) | |
var minTimer = 50; | |
// calc step time to show all interediate values | |
var stepTime = Math.abs(Math.floor(duration / range)); | |
// never go below minTimer | |
stepTime = Math.max(stepTime, minTimer); | |
// get current time and calculate desired end time | |
var startTime = new Date().getTime(); | |
var endTime = startTime + duration; | |
var timer; | |
function run() { | |
var now = new Date().getTime(); | |
var remaining = Math.max((endTime - now) / duration, 0); | |
var value = Math.round(end - (remaining * range)); | |
_this.set("value", value); | |
if (value == end) { | |
_this.set("start", value); | |
clearInterval(timer); | |
} | |
} | |
timer = setInterval(run, stepTime); | |
run(); | |
} | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import Ember from 'ember'; | |
export default Ember.Controller.extend({ | |
appName: 'Ember Twiddle', | |
value: 20, | |
actions: { | |
update(){ | |
let temp = this.get("value") + Math.floor((Math.random() * 100) + 1); | |
this.set("value", temp); | |
} | |
} | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"version": "0.15.1", | |
"EmberENV": { | |
"FEATURES": {} | |
}, | |
"options": { | |
"use_pods": false, | |
"enable-testing": false | |
}, | |
"dependencies": { | |
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js", | |
"ember": "3.4.3", | |
"ember-template-compiler": "3.4.3", | |
"ember-testing": "3.4.3" | |
}, | |
"addons": { | |
"ember-data": "3.4.2" | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment