Durata di attenuazione calcolata in funzione della distanza

Question

Vorrei una funzione per calcolare la durata di un'animazione in modo tale che anche quando la distanza cambia, la velocità rimane costante.

==================================== 
|         | 
|<============ width =============>| 
|         | 
|   <====== distance1 ======>| 
|         | 
|    <=== distance2 ===>| 
|         | 
=================================== 

Questo è banale da realizzare quando si tratta di allentamento lineare,

function getDuration (width, distance, duration) { 
    return duration * (1 - distance/width); 
} 

Tuttavia, questo diventa molto più complesso quando si utilizza non lineare funzioni di andamento, come easeInOutQuad (Un esempio di questo problema: http://jsfiddle.net/Wexcode/rdrbm8et/3/).

Dato una funzione di andamento, come ad esempio easeInOutQuad, come si calcola la durata in modo che la velocità per qualsiasi distanza rimanga costante?

easeInOutQuad: function (t) { return t<.5 ? 2*t*t : -1+(4-2*t)*t }, 

Fonte: https://gist.github.com/gre/1650294

Fonte: http://api.jqueryui.com/easings/

Answer 1

Si dovrebbe utilizzare alcuni matematica avanzata per la lunghezza calcolare dell'arco generato dalla formula.

Una buona spiegazione è here. Si dovrebbe usare sotto formula

Answer 2

Data una funzione y = f(t), dove y è la distanza e t è il tempo semplicemente risolvere per donna, e utilizzare la funzione t = g(y) per determinare il tempo necessario per arrivare a un data la distanza.

Ad esempio, nel easeInOutQuad easing, -1+(4-2*t)*t possono essere risolti:

Fonte: http://www.wolframalpha.com/input/?i=Solve%28y+%3D+-1%2B%284-2*t%29*t%2C+t%29

In pratica, si dovrebbe moltiplicare t volte la duration per ottenere la vostra nuova durata.

var ratio = distance/width; 
if (ratio <= .5) { 
    return duration * Math.sqrt(ratio * 1/2); 
} else if (ratio <= 1) { 
    return duration * (1 - Math.sqrt(1-ratio)/Math.sqrt(2)); 
} 

http://jsfiddle.net/Wexcode/rdrbm8et/6/