In diesem Beitrag werden wir TweenJS vorstellen und wie Sie es verwenden können, um ihre Animationen noch ein wenig ansprechender gestalten zu können. TweenJS ist eine „unkomplizierte, schnelle und einfach zu bedienende Tweening-Engine“ von sole. Es bietet Tweening und full blown Animationen dank Chaining. Bevor wir beginnen, empfehlen wir ihnen die untere Demo von Rod DiMarzo auszuprobieren, um ein Gefühl dafür zu bekommen, was Tweening alles sein kann.
Was ist Tweening?
Nach Wikipedia ist Tweening eine Abkürzung von Inbetweening. Ein Tween hingegen ist eine Interpolation zwischen 2 Werten, von der Quelle zum Ziel. Der Tween erzeugt einfach die benötigten Werte zwischen diesen beiden Grenzen. Der Schlüssel ist, wo sich diese Werte befinden. Dies geschieht mit der Easy-Funktion. Das Offensichtliche ist, direkt von der Quelle zum Ziel zu kommen. Dies ist die lineare Funktion, die Sie unten sehen:
Einige Tweens sind schon recht bemerkenswert wie z.B. Elastic EaseInOut oder Cubic EaseInOut. Hier wollen wir diese aber nicht weiter vertiefen.
Einbinden der Bibliothek.
Zunächst beginnen wir damit, dass wir einfach die Bibliotheksdatei in die Seite aufnehmen. Laden Sie es hier herunter.
Erstellen eines Tweens.
Lassen Sie uns sehen, wie es in der Demo verwendet wird. Ein praktischer Fall ist weniger trocken als eine theoretische Erklärung und Sie können die Demo danach optimieren. Das Ziel der Demo wird es sein, eine Kugel x Position hin und her zu bewegen, also zwischen 0 und 400 und y zwischen 300 und 50.
Zuerst definieren wir die Ausgangsposition und das Ziel. Diese Positionsvariable wird von TweenJS mit neuen Welten aktualisiert, bis sie den Sollwerten entspricht. Dann erstellen wir das Tween-Objekt, das die Arbeit für uns erledigt.
Die 2000 ganz hinten im Code bedeutet, dass der Tween 2 Sekunden dauert. Die Tween-Variable ergibt die Position.x von 0 bis 400 und die Position.y von 300 bis 50 in 2 Sekunden. Damit sich das 3D-Objekt weiterbewegt, müssen wir bei jeder Änderung benachrichtigt werden. Dies geschieht mit onUpdate(). Wenn Sie am Ende des Tweens benachrichtigt werden möchten, verwenden Sie onComplete().
Optimierung.
Im Folgenden werden wir es noch weiter anpassen. Wir werden das Tween um etwa 500 Millisekunden verzögern, damit es Spaß macht.
Natürlich können Sie auch die Easy-Funktion ändern. Wählen Sie eine beliebige unter den existenten 31 von TweenJS. Exemplarisch wähle ich hier die Funktion TWEEN.Easing.Elastic.InOut.
Jetzt ist der Tween vollständig konfiguriert, also lassen Sie es uns ausführen. Zuerst teilen wir der Bibliothek mit, dass die Konfiguration abgeschlossen ist und sie den Tween starten kann.
Dann aktualisieren wir regelmäßig die Tweens, die wir bekommen haben. Dieser Code passt gut in die Rendering-Schleife.
Nun sind Sie fertig und können Tweening nahezu überall einsetzen wie z.B. in Object Position, in Colors oder Scale, also lassen Sie ihrer Kreativität freien Lauf.
Chaining Tweens für die Animation.
Diese Demo hat eine endlose Animation, die Kugel geht bis zum Ende der Zeit hin und her. Dies wird mithilfe von Tweens realisiert. Diese werden nacheinander ausgeführt. Chain() bietet eine einfache Möglichkeit, längere, vielfältigere Animationen zu erstellen. Wir nehmen an, dass wir tweenHead und tweenBack haben.
Fazit.
Tween ist eine schöne kleine Bibliothek, die eine einfache Möglichkeit bietet, Objekte in ihren Demos zu animieren. Sie können mit den Parametern des Beispiels spielen oder sich den kommentierten Code ansehen.
Leave A Comment