Explicando as equações de Penner

Entendendo easing

Primeiro, uma rápida explicação sobre a mais popular classe de easing:

Linear, Quad, Cubic, Quart, (Quint ou Strong), são easing que fornecem inércia previsível, o que quer dizer que todos os outros são variações destes (i.e, easeInQuad, easeOutQuad, easeInOutQuint, …), e, quase idênticos também. A única diferença entre eles é o número de vezes que a alteração é multiplicado por si só.

Vamos dizer que cada um desses tem uma "força" e vamos enumera-las, e, cada número representará a quantidade de vezes que a multiplicação é feita, uma vez para cada “poder” de ease, então teríamos:

Linear = 1 (qualquer número à potência de um é ele mesmo, por isso, em 10% do caminho através do tween, a propriedade terá adicionado 10% do valor total da diferença entre o seu início e sua duração).
Quad = 2
Cubic = 3
Quart = 4
Quint ou Strong = 5

E, sim, Quint e Strong tem a mesma força/poder de multiplicação, de fato são a mesma coisa.

Expo utiliza uma potência de 10, mas aplica-se algumas outras verificações, e por isso não o listei com os 6 acima, bem como algumas easing mais exóticas geralmente aplicando um método matemático ligeiramente diferente. O Sine, por exemplo, aplica cosseno para easeIn e seno para easeOut criando uma variação em uma das extremidades (no início para easeIn e no final para easeOut) e achata a curva na outra extremidade. Back, Bounce e Elastic já tem algoritmos mais complexos que merecem outro post para explica-los detalhadamente.

Abstraindo

Há quatro parâmetros que a primeira vista me deixaram confuso e acho que deva saber ao ver os métodos das classes de easing.

t: currentTime — É a hora atual (ou posição) da interpolação. Isto pode ser frames, steps, segundos, milissegundos, ou o que quer que queira (desde que a unidade de medida que escolher aqui seja a mesma da duração (d))

b: startValue — É o valor inicial da propriedade (geralmente onde começa a interpolação).

c: changeInValue — É a mudança entre o valor de início e destino do objeto.

d: duration — É o tempo total da interpolação.

Esses 4 parâmetros naturalmente estão presentes nos métodos de easing, pois, normalmente é tudo que se precisa de informação.

Vamos considerar este método por um instante:

Math.linearTween = function (t, b, c, d) {
    	return c * t / d + b;
};

Vamos dizer então, que você está interpolando um objeto horizontalmente na tela, mas antes, vamos indicar alguns fatos sobre esta ocorrência:

Fato 1 — Seu objeto está no eixo X na posição 50 de seu browser, ou seja, a 50 pixels da borda de sua esquerda na tela

Fato 2— Você quer envia-lo para a posição 200 deste mesmo eixo

Fato 3— Você quer que isso aconteça em um segundo

Fato 4— Caramba, você quer uma animação!

No início da interpolação, os valores passados para a função Math.linearTween, seria:

t = 0 (estamos apenas começando, portanto, 0 segundo se passaram)
b = 50 (o valor inicial do objeto a ser interpolado)
c = 200–50 (a mudança no valor — de modo que o valor de destino de 200 menos o valor inicial de 50 é igual a 150)
d = 1 (duração total de 1 segundo)

Então, usando a matemática linear de Math.linearTween:

c * t / d + b;

A matemática é a mesma, mas, particularmente prefiro olhar para ela, assim:

c * (t / d) + b;

A porção entre parênteses é a percentagem de acabamento, como em um preloader que usa a regra de três, então temos:

tempo percorrido (t), dividido pelo tempo total (d).

Logo, se 30ms se passaram, e a duração total é de 50ms, 30/50 = 0,6, ou 60% do caminho através da interpolação. Este número que executa o tween (pois é o único variável na expressão), e tudo o mais pode ser calculado a partir dele.

Mas, voltando ao exemplo, como afirmado acima, nós sabemos que, no início da interpolação, c = 200–d ou 150, t = 0, d = 1 e b = 50, então temos:

150 * (0 / 1) + 50 = 50

Neste momento o nosso objeto está ainda em 0% do caminho de sua interpolação, ou seja, sem alteração ainda, pois, 0/1 = 0, ou 0%.

Agora vamos ver o que acontece no meio do tween, digamos que estamos exatamente na metade do caminho percorrido até chegarmos a 200px, ou seja, estamos a 125 pixels da borda de sua esquerda na tela, logo, temos:

t = 0,5 (a meio do tween, assim 0,5 de 1 segundo, ou 50% de 1 segundo)
b = 50 (o valor inicial do objeto a ser interpolado)
c = 150 (a mudança no valor — de modo que o valor de destino de 200 menos o valor inicial de 50 que é igual a 150)
d = 1 (duração total de 1 segundo)

Como podemos ver, somente o parâmetro t, mudou. A fórmula será exatamente a mesma, mas agora com o valor t, atualizado:

150 * (0,5 / 1) + 50 = 125

é certamente o meio do caminho entre 50 (início) e 200 (final), e mostra um aumento de 75 pixels a partir do valor original que era 50.

O tween altera a propriedade, em relação ao valor inicial, por isso vamos sempre somar b à expressão:

150 * (0,5 / 1) + b = 125

E nós sabemos também que t / d representa a porcentagem, assim 0,5 / 1 = 0,5, ou 50%. Dito isso falta explicar o c, que é a mudança no valor, mas esse não tem segredo, pois como dito anteriormente, é o que varia a expressão e também a diferença entre o ponto A e o ponto B da animação.

Ok, esse é minha primeira postagem (espero que de muitas), provavelmente não me fiz claro o bastante, então qualquer dúvida/sugestão/crítica usem os comentários, responderei tão logo que consiga. =)