Einfache und einfache Animationsformel
Angenommen, ich mache die Ease-Out- und dann die Ease-In-Animation der Bewegung eines Objekts von der X1-Koordinate zur X2-Koordinate über S-Schritte in gleichen Zeitintervallen. Können einige die Formel vorschlagen, um die X-Koordinaten dieser Bewegung zu berechnen?
Quadratische Erleichterung mit t = Zeit, b = Startwert, c = Wertänderung, d = Dauer:
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;
};
quelle: http://gizma.com/easing/
Eigentlich würde ich eher eine Funktion verwenden, die eine Zeit in [0; 1] und geben Sie eine Zeit in [0; 1], damit wir das Ergebnis auf jeden Typ anwenden können (2D-Vektor, 3D-Vektor, ...).
Lösung 1
Bei der quadratischen Beschleunigung in/out wird die Kurve in Abhängigkeit von t in zwei Funktionen unterteilt:
- wenn
t<0,5:f(t) = square(t) - wenn
t> = 0.5:f(t) = 1 - square(t - 1) + 0.5
Nach der Reduktion in C würde dies folgendes ergeben:
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;
}
Lösung 2 (Bezier)
Eine andere interessante Mischkurve ist die von Bezier gegebene, die den Vorteil hat, ziemlich optimiert zu sein (kein Wenn). Sie können die Kurve auf Wolfram überprüfen. Und hier ist der C-Code:
float BezierBlend(float t)
{
return square(t) * (3.0f - 2.0f * t);
}
Lösung 3 (parametrische Funktion)
Bearbeiten:
Eine andere von @DannyYaroslavski vorgeschlagene Methode ist die einfache Formel hier .
Es ist parametrisch und erhält eine Nizza Ein-/Aus-Beschleunigung und Verzögerung.
Mit alpha = 2 erhalten Sie diese Funktion:
Was in C so übersetzt:
float ParametricBlend(float t)
{
float sqt = square(t);
return sqt / (2.0f * (sqt - t) + 1.0f);
}
Ich hatte dasselbe Problem: Ich wollte mein Diagramm (Ease in-out) animieren.
Brainstorm gab mir zwei Wege:
1) Trygonometrische Formel. Zunächst schrieb ich y=(sin(x/π*10-π/2)+1)/2, welches Analog sin^2((5*x)/π) ist.
float TrygoEase (float x) {
float y=(float)Math.pow(Math.sin(5*x/Math.PI),2);
return y;
}
2) Zwei Parabeln. Es war nicht schwer. Ich habe gerade y=2*x*x für [0;0.5] und y=-2(x-1)^2+1 für [0.5;1] verwendet.
float ParabolEase(float x) {
float y=2*x*x;
if(x>0.5f){
x-=1;
y=-2*x*x+1;
}
return y;
}
Verwenden Sie diese Möglichkeiten für x=[0;1], was auch y=[0;1] zurückgibt.
Jetzt können Sie diese Diagramme vergleichen:
