在本系列的第二個教程中，您學習了如何使用 KUTE.js 為網(wǎng)頁上元素的不同 CSS 屬性設(shè)置動畫。您學習了如何為所有變換屬性以及 border-radius 和 border-color 等屬性設(shè)置動畫。您還可以使用 CSS 插件對 CSS 屬性進行動畫處理，例如 font-size、line-height、letter-spacing 和 字間距。
KUTE.js 還有一個文本插件，允許您通過增加或減少倒計時等數(shù)字或逐字符寫入字符串來為不同元素內(nèi)的文本設(shè)置動畫。
在本教程中，您將學習如何使用 KUTE.js 中的 CSS 和文本插件為網(wǎng)頁上不同元素內(nèi)的文本設(shè)置動畫。
動畫 CSS 文本屬性
正如我之前提到的，您可以使用 KUTE.js CSS 插件為四個不同的與文本相關(guān)的 CSS 屬性設(shè)置動畫。這些屬性是 font-size、line-height、letter-spacing 和 word-spacing。我們還將使用第一個教程中討論的核心引擎的一些屬性來為單個字母設(shè)置動畫。讓我們看看如何在下面的演示中結(jié)合使用所有這些概念來創(chuàng)建振動 HELLO 文本。
以下是用于創(chuàng)建上述動畫的代碼：
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 標記內(nèi)，并具有自己獨特的類。第一個補間動畫將所有字母的顏色從白色變?yōu)榧t色，偏移量為 200 毫秒。這也是點擊開始動畫后播放的第一個動畫。 animateFontSize 補間已鏈接到 animateColor。這樣，一旦彩色動畫結(jié)束，font-size 動畫就會開始。
您可能已經(jīng)注意到，我使用了兩個名為 repeat 和 yoyo 的屬性來控制動畫的行為。 yoyo 屬性用于反轉(zhuǎn)當前正在重復播放的動畫。這樣可以避免動畫過程中不同屬性的值突然跳躍，使其顯得平滑。
font-size 動畫已與 animateSkewing 鏈接，它將所有字母傾斜 -15 度。 skewX 和 skewY 屬性在核心引擎本身中可用。
所有用于對不同字母的顏色進行動畫處理的補間已立即鏈接到 animateSkewing。這樣，您可以確保傾斜動畫結(jié)束后所有鏈接的顏色動畫都開始播放。最后，lettersSqueezed 補間將不同字母之間的間距減少 15 px。
您可以通過使用不同的屬性組合來創(chuàng)建更有趣的效果。
動畫數(shù)字
您還可以在 KUTE.js 中對數(shù)字進行動畫處理。但是，您必須包含額外的文本插件才能創(chuàng)建動畫。
數(shù)字動畫的過程實際上非常簡單。您只需指定應顯示動畫編號的選擇器以及動畫應結(jié)束的最終編號。
這是一個基本示例，使用動畫顯示 2016 年美國機場的總數(shù)。
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 來自定義動畫的行為。我們剛剛編寫的代碼將產(chǎn)生以下動畫：
逐字符書寫文本
這是一種非常流行的效果，您可以在很多網(wǎng)站上找到它。 KUTE.js 文本插件允許您指定新句子，一次替換一個字符的原始句子。
在用最終值替換初始字符之前，隨機字符會像您剛剛看到的數(shù)字示例一樣進行動畫處理。嵌入式 CodePen 演示應該會更清楚：
以下是創(chuàng)建上述動畫所需編寫的代碼：
var animateHeading = KUTE.to( heading, { text: '70% Surface of Earth is Covered with Water.' }, { duration: 5000} ); startButton.addEventListener( "click", function() { animateHeading.start(); }, false );
整個句子的人物動畫在5秒內(nèi)完成。您可能已經(jīng)注意到，首句和末句不需要具有相同數(shù)量的字符。這給我們在設(shè)置 text 參數(shù)的值時提供了很大的自由度。
您還可以在 text 參數(shù)的值中包含 HTML 標記，然后使用 CSS 更改剛剛設(shè)置動畫的文本的外觀。
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' } );
地球出現(xiàn)后，地球的出現(xiàn)將會延遲。發(fā)生這種情況是因為插件還使用相同的角色動畫編寫 ，但這些角色實際上對用戶來說都不可見。根據(jù)您的喜好，延遲可能是理想的，也可能是不理想的。
動畫期間顯示的中間字符默認為小寫字母值。當您想要設(shè)置動畫的字符均為大寫字母或數(shù)字時，這可能會成為問題。動畫使用哪些中間字符由 textChars 參數(shù)的值決定。它接受六個不同的值：
- alpha：在這種情況下，中間字符將為小寫字母。
- upper：在這種情況下，中間字符將為大寫字母。
- numeric：在這種情況下，數(shù)字字符用于動畫。這與對數(shù)字進行動畫處理不同，因為值不會按順序增加。
- symbols：在這種情況下，插件將使用 #、% 和 $ 等字符來表示動畫。
- all：如果您希望中間字符是字母、數(shù)字和符號的混合，則可以使用此值。
- 如果沒有其他方法適合您，KUTE.js 可以讓您選擇指定動畫期間應使用的自定義字符列表。
以下示例演示如何使用大寫中間字符為標題內(nèi)的文本添加動畫效果。
最終想法
在本教程中，您學習了如何使用 KUTE.js 中的 CSS 和文本插件來為元素內(nèi)的文本添加動畫效果。當你想要為文本的外觀添加動畫效果時，你需要使用 CSS 插件。這將允許您使用 font-size、letter-spacing 等屬性。當您想要更改任何元素內(nèi)的實際字符時，您需要使用文本插件。
如果您正在尋找其他 JavaScript 資源來學習或在工作中使用，請查看我們在 Envato Market 上提供的資源。
我希望您在本教程中學到了一些新東西。如果您有任何疑問，請在評論中告訴我。
