jQuery easing function – compreensão das variables

Como funciona a function de atenuação do jQuery? Considere por exemplo:

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

Como isso funciona? O que cada parâmetro mantém? Como eu implementaria algum alívio estúpido para uma animação?

Também como eu iria append um padrão de flexibilização para jQuery, está carregando-o em $ .easing bom o suficiente?

De acordo com a fonte do jQuery 1.6.2, o significado da function easing é o seguinte. A function é chamada em vários pontos no tempo durante a animação. Nos instantes é chamado,

  • x e t dizem qual é a hora agora, em relação ao início da animação. x é expresso como um número de ponto flutuante no intervalo [0,1], em que 0 é o início e 1 é o final. t é expresso em milissegundos desde o início da animação.
  • d é a duração da animação, conforme especificado na chamada de animação, em milissegundos.
  • b = 0 e c = 1.

A function de atenuação deve retornar um número de ponto flutuante no intervalo [0,1], chamá-lo de r . O jQuery calcula x=start+r*(end-start) , onde start e end são os valores inicial e final da propriedade, conforme especificado na chamada para animar, e define o valor da propriedade como x .

Até onde eu posso ver, o jQuery não lhe dá controle direto sobre quando a function de passo de animação é chamada, ele só permite que você diga “se eu for chamado no tempo t, então eu deveria estar longe através da animação inteira”. Portanto, você não pode, por exemplo, pedir que seu object seja redesenhado com mais freqüência nos momentos em que ele está se movendo mais rápido. Além disso, não sei por que outras pessoas dizem que b é o valor inicial e c é a mudança – não é o que o código-fonte da jQuery diz.

Se você quisesse definir sua própria function de atenuação para fazer o mesmo que easeInQuad, por exemplo,

 $.extend(jQuery.easing,{myfunc:function(x,t,b,c,d) { return x*x; }}) $('#marker').animate({left:'800px'},'slow','myfunc'); 

Um exemplo concreto

Suponha que nosso valor inicial seja 1000 e queremos atingir 400 em 3s :

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

Vamos 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 

Então, comparado com a sinopse:

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

podemos deduzir:

  xtbcd | | | | | null elapsed initialValue amountOfChange duration 

NB1: Uma coisa importante é que o elapsed ( t ) e a duration ( d ) devem ser expressos na mesma unidade, por exemplo: aqui ‘segundos’ para nós, mas poderia ser ‘ms’ ou qualquer outra coisa. Isso também é verdade para initialValue ( b ) e amountOfChange ( c ), portanto, para resumir:

  xtbcd | | | | | null elapsed initialValue amountOfChange duration ^ ^ ^ ^ +----------|----=unit=----|------------+ +----=unit=----+ 

NB2: Como @DamonJW , eu não sei porque x está aqui. Ele não aparece nas equações de Penner e não parece ser usado no resultado: deixe sempre colocá-lo em null

t: tempo atual, b: valor inicial, c: mudança do valor inicial para o valor final, d: duração.

Aqui está como funciona: http://james.padolsey.com/demos/jquery/easing/ (curva que representa quando uma propriedade CSS é alterada).

Aqui está como eu iria implementar alguns dumb easing: http://www.timotheegroleau.com/Flash/experiments/easing_function_generator.htm (matemática não é meu ponto forte)

Você estenderia como qualquer um destes: http://code.google.com/p/vanitytools/source/browse/trunk/website/js/custom_easing.js?spec=svn29&r=29 – bom o suficiente!

Este plugin implementa as funções mais comuns de facilitação: http://gsgd.co.uk/sandbox/jquery/easing/

Olhou através do código 1.11 jquery. O parâmetro x parece significar ‘por cento’, independente do valor inicial do tempo. Portanto, x é sempre (0 <= x <= 1) (significa coeficiente abstrato) e t é x * d (significa o tempo decorrido).