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

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

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

• alpha：在这种情况下，中间字符将为小写字母。
• upper：在这种情况下，中间字符将为大写字母。
• numeric：在这种情况下，数字字符用于动画。这与对数字进行动画处理不同，因为值不会按顺序增加。
• symbols：在这种情况下，插件将使用 #、% 和 $ 等字符来表示动画。
• all：如果您希望中间字符是字母、数字和符号的混合，则可以使用此值。
• 如果没有其他方法适合您，KUTE.js 可以让您选择指定动画期间应使用的自定义字符列表。

以下示例演示如何使用大写中间字符为标题内的文本添加动画效果。

最终想法

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

如果您正在寻找其他 JavaScript 资源来学习或在工作中使用，请查看我们在 Envato Market 上提供的资源。

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

以上是使用 KUTE.js 實現高效文字動畫：第 4 部分，文字動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章！