Leichtigkeit in und aus Kurve in for-Schleife

Question

Ich habe eine for-Schleife wie folgt aus:

var speed = 100; 
var curve = []; 

for (var i = 0; i < 5; i++) { 
     curve.push(i*speed); 
} 

Also für die letzte Schleife seine 400, die Frage ist, wie kann ich wohl in die und aus in der for-Schleife implementieren? ungefähr am Ende sollte das Ergebnis so sein? [0,52,200,348,400]

EDIT:

var defaultSpin = 24; 
var totalSlices = 12; 

for (var i = 0; i < defaultSpin; i++) { 
      highlight(divs[i%totalSlices], i*100, 100); 
    } 

function highlight(el, delay, duration) { 
    setTimeout(function() { 
     el.className += ' active'; 
     setTimeout(function() { 
      el.className = 'pie'; 
     }, duration) 
    }, delay) 
} 

Es ist ein Spin-Rad mit Highlight anstatt es tatsächlich zu drehen. Ich rufe die obige Funktion mit der Schleife auf. Im Moment hat es nur eine konstante Geschwindigkeit, da jede Schleifendifferenz nur 100 beträgt, also ist die 1. Hightlight-Verzögerung 0 und sie beginnt sofort. 2. ist 100, 3. ist 200 und so weiter.

Answer 1

Viele gemeinsame Lockerung Funktionen werden hier gezeigt:

http://gizma.com/easing/

Hier ist ein Beispiel dafür, wie man verwenden:

// from http://gizma.com/easing/ 
var easeInOutQuad = function (t, b, c, d) { 
    t /= d/2; 
    if (t < 1) return c/2*t*t + b; 
    t--; 
    return -c/2 * (t*(t-2) - 1) + b; 
}; 

var steps = 4 
var speed = 100 
var curve = [] 
for (var i = 0; i < steps+1; i++) { 
    var stepValue = easeInOutQuad(i, 0, speed*steps, steps); 
    curve.push(stepValue); 
} 

console.log(curve); // [0, 50, 200, 350, 400] 

Answer 2

nehmen Hey eine Notiz dieser Schnipsel

/*\ 
* Raphael.easing_formulas 
[ property ] 
** 
* Object that contains easing formulas for animation. You could extend it with your own. By default it has following list of easing: 
# <ul> 
#  <li>“linear”</li> 
#  <li>“&lt;” or “easeIn” or “ease-in”</li> 
#  <li>“>” or “easeOut” or “ease-out”</li> 
#  <li>“&lt;>” or “easeInOut” or “ease-in-out”</li> 
#  <li>“backIn” or “back-in”</li> 
#  <li>“backOut” or “back-out”</li> 
#  <li>“elastic”</li> 
#  <li>“bounce”</li> 
# </ul> 
# <p>See also <a href="http://raphaeljs.com/easing.html">Easing demo</a>.</p> 
\*/ 
var ef = R.easing_formulas = { 
    linear: function (n) { 
     return n; 
    }, 
    "<": function (n) { 
     return pow(n, 1.7); 
    }, 
    ">": function (n) { 
     return pow(n, .48); 
    }, 
    "<>": function (n) { 
     var q = .48 - n/1.04, 
      Q = math.sqrt(.1734 + q * q), 
      x = Q - q, 
      X = pow(abs(x), 1/3) * (x < 0 ? -1 : 1), 
      y = -Q - q, 
      Y = pow(abs(y), 1/3) * (y < 0 ? -1 : 1), 
      t = X + Y + .5; 
     return (1 - t) * 3 * t * t + t * t * t; 
    }, 
    backIn: function (n) { 
     var s = 1.70158; 
     return n * n * ((s + 1) * n - s); 
    }, 
    backOut: function (n) { 
     n = n - 1; 
     var s = 1.70158; 
     return n * n * ((s + 1) * n + s) + 1; 
    }, 
    elastic: function (n) { 
     if (n == !!n) { 
      return n; 
     } 
     return pow(2, -10 * n) * math.sin((n - .075) * (2 * PI)/.3) + 1; 
    }, 
    bounce: function (n) { 
     var s = 7.5625, 
      p = 2.75, 
      l; 
     if (n < (1/p)) { 
      l = s * n * n; 
     } else { 
      if (n < (2/p)) { 
       n -= (1.5/p); 
       l = s * n * n + .75; 
      } else { 
       if (n < (2.5/p)) { 
        n -= (2.25/p); 
        l = s * n * n + .9375; 
       } else { 
        n -= (2.625/p); 
        l = s * n * n + .984375; 
       } 
      } 
     } 
     return l; 
    } 
}; 
ef.easeIn = ef["ease-in"] = ef["<"]; 
ef.easeOut = ef["ease-out"] = ef[">"]; 
ef.easeInOut = ef["ease-in-out"] = ef["<>"]; 
ef["back-in"] = ef.backIn; 
ef["back-out"] = ef.backOut; 

Dies ist ein Schnipsel von Raphael. Hier sehen Sie, dass Sie eine Liste von Easy-In-Formeln für Animationen haben.

Versuchen wir einen von ihnen, z.B. Einfachheit in

var pow = Math.pow; 
 

 
function easeIn(n) { 
 
    return pow(n, 1.7); 
 
} 
 

 
function easeOut(n) { 
 
    return pow(n, .48); 
 
} 
 

 
function process(min, max, intervals, fN) { 
 
    var diff = 1/intervals, 
 
    difference = max - min, 
 
    curve = []; 
 
    for (i = diff; i <= 1; i += diff) { 
 
    curve.push(min + (difference * fN(i))); 
 
    } 
 
    return curve; 
 
} 
 

 
console.log('easeIn: \n', process(0, 400, 5, easeIn)); 
 
console.log('easeOut: \n', process(0, 400, 5, easeOut));

Sie dies möglicherweise nicht mit dem Ausgang synchron sein erwartet. Aber das sind die Formeln, die eine renommierte JS-SVG-Bibliothek wie Rapahel verwendet. Du würdest das lieben demo