使用 KUTE.js 实现高效文本动画：第 4 部分，文本动画

redmaomail 2024-07-24 21:52 阅读数 76 #wordpress

使用 kute.js 实现高效文本动画：第 4 部分，文本动画

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

KUTE.js 还有一个文本插件，允许您通过增加或减少倒计时等数字或逐字符写入字符串来为不同元素内的文本设置动画。

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

动画 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 毫秒。这也是点击开始动画后播放的第一个动画。 animateFontSize 补间已链接到 animateColor。这样，一旦彩色动画结束，font-size 动画就会开始。

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

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

所有用于对不同字母的颜色进行动画处理的补间已立即链接到 animateSkewing。这样，您可以确保倾斜动画结束后所有链接的颜色动画都开始播放。最后，lettersSqueezed 补间将不同字母之间的间距减少 15 px。

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

动画数字

您还可以在 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' }
);

登录后复制

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

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