javascript - example - jquery innertext

Ecuación de flexibilización elástica jQuery

Question

¿Cómo puedo modificar esta función de aceleración jQuery para producir un rebote menos exagerado?

$.easing.easeOutElasticSingleBounce = function (x, t, b, c, d) {
    var s=1.70158;var p=0;var a=c;
    if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
    if (a < Math.abs(c)) { a=c; var s=p/4; }
    else var s = p/(2*Math.PI) * Math.asin (c/a);
    return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
};

Estoy buscando producir una función de aceleración que emule esto:

http://sandbox.scriptiny.com/tinyslider2/

tinyslider2 usa una función similar que se parece a esto:

new Function(this.n+''.slide(''+(i==1?t+(12*d):t+(4*d))+'',''+(i==1?(-1*d):(-1*d))+'',''+(i==1?2:3)+'',''+a+'')'')

Pero parece que no puedo entender mejor las matemáticas para ajustar la ecuación de tinyslider2 en el formato de mejora de jQuery. Si alguien me puede mostrar un ejemplo, lo apreciaría mucho.

ACTUALIZAR

Esta ecuación es muy cercana:

$.easing.custom = function (x, t, b, c, d) {
    var s = 1.70158; 
    if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
    return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
}

Solo necesito el rebote final sin el rebote inicial.

Answer 1

¿Has probado el plugin jQuery easing ?

Añade muchas nuevas facilidades (puedes probarlas en el sitio web).

Si puedes usar una degradación elegante, te sugiero que eches un vistazo a las transiciones CSS . Es acelerado por hardware, y puede usar transiciones predefinidas o personalizadas (con una curva de bezier).

Answer 2

Sé que esto es bastante antiguo, pero necesitaba hacer exactamente el mismo efecto y utilicé una combinación de dos funciones de aceleración en la interfaz de usuario con bastante éxito.

Una animación lineal para el 95% de la transición al 95% del ''tiempo'', luego una animación elástica sobre el 5% restante al 5% del ''tiempo'' multiplicado por 16 (esto parece que se ve bien, gran parte de la animación el tiempo para este efecto se dedica a rebotar, por lo que debe ser considerablemente más largo).

d = [transition ''distance'' or whatever];
t = [transition time ms]

da = d * 0.95;
db = d * 0.05;

ta = t * 0.95;
tb = (t * 0.05) * 16;

var anima = {left: "+="+da+"px"};
var animb = {left: "+="+db+"px"};

$(element).animate(anima,ta).animate(animb,tb);

Completamente la solución, pero no pude crear una fórmula bezier y estaba arrancándome el pelo al intentarlo.

Answer 3

http://timotheegroleau.com/Flash/experiments/easing_function_generator.htm permite crear visualmente una función de aceleración. Si cambia el botón de radio F5 / FMX en la parte superior derecha, da la salida en JavaScript.

Sin saber exactamente el efecto que deseas, esto debería acercarte mucho.

$.easing.tinyslider = function(x, t, b, c, d) {    
    ts=(t/=d)*t;
    tc=ts*t;
    return b+c*(-8.1525*tc*ts + 28.5075*ts*ts + -35.105*tc + 16*ts + -0.25*t);
}

De lo contrario, juegue con el generador de funciones de aceleración y pruebe nuevas opciones o busque http://commadot.com/jquery/easing.php para obtener más recursos.

jsfiddle

http://jsfiddle.net/XRF6J/

Fue divertido contestar, siempre quise saber cómo funcionaban esas funciones de aceleración.