javascript - fadeto - jquery animate opacity

Función jQuery easing-comprensión de variables

Question

¿Cómo funciona la función de aceleración para jQuery? Toma por ejemplo:

easeInQuad = function (x, t, b, c, d) {
    return c*(t/=d)*t + b;
};

¿Cómo funciona? ¿Qué contiene cada parámetro? ¿Cómo implementaría una simplificación muda para una animación?

Además, ¿cómo adjuntaré un patrón de aceleración a jQuery, lo estoy cargando en $ .easing lo suficientemente bueno?

Answer 1

De acuerdo con la fuente jQuery 1.6.2, el significado de la función de aceleración es el siguiente. La función se llama en varios puntos en el tiempo durante la animación. En los instantes se llama,

• x y t dicen cuál es el momento ahora, relativo al comienzo de la animación. x se expresa como un número de punto flotante en el rango [0,1], donde 0 es el inicio y 1 es el final. t se expresa en milisegundos desde el inicio de la animación.
• d es la duración de la animación, como se especifica en la llamada animada, en milisegundos.
• b = 0 yc = 1.

La función de relajación debe devolver un número de coma flotante en el rango [0,1], llámelo r . jQuery luego calcula x=start+r*(end-start) , donde start y end son los valores de inicio y final de la propiedad como se especifica en la llamada a animar, y establece el valor de la propiedad en x .

Por lo que puedo ver, jQuery no te da control directo sobre cuándo se llama a la función de paso de animación, solo te permite decir "si me llaman en el momento t, entonces debería estar tan lejos de toda la animación". Por lo tanto, no puede, por ejemplo, pedir que su objeto se vuelva a dibujar con mayor frecuencia en momentos en que se mueve más rápido. Además, no sé por qué otras personas dicen que b es el valor inicial yc es el cambio; eso no es lo que dice el código fuente de jQuery.

Si quería definir su propia función de relajación para hacer lo mismo que easeInQuad, por ejemplo,

$.extend(jQuery.easing,{myfunc:function(x,t,b,c,d) { return x*x; }})

$(''#marker'').animate({left:''800px''},''slow'',''myfunc'');

Answer 2

Este complemento implementa las funciones de aceleración más comunes: http://gsgd.co.uk/sandbox/jquery/easing/

Answer 3

Miró a través del código jquery 1.11. El parámetro x parece significar ''porcentaje'', independiente del valor de tiempo inicial. Entonces, x es siempre (0 <= x <= 1) (significa coeficiente abstracto), yt es x * d (significa tiempo transcurrido).

Answer 4

Un ejemplo concreto,

Supongamos que nuestro valor inicial es 1000 y queremos llegar a 400 en 3s :

var initialValue = 1000,
    destinationValue = 400,
    amountOfChange = destinationValue - initialValue, // = -600
    duration = 3,
    elapsed;

Pasemos de 0s a 3s:

elapsed = 0
$.easing.easeInQuad(null, elapsed, initialValue, amountOfChange, duration)
//> 1000

elapsed = 1
$.easing.easeInQuad(null, elapsed, initialValue, amountOfChange, duration)
//> 933.3333333333334

elapsed = 2
$.easing.easeInQuad(null, elapsed, initialValue, amountOfChange, duration)
//> 733.3333333333334

elapsed = 3
$.easing.easeInQuad(null, elapsed, initialValue, amountOfChange, duration)
//> 400

Entonces, comparado con la sinopsis:

$.easing.easeInQuad = function (x, t, b, c, d) {...}

podemos deducir:

 x       t          b              c            d
 |       |          |              |            |
null  elapsed  initialValue  amountOfChange  duration

NB1: Una cosa importante es que el elapsed ( t ) y la duration ( d ) deben expresarse en la misma unidad, por ejemplo: aquí ''segundos'' para nosotros, pero podría ser ''ms'' o lo que sea. Esto también es cierto para initialValue ( b ) y amountOfChange ( c ), por lo que para resumir:

 x       t          b              c            d
 |       |          |              |            |
null  elapsed  initialValue  amountOfChange  duration
         ^          ^              ^            ^
         +----------|----=unit=----|------------+
                    +----=unit=----+

NB2: como @DamonJW , no sé por qué x está aquí. No aparece en las ecuaciones de Penner y no parece usarse en el resultado: siempre lo configuramos como null

Answer 5

t: hora actual, b: valor de inicio, c: cambio del valor de inicio al valor final, d: duración.

Así es como funciona: http://james.padolsey.com/demos/jquery/easing/ (curva que representa cuando se cambia una propiedad de CSS).

Así es como implementaría una muda relajación: http://www.timotheegroleau.com/Flash/experiments/easing_function_generator.htm (las matemáticas no son mi fuerte)

Usted extendería como cualquiera de estos: http://code.google.com/p/vanitytools/source/browse/trunk/website/js/custom_easing.js?spec=svn29&r=29 - ¡lo suficientemente bueno!