Performante Animationen mit KUTE.js Teil 4, Animieren von Text

Im zweiten Tutorial dieser Serie haben Sie gelernt, wie Sie verschiedene CSS-Eigenschaften der Elemente auf einer Webseite mithilfe von KUTE.js animieren. Sie haben gelernt, wie Sie alle Transformationseigenschaften sowie Eigenschaften wie animieren Grenzradius und Randfarbe. Sie können das CSS-Plugin auch verwenden, um CSS-Eigenschaften wie zu animieren Schriftgröße, Zeilenhöhe, Buchstaben-Abstand, und Wortabstand.

KUTE.js verfügt auch über ein Text-Plugin, mit dem Sie den Text in verschiedenen Elementen animieren können, indem Sie eine Zahl wie in einem Countdown erhöhen oder verringern oder eine Zeichenfolge zeichenweise schreiben.

In diesem Lernprogramm erfahren Sie, wie Sie den Text in verschiedenen Elementen einer Webseite mithilfe der CSS- und Text-Plugins in KUTE.js animieren können.

Animieren von CSS-Texteigenschaften

Wie bereits erwähnt, können Sie das CSS-Plugin KUTE.js verwenden, um vier verschiedene textbezogene CSS-Eigenschaften zu animieren. Diese Eigenschaften sind Schriftgröße, Zeilenhöhe, Buchstaben-Abstand, und Wortabstand. Wir werden auch einige Eigenschaften der im ersten Tutorial behandelten Core Engine verwenden, um einzelne Buchstaben zu animieren. Mal sehen, wie wir all diese Konzepte zusammen nutzen können, um das Vibrieren zu erzeugen HALLO Text in der folgenden Demo.

Hier ist der Code, der zum Erstellen der obigen Animation verwendet wurde:

var theLetters = document.querySelectorAll ("span"); var h = document.querySelector (". h"); var e = document.querySelector (". e"); var la = document.querySelector (". la"); var lb = document.querySelector (". lb"); var o = document.querySelector (". o"); var startButton = document.querySelector (". start"); var animateColor = KUTE.allFromTo (theLetters, color: 'white', color: 'red', offset: 200, Dauer: 50); var animateFontSize = KUTE.allFromTo (theLetters, fontSize: '2em', fontSize: '4em', offset: 100, Dauer: 200, wiederholen: 10, yoyo: true); var animateSkewing = KUTE.allTo (theLetters, skewX: -15, offset: 200, Dauer: 200); var animateH = KUTE.to (h, color: '# 009688'); var animateE = KUTE.to (e, translateY: -40, color: '# E91E63'); var animateLA = KUTE.to (la, color: '# 8BC34A'); var animateLB = KUTE.to (lb, translateY: 20, color: '# FFC107'); var animateO = KUTE.to (o, color: '# FF5722'); var lettersSqueezed = KUTE.allTo (theLetters, letterSpacing: '-15px', offset: 0, Dauer: 200); animateColor.chain (animateFontSize); animateFontSize.chain (animateSkewing); animateSkewing.chain (animateH, animateE, animateLA, animateLB, animateO); animateE.chain (lettersSqueezed); startButton.addEventListener ("click", function () animateColor.start ();, false);

Jeder Buchstabe des Wortes ist in ein geschrieben Spanne tag und hat seine eigene eindeutige Klasse. Das erste Tween animiert die Farbe aller Buchstaben von Weiß bis Rot mit einem Versatz von 200 ms. Dies ist auch die erste Animation, die nach dem Klicken auf abgespielt wird Animation starten. Das animateFontSize Tween wurde angekettet animateColor. Auf diese Weise die Schriftgröße Die Animation beginnt, sobald die Farbanimation endet. 

Möglicherweise haben Sie bemerkt, dass ich zwei genannte Attribute verwendet habe wiederholen und Yoyo um das Verhalten der Animation zu steuern. Das Yoyo Attribut wird verwendet, um die Animation, die gerade wiederholt abgespielt wird, umzukehren. Dadurch können plötzliche Sprünge in den Werten der verschiedenen Eigenschaften während der Animation vermieden und glatt dargestellt werden.

Das Schriftgröße Animation wurde mit angekettet animateSkewing, was alle Buchstaben um -15 Grad verzerrt. Das skewX und schief Eigenschaften stehen in der Kern-Engine selbst zur Verfügung.

Alle Tweens zum Animieren der Farbe verschiedener Buchstaben wurden angekettet animateSkewing auf einmal. Auf diese Weise können Sie sicherstellen, dass alle verketteten Farbanimationen abgespielt werden, sobald die Skew-Animation beendet ist. Endlich, das lettersSqueezed Tween reduziert den Abstand zwischen verschiedenen Buchstaben um 15 px.

Sie können interessantere Effekte erstellen, indem Sie verschiedene Kombinationen von Eigenschaften verwenden.

Zahlen animieren

Sie können Zahlen auch in KUTE.js animieren. Sie müssen jedoch ein zusätzliches Text-Plugin hinzufügen, um die Animation zu erstellen. 

Das Animieren von Zahlen ist eigentlich sehr einfach. Sie müssen nur den Selektor angeben, in dem die animierenden Zahlen angezeigt werden sollen, sowie die endgültige Nummer, an der die Animation enden soll. 

Hier ist ein einfaches Beispiel, das die Gesamtzahl der Flughäfen in den USA im Jahr 2016 mithilfe von Animationen zeigt.

var usa = document.querySelector (". usa"); var startButton = document.querySelector (". start"); var animateUSA = KUTE.to (usa, number: 19536); startButton.addEventListener ("click", function () animateUSA.start ();, false); 

Sie können auch die üblichen Tween-Optionen wie anwenden Dauer, wiederholen, und verzögern um das Verhalten der Animation anzupassen. Der Code, den wir gerade geschrieben haben, führt zu folgender Animation:

Text für Zeichen schreiben

Dies ist ein sehr beliebter Effekt, den Sie auf etlichen Websites finden können. Mit dem Text-Plugin KUTE.js können Sie den neuen Satz angeben, der den ursprünglichen Satz einzeln ersetzen soll. 

Bevor die ursprünglichen Zeichen durch den endgültigen Wert ersetzt werden, werden die zufälligen Zeichen wie die Zahlen, die Sie gerade gesehen haben, animiert. Die eingebettete CodePen-Demo sollte es klarer machen:

Hier ist der Code, den Sie schreiben müssen, um die obige Animation zu erstellen:

var animateHeading = KUTE.to (Überschrift, text: '70% Surface of Earth ist mit Wasser bedeckt. ', duration: 5000); startButton.addEventListener ("click", function () animateHeading.start ();, false);

Die Charakteranimation für den gesamten Satz ist innerhalb von 5 Sekunden beendet. Wie Sie vielleicht bemerkt haben, müssen die ersten und letzten Sätze nicht dieselbe Anzahl von Zeichen haben. Dies gibt uns viel Freiheit bei der Einstellung des Wertes von Text Parameter.

Sie können auch HTML-Tags in den Wert von einschließen Text Parameter und verwenden Sie dann CSS, um das Aussehen des gerade animierten Textes zu ändern.

var animateHeading = KUTE.to (Überschrift, text: '70% SURFACE OF ERDE Wird mit abgedeckt WASSER.', duration: 10000, textChars:' upper ');

Es wird eine Verzögerung beim Erscheinen von geben Erde nach dem von ist schon erschienen. Dies geschieht, weil das Plugin auch schreibt mit derselben Zeichenanimation, aber keiner dieser Zeichen ist tatsächlich für den Benutzer sichtbar. Die Verzögerung kann aufgrund Ihrer Präferenzen möglicherweise nicht wünschenswert sein.

Bei den Zwischenzeichen, die während der Animation angezeigt werden, handelt es sich standardmäßig um alphabetische Kleinbuchstaben. Dies kann ein Problem sein, wenn die Zeichen, die Sie animieren möchten, aus Großbuchstaben oder Ziffern bestehen. Welche Zwischenzeichen für die Animation verwendet werden, wird durch den Wert von bestimmt textChars Parameter. Es akzeptiert sechs verschiedene Werte:

• Alpha: In diesem Fall sind die Zwischenzeichen Kleinbuchstaben.
• Oberer, höher: In diesem Fall sind die Zwischenzeichen Großbuchstaben.
• numerisch: In diesem Fall werden numerische Zeichen für die Animation verwendet. Dies unterscheidet sich vom Animieren einer Zahl, da die Werte nicht sequentiell ansteigen.
• Symbole: In diesem Fall verwendet das Plugin Zeichen wie #,% und $ für die Animationen.
• alles: Sie können diesen Wert verwenden, wenn die Zwischenzeichen eine Mischung aus alphabetischen, numerischen und Symbolen sein sollen.
• Wenn nichts anderes für Sie funktioniert, gibt Ihnen KUTE.js die Möglichkeit, Ihre eigene benutzerdefinierte Liste von Zeichen anzugeben, die während der Animation verwendet werden sollen.

Das folgende Beispiel zeigt, wie Sie Text in einer Überschrift mit Zwischenzeichen in Großbuchstaben animieren können.

Abschließende Gedanken

In diesem Lernprogramm haben Sie gelernt, wie Sie die CSS- und Text-Plugins in KUTE.js verwenden, um den Text in einem Element zu animieren. Wenn Sie das Erscheinungsbild des Texts animieren möchten, müssen Sie das CSS-Plugin verwenden. Dadurch können Sie Eigenschaften wie verwenden Schriftgröße, Buchstaben-Abstand, usw. Wenn Sie die tatsächlichen Zeichen in einem Element ändern möchten, müssen Sie das Text-Plugin verwenden.

Wenn Sie nach zusätzlichen JavaScript-Ressourcen suchen, um zu studieren oder in Ihrer Arbeit zu verwenden, schauen Sie sich an, was wir auf Envato Market zur Verfügung haben.

Ich hoffe, Sie haben in diesem Tutorial etwas Neues gelernt. Wenn Sie Fragen haben, teilen Sie mir dies bitte in den Kommentaren mit.