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

发布日期： 2023-08-28 阅读量： 作者： ADMIN

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

登录后复制

上一篇: C++ 匿名函数与函数对象的扩展性

下一篇: C++ 函数中异常和错误处理的优缺点

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

随便看看