c# - examples - Fórmula de animación easy-in and ease-out

jquery ease plugin

Question

Diga, si estoy haciendo la animación Ease-Out y luego Ease-In del movimiento de un objeto de la coordenada X1 a la coordenada X2 en S pasos a intervalos de tiempo iguales. ¿Pueden algunos sugerir la fórmula para calcular las coordenadas X de este movimiento?

Answer 1

En realidad, prefiero usar una función que tenga un tiempo en [0; 1] y muestra un tiempo en [0; 1], para que podamos aplicar el resultado a cualquier tipo (vector 2D, vector 3D, ...).

Solución 1

Para la aceleración / desaceleración cuadrática, la curva se separa en dos funciones según t :

• cuando t <0.5: f(t) = square(t)
• cuando t > = 0.5: f(t) = 1 - square(t - 1) + 0.5

Después de la reducción, en C, daría esto:

float InOutQuadBlend(float t)
{
if(t <= 0.5f)
return 2.0f * square(t);
t -= 0.5f;
return 2.0f * t * (1.0f - t) + 0.5;
}

Solución 2 (Bezier)

Otra curva de mezcla interesante es la dada por Bezier, que tiene la ventaja de ser bastante optimizada (no si). Puedes consultar la curva en Wolfram . Y aquí está el código C:

float BezierBlend(float t)
{
return square(t) * (3.0f - 2.0f * t);
}

Solución 3 (función paramétrica)

Editar:
Otro método propuesto por @DannyYaroslavski es la fórmula simple propuesta here .

Es paramétrico y obtiene una agradable aceleración y desaceleración de entrada / salida.

Con alpha = 2, obtienes esta función:

Que se traduce en C así:

float ParametricBlend(float t)
{
float sqt = square(t);
return sqt / (2.0f * (sqt - t) + 1.0f);
}

Answer 2

Facilidad cuadrática en donde t = tiempo, b = valor de inicio, c = cambio en valor, d = duración:

 function (float time, float startValue, float change, float duration) {
time /= duration / 2;
if (time < 1) {
return change / 2 * time * time + startValue;
}
time--;
return -change / 2 * (time * (time - 2) - 1) + startValue;
};

fuente: http://gizma.com/easing/

Answer 3

Tengo el mismo problema: quería animar mi gráfico (Ease in-out) .

Brainstorm me dio dos formas:

1) fórmula Trygonometric. En primer lugar, escribí y=(sin(x/π*10-π/2)+1)/2 , cuyo análogo es sin^2((5*x)/π)

float TrygoEase (float x) {
float y=(float)Math.pow(Math.sin(5*x/Math.PI),2);
return y;
}

2) Dos parábolas. No fue difícil. Acabo de usar y=2*x*x en [0;0.5] , y y=-2(x-1)^2+1 en [0.5;1]

float ParabolEase(float x) {
float y=2*x*x;
if(x>0.5f){
x-=1;
y=-2*x*x+1;
}
return y;
}

Utilice esta forma para x=[0;1] , lo que también devuelve y=[0;1] .

Ahora puedes comparar estos gráficos: