Efficient text animation with KUTE.js: Part 4, Text animation

In the second tutorial in this series, you learned how to use KUTE.js to animate different CSS properties of elements on a web page. You learned how to animate all transform properties as well as properties such as border-radius and border-color. You can also use CSS plug-ins to animate CSS properties such as font-size, line-height, letter-spacing, and Word Spacing.

KUTE.js also has a text plugin that allows you to animate text within different elements by increasing or decreasing numbers like countdowns or writing strings character by character.

In this tutorial, you will learn how to animate text within different elements on a web page using CSS and text plugins in KUTE.js.

Animated CSS text properties

As I mentioned before, you can animate four different text-related CSS properties using the KUTE.js CSS plugin. These properties are font-size, line-height, letter-spacing, and word-spacing. We'll also animate individual letters using some properties of the core engine discussed in the first tutorial. Let’s see how all these concepts can be used together in the demo below to create a vibrating HELLO text.

Here is the code used to create the above animation:

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
);

word is contained within the span tag and has its own unique class. The first tween changes the color of all letters from white to red with an offset of 200 milliseconds. This is also the first animation played after clicking Start Animation. animateFontSize The tween is linked to animateColor. This way, once the color animation ends, the font-size animation will start.

You may have noticed that I use two properties called repeat and yoyo to control the behavior of the animation. yoyo Property is used to reverse the animation that is currently playing on repeat. This avoids sudden jumps in the values ​​of different properties during animation, making it appear smooth.

font-size animation is linked with animateSkewing, which skews all letters -15 degrees. The skewX and skewY properties are available in the core engine itself.

All tweens used to animate the colors of different letters are now linked to animateSkewing. This way you ensure that all linked color animations start playing after the tilt animation ends. Finally, the lettersSqueezed tween reduces the spacing between different letters by 15 px.

You can create more interesting effects by using different combinations of properties.

Animated Numbers

You can also animate numbers in KUTE.js. However, you must include additional text plugins to create animations.

The process of digital animation is actually very simple. You just need to specify the selector at which the animation number should be displayed and the final number at which the animation should end.

This is a basic example using animation to show the total number of U.S. airports in 2016.

var usa = document.querySelector(".usa");
var startButton = document.querySelector(".start");

var animateUSA = KUTE.to(
  usa,
  { number: 19536 }
);

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

You can also apply common tweening options such as duration, repeat, and delay to customize the behavior of your animation. The code we just wrote will produce the following animation:

Write text character by character

This is a very popular effect and you can find it on many websites. The KUTE.js text plugin allows you to specify new sentences that replace the original sentences one character at a time.

The random characters are animated like the numeric example you just saw, before replacing the initial characters with the final values. The embedded CodePen demo should make it clearer:

Here is the code you need to write to create the above animation:

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 上提供的资源。

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

The above is the detailed content of Efficient text animation with KUTE.js: Part 4, Text animation. For more information, please follow other related articles on the PHP Chinese website!