Was sind Beschleunigungsfunktionen?

Ich habe diese coole Website für die Spieleentwicklung gefunden und sie enthält eine Liste mit Beschleunigungsfunktionen:

Die Site enthält zwar eine Beschreibung, wofür sie gedacht sind, geht mir jedoch über den Kopf. Was sind Beschleunigungsfunktionen und wofür werden sie verwendet?

Aktualisieren

Ich habe ein besseres Beispiel für die Funktionen selbst aus dem Quellcode von Phaser.io gefunden . Diese Funktionen sind viel einfacher, als die Antworten hier vermuten lassen. Sie akzeptieren nur einen Parameter k. Als Teil der Antwort würde ich gerne wissen, wie man diese verwendet.

Lockerungsfunktionen werden für die Interpolation verwendet, typischerweise (aber nicht notwendigerweise) in Animations- / Kinematikbewegungen. Die lineare Interpolation (Lerp) ist etwas, von dem Sie vielleicht schon gehört haben. Nehmen wir an, Sie ziehen ein Smiley-Gesicht von einer Ecke des Bildschirms zur nächsten (ähnlich wie in Ihrem Bild). Dies bedeutet, dass sich der Smiley mit einer konstanten Geschwindigkeit von Punkt A nach Punkt B bewegt. Wenn Sie dies auf die Bewegung eines Gliedes anwenden, würde dies sehr roboterhaft und unnatürlich aussehen - die von Robotern verwendeten Aktuatoren / Servos verhalten sich auf diese Weise. Offensichtlich bewegen sich menschliche Gliedmaßen auf eine ganz andere Art und Weise. Und die meisten Bewegungen, die Sie in der Natur sehen, weisen interessante Bewegungskurven auf, nicht die konstante, unveränderliche Geschwindigkeit, die bei der linearen Interpolation beobachtet wird.

Beschleunigung eingeben. Lockerung bedeutet, dass die Geschwindigkeit nicht konstant ist. Das Ergebnis ist ein realistischeres Aussehen. Beobachten Sie Menschen, beobachten Sie verschiedene Tiere, beobachten Sie Pflanzen, die sich im Wind biegen, oder sogar, wie der fallende Regen an einem böigen Tag die Richtung ändert. Beobachte die Geschwindigkeit eines Balls, während du ihn in die Luft wirfst und wieder zurückkommst. Beobachten Sie die Bewegung einer Gitarrensaite beim Zupfen. Jede dieser Bewegungsarten hat eine andere Kurve, die die Geschwindigkeit beschreibt.

Ich schlage vor, Sie spielen online mit GSAP von GreenSock , um ein Gefühl dafür zu bekommen, was die verschiedenen Arten von Beschleunigungskurven in Bezug auf die Bewegung bewirken. Es ist eines dieser Dinge, bei denen es Zeit und Übung erfordert, eine bestimmte benannte Kurve auf die Art von Bewegung abzubilden, von der Sie sich vorstellen, dass Sie sie möchten. Aber sobald Sie die Grundlagen verstanden haben, werden Sie eine Menge Spaß haben.

PS Wie gesagt, Beschleunigung wird nicht nur für Animationen verwendet. Es kann zum Schwenken des Klangs verwendet werden, um die Skelettbewegung auf der Ebene der Logik / des Modells zu bewirken, oder für alles andere, was Sie sich vorstellen können, ist möglicherweise eine spezifische, sanfte Variation über die Zeit erforderlich.

Mit einer Beschleunigungsfunktion können Sie Werte über ein bestimmtes Intervall von einem Wert zum anderen interpolieren. Dies wird als "Beschleunigungsfunktion" bezeichnet. Hierbei handelt es sich um Funktionen, die so konzipiert sind, dass sie einen Wert annehmen und zu einem bestimmten Zeitpunkt im Intervall den Wert ausgeben.

Dies lässt sich am besten anhand eines Codeausschnitts erklären:

// simple linear tweening - no easing, no acceleration


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

@t ist die aktuelle Zeit (oder Position) des Tweens. Dies können Sekunden oder Frames, Schritte, Sekunden, ms sein, egal wie lange die Einheit für die Gesamtzeit verwendet wird

@b ist der Anfangswert der Eigenschaft.

@c ist die Änderung zwischen dem Anfangs- und dem Zielwert der Eigenschaft.

@d ist die Gesamtzeit des Tweens.

Danke, http://upshots.org/actionscript/jsas-understanding-easing

Dies ist die Definition einer linearen Beschleunigungsfunktion. Wenn wir dies über die Zeit in Form von 't' grafisch darstellen, erhalten wir lediglich einen linearen Graphen.

Okay, cool. Wofür können wir sie verwenden?

Jedes Mal, wenn Sie einen Anfang und ein Ende im Sinn haben und diese animieren möchten, können Sie eine "Tween" - oder "Beschleunigungsfunktion" verwenden.

Zum Beispiel ist hier ein GIF, das ich gerade von Angry Birds aufgenommen habe:

Beachten Sie, dass das Menü bis zu dem Punkt auf dem Bildschirm herausgleitet, aber langsam stoppt? Dies ist auf eine Beschleunigungsfunktion zurückzuführen, die einrastet. Sie können diese überall im Web sehen. Wenn dies eine lineare Leichtigkeit wäre, wäre es überall gleich.

Musik?

Sicher! Wenn wir den Wert unseres aktuellen Soundtrack-Werts über eine Zeitspanne von 1 Sekunde zwischen diesem und 0 interpolieren, wird unsere Lautstärke über einen Zeitraum von einer Sekunde langsam ausgeblendet.

Objekte begrenzen

Es gibt auch Funktionen, die das Bouncen ermöglichen (siehe: http://easings.net/#easeOutBounce ), die auf einem Sprite ohne physikalische Systeme solche Effekte erzeugen können:

Sie können weitere Informationen im Web finden, indem Sie nach Tweening suchen.

Erleichterungsfunktionen dienen dazu, einen Wert während eines Zeitraums von einer Startnummer zu einer Endnummer zu ändern.

Sie verwenden diesen Wert, um eine Eigenschaft eines Objekts in Ihrem Spiel zu animieren, z. B. Position, Drehung, Skalierung, Änderung der Farben und andere Eigenschaften, die einen Wert verwenden.

Die verschiedenen Beschleunigungsfunktionen bestimmen das "Gefühl" der Animation oder wie sich der Wert im Laufe der Zeit ändert.

Auf der Website, die Sie gepostet haben, zeigt das Diagramm den Wert, der sich über die Zeit von Anfang bis Ende ändert. Dies bedeutet also nicht, dass das Objekt, das Sie animieren, dem Pfad des Balls im Diagramm folgt.