Effiziente Textanimation mit KUTE.js: Teil 4, Textanimation

Im zweiten Tutorial dieser Serie haben Sie gelernt, wie Sie mit KUTE.js verschiedene CSS-Eigenschaften von Elementen auf einer Webseite animieren. Sie haben gelernt, wie man Immobilien für alle umwandelt und border-radius 和 border-color 等属性设置动画。您还可以使用 CSS 插件对 CSS 属性进行动画处理，例如 font-size、line-height、letter-spacing 和 字间距.

KUTE.js verfügt außerdem über ein Text-Plugin, mit dem Sie Text in verschiedenen Elementen animieren können, indem Sie Zahlen wie Countdowns erhöhen oder verringern oder Zeichenfolgen Zeichen für Zeichen schreiben.

In diesem Tutorial erfahren Sie, wie Sie mithilfe von CSS und Text-Plugins in KUTE.js Text in verschiedenen Elementen auf einer Webseite animieren.

Animierte CSS-Texteigenschaften

Wie ich bereits erwähnt habe, können Sie mit dem CSS-Plugin KUTE.js vier verschiedene textbezogene CSS-Eigenschaften animieren. Diese Eigenschaften sind font-size、line-height、letter-spacing 和 word-spacing. Wir animieren auch einzelne Buchstaben mithilfe einiger Eigenschaften der Kern-Engine, die im ersten Tutorial besprochen wurden. Sehen wir uns in der Demo unten an, wie all diese Konzepte zusammen verwendet werden können, um einen vibrierenden HALLO-Text zu erstellen.

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, duration: 50}
);

var animateFontSize = KUTE.allFromTo(
  theLetters,
  { fontSize: '2em' },
  { fontSize: '4em' },
  { offset: 100, duration: 200, repeat: 10, yoyo: true}
);

var animateSkewing = KUTE.allTo(
  theLetters,
  { skewX: -15},
  { offset: 200, duration: 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, duration: 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 eines Wortes ist in einem span-Tag enthalten und hat seine eigene eindeutige Klasse. Das erste Tween ändert die Farbe aller Buchstaben mit einem Versatz von 200 Millisekunden von Weiß nach Rot. Dies ist auch die erste Animation, die nach dem Klicken auf „Animation starten“ abgespielt wird. Das Tween animateFontSize ist mit animateColor verknüpft. Sobald die Farbanimation beendet ist, beginnt auf diese Weise die font-size-Animation. span 标记内，并具有自己独特的类。第一个补间动画将所有字母的颜色从白色变为红色，偏移量为 200 毫秒。这也是点击开始动画后播放的第一个动画。 animateFontSize 补间已链接到 animateColor。这样，一旦彩色动画结束，font-size

Sie haben vielleicht bemerkt, dass ich zwei Eigenschaften namens

verwendet habe, um die Animation umzukehren, die sich gerade wiederholt. Dadurch werden plötzliche Sprünge in den Werten verschiedener Eigenschaften während der Animation vermieden, sodass diese flüssig erscheinen. repeat 和 yoyo 的属性来控制动画的行为。 yoyo

Eigenschaften sind in der Kern-Engine selbst verfügbar. font-size 动画已与 animateSkewing 链接，它将所有字母倾斜 -15 度。 skewX 和 skewY

Alle Tweens, die zum Animieren der Farben verschiedener Buchstaben verwendet werden, sind jetzt verknüpft mit

Der Tweener verringert den Abstand zwischen verschiedenen Buchstaben um 15 Pixel. animateSkewing。这样，您可以确保倾斜动画结束后所有链接的颜色动画都开始播放。最后，lettersSqueezed

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

Animierte Zahlen

Sie können Zahlen auch in KUTE.js animieren. Sie müssen jedoch zusätzliche Text-Plugins einbinden, um Animationen zu erstellen.

Der Prozess der digitalen Animation ist eigentlich sehr einfach. Sie müssen lediglich den Selektor angeben, bei dem die Animationsnummer angezeigt werden soll, und die endgültige Nummer, bei der die Animation enden soll.

Dies ist ein einfaches Beispiel, bei dem eine Animation verwendet wird, um die Gesamtzahl der US-Flughäfen im Jahr 2016 anzuzeigen.

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 gängige Tweening-Optionen wie

anwenden, um das Verhalten Ihrer Animation anzupassen. Der Code, den wir gerade geschrieben haben, erzeugt die folgende Animation: duration、repeat 和 delay

Schreiben Sie Text Zeichen für Zeichen

Dies ist ein sehr beliebter Effekt, den Sie auf vielen Websites finden können. Mit dem KUTE.js-Text-Plugin können Sie neue Sätze angeben, die die ursprünglichen Sätze zeichenweise ersetzen.

Die zufälligen Zeichen werden wie im Zahlenbeispiel, das Sie gerade gesehen haben, animiert, bevor das Anfangszeichen durch den Endwert ersetzt wird. 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(
  heading,
  { text: '70% Surface of Earth is Covered with Water.' },
  { duration: 5000}
);

startButton.addEventListener(
  "click",
  function() {
    animateHeading.start();
  },
  false
);

整个句子的人物动画在5秒内完成。您可能已经注意到，首句和末句不需要具有相同数量的字符。这给我们在设置 text 参数的值时提供了很大的自由度。

您还可以在 text 参数的值中包含 HTML 标记，然后使用 CSS 更改刚刚设置动画的文本的外观。

var animateHeading = KUTE.to(
  heading,
  { text: '70% SURFACE OF <span class="earth">EARTH</span> IS COVERED WITH <span class="water">WATER</span>.' },
  { duration: 10000, textChars: 'upper' }
);

地球出现后，地球的出现将会延迟。发生这种情况是因为插件还使用相同的角色动画编写 <span class="earth"></span> ，但这些角色实际上对用户来说都不可见。根据您的喜好，延迟可能是理想的，也可能是不理想的。

动画期间显示的中间字符默认为小写字母值。当您想要设置动画的字符均为大写字母或数字时，这可能会成为问题。动画使用哪些中间字符由 textChars 参数的值决定。它接受六个不同的值：

• alpha：在这种情况下，中间字符将为小写字母。
• upper：在这种情况下，中间字符将为大写字母。
• numeric：在这种情况下，数字字符用于动画。这与对数字进行动画处理不同，因为值不会按顺序增加。
• symbols：在这种情况下，插件将使用 #、% 和 $ 等字符来表示动画。
• all：如果您希望中间字符是字母、数字和符号的混合，则可以使用此值。
• 如果没有其他方法适合您，KUTE.js 可以让您选择指定动画期间应使用的自定义字符列表。

以下示例演示如何使用大写中间字符为标题内的文本添加动画效果。

最终想法

在本教程中，您学习了如何使用 KUTE.js 中的 CSS 和文本插件来为元素内的文本添加动画效果。当你想要为文本的外观添加动画效果时，你需要使用 CSS 插件。这将允许您使用 font-size、letter-spacing 等属性。当您想要更改任何元素内的实际字符时，您需要使用文本插件。

如果您正在寻找其他 JavaScript 资源来学习或在工作中使用，请查看我们在 Envato Market 上提供的资源。

我希望您在本教程中学到了一些新东西。如果您有任何疑问，请在评论中告诉我。

Das obige ist der detaillierte Inhalt vonEffiziente Textanimation mit KUTE.js: Teil 4, Textanimation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!