Animation de texte efficace avec KUTE.js : Partie 4, Animation de texte

Dans le deuxième tutoriel de cette série, vous avez appris à utiliser KUTE.js pour animer différentes propriétés CSS des éléments d'une page Web. Vous avez appris à transformer des propriétés pour tous et border-radius 和 border-color 等属性设置动画。您还可以使用 CSS 插件对 CSS 属性进行动画处理，例如 font-size、line-height、letter-spacing 和 字间距.

KUTE.js dispose également d'un plugin de texte qui vous permet d'animer du texte dans différents éléments en augmentant ou en diminuant des nombres comme des comptes à rebours ou en écrivant des chaînes caractère par caractère.

Dans ce tutoriel, vous apprendrez à animer du texte dans différents éléments d'une page Web à l'aide de CSS et de plugins de texte dans KUTE.js.

Propriétés du texte CSS animé

Comme je l'ai mentionné précédemment, vous pouvez animer quatre propriétés CSS différentes liées au texte à l'aide du plugin CSS KUTE.js. Ces propriétés sont font-size、line-height、letter-spacing 和 word-spacing. Nous animerons également des lettres individuelles en utilisant certaines propriétés du moteur principal abordées dans le premier didacticiel. Voyons comment tous ces concepts peuvent être utilisés ensemble pour créer un texte HELLO vibrant dans la démo ci-dessous.

Voici le code utilisé pour créer l'animation ci-dessus :

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

Chaque lettre d'un mot est contenue dans une balise span et possède sa propre classe unique. La première interpolation change la couleur de toutes les lettres du blanc au rouge avec un décalage de 200 millisecondes. C'est également la première animation jouée après avoir cliqué sur span 标记内，并具有自己独特的类。第一个补间动画将所有字母的颜色从白色变为红色，偏移量为 200 毫秒。这也是点击开始动画后播放的第一个动画。 animateFontSize 补间已链接到 animateColor。这样，一旦彩色动画结束，font-sizeDémarrer l'animation

repeat 和 yoyo 的属性来控制动画的行为。 yoyoVous avez peut-être remarqué que j'ai utilisé deux propriétés appelées

font-size 动画已与 animateSkewing 链接，它将所有字母倾斜 -15 度。 skewX 和 skewY

animateSkewing。这样，您可以确保倾斜动画结束后所有链接的颜色动画都开始播放。最后，lettersSqueezedTous les tweeners utilisés pour animer les couleurs des différentes lettres sont désormais liés à

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

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

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

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!