I'd like to have the ability to run functions at a certain rate, which can increase or decrease according to a mathematical function such as a curve... much the same way easing functions like easeIn and easeOut work in CSS and JQuery.
Here's a crude illustration of an "easeInOut" type scenario. The line represents time, the os a function call.
o-o--o---o-----o----------o-----o---o--o-o
Implementation could look something like:
trigger(5000, "easeInOut", callback); // Over five seconds, "callback()" is called with an easeInOut ease.
function triggerWithEase(duration, ease, callback){
// ???
}
function callback(){
console.log("Heyo!");
}
Is there a Javascript / JQuery solution for this already? If not, how could this be accomplished?
Edit 1:
Some inspiration for the timing graph itself:
Edit 2:
I'm impressed with you creative folks who have actually used the little ASCII graph I used in the description as an input to the function! I'm looking for a more mathematical solution to this, though...
Here's a better illustration of what I'm thinking. This assumes we're using a quadratic formula (ax^2 + bx + c) over a duration of 20 seconds.
It'd be really cool to pass a function some parameters and have it trigger callbacks at the correct intervals doing something like this:
10 calls over 20 seconds
20 calls over 20 seconds
Edit 3
Some completely untested, back-of-the-napkin pseudocode I'm playing with:
function easeTrigger(callback, functionType, functionOptions, duration, numberOfCalls){
switch("functionType"){
case "quadratic":
quadtratic(functionOptions);
break;
case "sine":
sine(functionOptions);
break;
/* ... */
default:
linear(functionOptions);
break;
}
function quadratic(options){
var x = numberOfCalls;
var result;
var delay;
var timer;
for (var i = x - 1; i >= 0; i--) {
result = a * Math.pow(x, 2) + (b * x) + c;
delay = result * 1000; // using the result to calculate the time between function calls
}
// ???
for (var s = numberOfCalls - 1; s >= 0; s--) {
delay = result * 1000; // probably need to chain this somehow, a for loop might not be the best way to go about this.
timer = setTimeout(result, caller);
}
// ???
// PROFIT!
}
function caller(duration){
clearTimeout(timer);
timer = setTimeout(delay, callback);
}
}
// How this might be implemented...
easeTrigger(callback, "quadratic", {a: 1, b: 2, c:0}, 5000, 20);
easeTrigger(callback, "linear", {a: 1, b: 2}, 5000, 10);
// Callback to call at the end of every period
function callback(){
console.log("Yo!");
}