使用KUTE.js的表演动画：第4部分，动画文本

在本系列的第二篇教程中，您学习了如何使用KUTE.js为网页上的元素的不同CSS属性设置动画。 您学习了如何为所有变换属性以及border-radius和border-color类的属性设置动画。 您还可以使用CSS插件来设置CSS属性的动画，例如font-size ， line-height ， letter-spacing和word-spacing 。

KUTE.js还具有一个Text插件 ，通过增加或减少数字（如倒计时）或逐字符编写字符串，您可以使不同元素内的文本动画化。

在本教程中，您将学习如何使用KUTE.js中CSS和Text插件为网页上不同元素内的文本设置动画。

动画CSS文本属性

如前所述，您可以使用KUTE.js CSS插件为四个不同的文本相关CSS属性设置动画。 这些属性是font-size ， line-height ， letter-spacing和word-spacing 。 我们还将使用第一个教程中讨论的核心引擎中的一些属性来设置单个字母的动画。 在下面的演示中，让我们看看如何将所有这些概念一起使用来创建振动的HELLO文本。

这是用于创建上述动画的代码：

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

该单词的每个字母都包裹在span标记内，并且具有自己的唯一类。 第一个补间动画使所有字母的颜色从白色变为红色，偏移量为200ms。 这也是单击“ 开始动画”之后播放的第一个动画。 animateFontSize补间已链接到animateColor 。 这样， font-size动画将在彩色动画结束后立即开始。

您可能已经注意到，我已经使用了名为repeat和yoyo两个属性来控制动画的行为。 yoyo属性用于反转当前正在重复播放的动画。 这样可以避免在动画过程中不同属性的值突然跳变，并使它显得平滑。

font-size动画已与animateSkewing链接在一起，该动画使所有字母倾斜-15度。 skewX和skewY属性在核心引擎本身中可用。

用于动画化不同字母颜色的所有补间都已链接animateSkewing以立即为animateSkewing制作动画。 这样，您可以确保在倾斜动画结束后立即开始播放所有链接的彩色动画。 最后， lettersSqueezed补间将不同字母之间的间距减少15像素。

您可以通过使用属性的不同组合来创建更有趣的效果。

动画数字

您还可以在KUTE.js中为数字设置动画。 但是，您将必须包括其他文本插件才能创建动画。

数字动画的过程实际上非常简单。 您只需要指定显示动画编号的选择器，以及动画结束的最终编号。

这是一个基本示例，使用动画显示了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
);

您还可以应用通常的补间选项（例如duration ， repeat和delay来自定义动画的行为。 我们刚刚编写的代码将产生以下动画：

逐字书写文字

在很多网站上都可以找到这种非常流行的效果。 KUTE.js文本插件使您可以指定新句子，该句子应一次替换一个字符的原始句子。

在将初始字符替换为其最终值之前，对随机字符进行动画处理，就像您刚刚看到的数字示例一样。 嵌入式CodePen演示应使其更清晰：

这是创建上述动画需要编写的代码：

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"> ，但实际上这些字符对用户而言都不可见。 根据您的喜好，延迟可能会或可能不会理想。

动画过程中显示的中间字符默认为小写字母值。 当您要设置动画的字符都是大写字母或数字时，这可能是一个问题。 动画使用哪个中间字符由textChars参数的值确定。 它接受六个不同的值：

• alpha ：在这种情况下，中间字符将为小写字母。
• upper ：在这种情况下，中间字符将为大写字母。
• numeric ：在这种情况下，数字字符用于动画。 这与为数字设置动画不同，因为值不会顺序增加。
• symbols ：在这种情况下，插件将为动画使用＃，％和$等字符。
• all ：如果希望中间字符是字母，数字和符号的混合，则可以使用此值。
• 如果没有其他选择适合您，KUTE.js可让您选择指定自己的自定义字符列表，以在动画过程中使用。

下面的示例显示如何使用大写中间字符在标题内设置文本动画。

最后的想法

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

如果您正在寻找其他JavaScript资源以供研究或在您的工作中使用，请查看Envato Market上可用的内容。

我希望您在本教程中学到了新东西。 如有任何疑问，请在评论中让我知道。

翻译自: https://code.tutsplus.com/tutorials/performant-animation-using-kutejs-part-4-animating-text--cms-29745