Was sind Beschleunigungsfunktionen?

15

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

Bildbeschreibung hier eingeben

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.

Daniel Kaplan
quelle
2
Ein wichtiger verwandter Begriff ist Tweening. Sehen Sie auch dieses Video unter youtube.com/watch?v=Fy0aCDmgnxg, in dem Sie sehen können, wie enorm der Effekt von Tweening- und Beschleunigungsfunktionen ist!
Roy T.

Antworten:

13

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.

Ingenieur
quelle
1
BTW Easing ist die zweite Folie in der GreenSock-Verknüpfung. Verwenden Sie das Dropdown-Menü auf der Folie, um verschiedene Beschleunigungsfunktionen zu testen.
Jhocking
8

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:

Bildbeschreibung hier eingeben

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:

Bildbeschreibung hier eingeben

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

Vaughan Hilts
quelle
@tieTYT Ich habe eine Erklärung für Sie hinzugefügt. Welche Art von Anwendungsbeispiel suchen Sie?
Vaughan Hilts
Siehe mein Update. Wenn Sie erklären können, wie die Funktionen verwendet werden, die nur kals Parameter verwendet werden, akzeptiere ich diese Antwort. Vielen Dank
Daniel Kaplan
Diese Funktionen nehmen nicht nur k. Die Anfangsfunktionen verwenden diese, die dann an kompliziertere weitergegeben werden. Interessieren Sie sich nur für die Implementierung von Phasern?
Vaughan Hilts
Es sieht so aus, als ob sie alle kzu mir nehmen. Wo siehst du sonst
Daniel Kaplan
Für alle Beschleunigungsfunktionen (mit Ausnahme von Tweens im Shake-Stil) sind mindestens drei Parameter erforderlich. Zeit (normalerweise ein Verhältnis zwischen 0 und 1), ein Startwert und ein Endwert. Manchmal wird die Zeit in zwei Parameter aufgeteilt, z. B. die aktuelle Zeit und die Erleichterungsdauer. Wenn Start- und Endwerte bereits definiert wurden (abhängig von Ihrem Beschleunigungssystem / Ihrer Bibliothek), müssen Sie möglicherweise nur die Zeit verstreichen lassen, aber ich kenne selbst keine. Wenn ich zum Beispiel den Wert zwischen 10 und 30 bei 75% des Weges (3 Sekunden in 4 Sekunden) haben möchte, muss ich die 10 und 30 und auch die 75% (Zeit / Dauer) übergeben.
Doug.McFarlane
2

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.

ino
quelle
Oh, jetzt hast du deine Antwort geändert, um meine zu reflektieren! Sehr gut zu sehen, dass du lernst.
Ingenieur
Diese Antwort scheint eher eine Referenz als ein Tutorial zu sein. Ich brauche Beispiele zum besseren Verständnis
Daniel Kaplan
@NickWiggill nein, ich habe deine Antwort bis jetzt noch nicht gesehen.
ino