使用KUTE.js制作高性能动画：第4部分(动画文本)

在本系列的第二篇教程中，您学习了如何使用 KUTE.js为web 页面上元素的不同css属性设置动画。您学习了如何为所有变换属性以及 和 之类的属性设置动画。您还可以使用 CSS 插件为 CSS 属性设置动画，例如、、和.border-radiusborder-colorfont-sizeline-heightletter-spacingword-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标签内，并有自己独特的类。第一个补间动画将所有字母的颜色从白色变为红色，偏移量为 200 毫秒。这也是点击Start Animation后播放的第一个动画。补间animateFontSize已被链接到animateColor. 这样，font-size动画在彩色动画结束时立即开始。 

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

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

为不同字母的颜色设置动画的所有补间都被同时链接到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 plugin。