web-dev-qa-db-de.com

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?

27
ahmd0

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/

31
Toad

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:

curve

Was in C so übersetzt:

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

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:

 enter image description here

0
Egor Randomize