Interpolation mit kubischen Bezier-Kurven

Ich versuche, eine Interpolationsfunktion für eine Animationsbibliothek zu erstellen, um einen Tweening-Effekt zwischen Frames zu erzielen.

Ich möchte, dass dies mit Bezier-Kurven funktioniert. Ich habe eine jsFiddle ( hier ) meiner bisherigen Fortschritte erstellt.

Ich versuche, mit dieser Bezier-Definition ein lineares Tween zu erstellen:

{
    p0: new Vector(0,0), //Start point
    p1: new Vector(0,0), //Control point 1
    p2: new Vector(1,1), //Control point 2
    p3: new Vector(1,1)  //End point
}

Ich habe die Interpolationsfunktion aus diesem Tutorial implementiert .

var u = 1 - t;
var tt = t*t;
var uu = u*u;
var uuu = uu * u;
var ttt = tt * t;

var p = p0.multiply(uuu);
p = p.add(p1.multiply(3 * uu * t));
p = p.add(p2.multiply(3 * u * tt));
p = p.add(p3.multiply(ttt));

Das Problem, das ich habe, ist, dass die Animation beim Ausführen der Funktion nicht linear erscheint, sondern eher wie "Easy-In-Out".

Idealerweise möchte ich, dass die lineare Animation genauso funktioniert wie dieser CSS-Übergang .

Kann jemand sehen, warum es nicht linear animiert?

Nach dem Spielen mit dieser Funktion mehr. Mir ist klar, dass die Bezier-Kontrollpunkte ähnlich wie Magnete wirken.

Wenn ich die Kontrollpunkte so verteile, dass sie entlang einer geraden Linie mit gleichem Abstand zwischen ihnen positioniert sind, funktioniert die Animation wie erwartet

{
    p0: new Vector(0,0), //Start point
    p1: new Vector(.333,.333), //Control point 1
    p2: new Vector(.666,.666), //Control point 2
    p3: new Vector(1,1)  //End point
}

Normalerweise löse ich das mit Catmull-Rom-Splines. Anstatt Kontrollpunkte zu verwenden, geben Sie einfach die beiden Punkte an, zwischen denen Sie interpolieren möchten, sowie einen "vorherigen" Punkt und einen "nächsten" Punkt. Wenn die 4 Punkte alle auf derselben Linie liegen und gleichmäßig verteilt sind, ist die Interpolation linear.

Im obigen Bild gibt es vier Punkte p0, p1, p2 und p3. Die folgende Zeile des C ++ - Codes interpoliert zwischen p1 und p2, wobei t im Bereich [0 ... 1] liegt:

return p1 + 0.5*t*(p2-p0 + t*(2*p0-5*p1+4*p2-p3 + t*(3*(p1-p2)+p3-p0)));

Sie können jede Art von Werttyp interpolieren, solange der Typ die Addition und Multiplikation mit einem Skalar unterstützt.

Wenn die Werte nicht auf einer Linie liegen oder nicht gleichmäßig verteilt sind, erzeugt die Catmull-Rom-Interpolation eine glatte Kurve. Die Interpolation ist nicht linear:

Wenn es keinen "vorherigen" oder "nächsten" Punkt gibt (z. B. am Anfang oder Ende einer Reihe von Kurvensegmenten), verwenden Sie die folgenden Gleichungen:

p0 = 2 * p1 - p2;
p3 = 2 * p2 - p1;

Bezier-Kurven dienen von Natur aus dazu, glatte Kurven zu erstellen. Die lineare Interpolation ist einfacher. Um zwei Punkte linear zu interpolieren, können Sie einfach die folgende Formel für die Zeit t in [0,1] anwenden:

interpolatedPoint = startPoint * (1 - t) + endPoint * t

Wenn t = 0 ist, ist der interpolierte Punkt genau gleich dem Startpunkt. In ähnlicher Weise ist der interpolierte Punkt genau gleich dem Endpunkt, wenn t = 1 ist. Wenn t zwischen 0 und 1 liegt, liegt es irgendwo auf der Linie zwischen den beiden Punkten.

Ich habe Ihre jsfiddle gegabelt und modifiziert, um Folgendes zu verdeutlichen: http://jsfiddle.net/kevinAlbs/3em6br3b/1/

Warum verwenden Sie Bezierkurven für eine lineare Interpolation? Sie können einfach eine lineare Interpolation verwenden, um eine lineare Interpolation durchzuführen, und überhaupt keine Kurven verwenden.

Wenn der Grund dafür ist, dass Sie ein allgemeineres kurvenbasiertes Interpolationssystem wünschen und versuchen, es dazu zu bringen, eine lineare Interpolation für einen bestimmten Anwendungsfall durchzuführen, gibt es einen Weg.

Grundsätzlich müssen die Kontrollpunkte Punkte auf einer Linie sein. Zum Beispiel würden die Kontrollpunkte 0, 0,333, 0,666, 1,0 eine lineare Interpolation zwischen 0 und 1 ergeben, wenn Sie dazu eine kubische Bezierkurve verwenden.

Wenn Sie jedoch eine lineare Interpolation wünschen, gibt es keinen Grund, eine Kurve zu verwenden.