到目前為止，在本系列中，您已經(jīng)學(xué)習(xí)了如何為不同元素的 CSS 屬性設(shè)置動畫、如何創(chuàng)建不同的 SVG 相關(guān)動畫，以及如何為網(wǎng)頁上不同元素的文本內(nèi)容設(shè)置動畫。您還可以通過另一種方式使用 KUTE.js 對網(wǎng)頁上的元素進行動畫處理，那就是更改不同屬性的值。這需要您在項目中包含屬性插件。
在本教程中，您將學(xué)習(xí)如何使用屬性插件為 KUTE.js 中不同類型屬性的值設(shè)置動畫。我們還將討論可用于控制不同動畫速度的不同緩動函數(shù)。
緩動函數(shù)
現(xiàn)實生活中的物體很少線性移動。它們要么加速，要么減速。甚至加速和減速也以不同的幅度發(fā)生。到目前為止，我們所有的動畫都是線性進展的。這感覺一點也不自然。在本節(jié)中，您將了解 KUTE.js 提供的所有用于控制不同動畫速度的緩動函數(shù)。
庫中的核心緩動函數(shù)包含在開箱即用的核心引擎中。假設(shè)您想要將 QuadraticInOut 緩動應(yīng)用于動畫。這可以通過兩種方式實現(xiàn)：
easing: KUTE.Easing.easingQuadraticInOut // OR easing: 'easingQuadraticInOut'
每個緩動函數(shù)都有一條獨特的曲線，用于確定元素在動畫過程中如何加速。 正弦 曲線意味著線性加速度。請記住，這與 線性 緩動函數(shù)不同。 linear 函數(shù)表示動畫的線性速度，而正弦曲線表示動畫的線性加速速度。換句話說，動畫的速度會線性增加或減少。同樣， quadratic 意味著 2 的冪加速，cubic 意味著 3 的冪，quartic 意味著 4 的冪，而 quintic?表示 5 的冪。還有 circular 和 exponential 緩動函數(shù)。
您可以將 In、Out 或 InOut 附加到任何緩動函數(shù)。值 In 意味著動畫將非常緩慢地開始并不斷加速直到結(jié)束。值 Out 意味著動畫將以最大速度開始，然后緩慢減速，直到最后停止。值 InOut 表示動畫將在開始時加速，在結(jié)束時減速。
您還可以在動畫中使用 bounce 和 elastic?緩動函數(shù)，并附加 In、Out，或者InOut 到其中任何一個。在下面的演示中，我在不同的圓圈上應(yīng)用了所有這些緩動函數(shù)，以便您可以看到它們?nèi)绾斡绊憚赢嫷乃俣取?/p>
可能沒有一個核心緩動函數(shù)能夠提供您正在尋找的動畫節(jié)奏。在這種情況下，您可以將實驗分支中的三次貝塞爾函數(shù)包含在項目中，并開始使用這些緩動函數(shù)。
同樣，KUTE.js 還提供了一些從 Dynamics.js 庫導(dǎo)入的基于物理的緩動函數(shù)。您可以在庫的緩動函數(shù)頁面上閱讀有關(guān)所有這些緩動函數(shù)以及如何正確使用它們的更多信息。
動畫屬性
SVG 中的屬性可以接受數(shù)字和字符串作為其值。字符串可以是顏色值或帶有單位后綴的數(shù)字，例如 px、em 或 %。屬性本身的名稱也可以由用連字符連接的兩個單詞組成。牢記這些差異，KUTE.js 為我們提供了不同的方法，可用于指定不同屬性的值。
var tween = KUTE.to('selector', {attr: {'r': 100}}); var tween = KUTE.to('selector', {attr: {'r': '10%'}}); var tween = KUTE.to('selector', {attr: {'stroke-width': 10}}); var tween = KUTE.to('selector', {attr: {strokeWidth: 10}});
如您所見，后綴值需要用引號引起來。同樣，名稱中包含連字符的屬性需要用引號括起來或以駝峰形式指定。
無單位屬性
許多屬性接受無單位值。例如，路徑的 行程寬度 可以是無單位的。同樣，您不必為 Circle 元素的 r、cx 和 cy 屬性指定單位。您可以使用屬性插件將所有這些屬性從一個值動畫化為另一個值。
現(xiàn)在您已經(jīng)知道如何使用不同的緩動函數(shù)，您將能夠以不同的速度為不同的屬性設(shè)置動畫。這是一個例子：
var radiusAnimation = KUTE.allTo( "circle", { attr: { r: 75 } }, { repeat: 1, yoyo: true, offset: 1000, easing: 'easingCubicIn' } ); var centerxAnimationA = KUTE.to( "#circle-a", { attr: { cx: 500 } }, { repeat: 1, yoyo: true, easing: 'easingCubicInOut', } ); var centerxAnimationB = KUTE.to( "#circle-b", { attr: { cx: 100 } }, { repeat: 1, yoyo: true, easing: 'easingCubicInOut' } ); var centeryAnimation = KUTE.allTo( "circle", { attr: { cy: 300 } }, { repeat: 1, yoyo: true, offset: 1000, easing: 'easingCubicOut' } );
第一個補間使用我們在第一個教程中討論的 allTo() 方法同時對兩個圓的半徑進行動畫處理。如果設(shè)置為 true，則 yoyo 屬性以相反方向播放動畫。
兩個圓圈的 cx 屬性分別進行動畫處理。然而，它們都是由同一個按鈕點擊觸發(fā)的。最后，兩個圓圈的 cy 屬性同時以 1000 毫秒的 offset 進行動畫處理。
顏色屬性
從版本 1.5.7 開始，KUTE.js 中的屬性插件還允許您對 fill、行程 和 stopColor 進行動畫處理屬性。您可以使用有效的顏色名稱或顏色的十六進制值。您還可以提供 RGB 或 HSL 格式的顏色值。
您必須記住的一件重要的事情是，只有當您沒有在 CSS 中設(shè)置這些屬性的值時，動畫才會起作用。在下面的演示中，如果我在演示中添加了以下 CSS，則 fill 顏色根本不會有動畫效果。
rect { fill: brown; }
我創(chuàng)建的演示非?；A(chǔ)，但您可以通過應(yīng)用變換和使用更多顏色使其變得更有趣。
后綴屬性
許多 SVG 屬性，例如 r 和 行程寬度 可以使用或不使用后綴。例如，您可以將 r 的值設(shè)置為 10 等數(shù)字或 10em 等 em 單位。有一些屬性，例如用于顏色停止的 offset 屬性，始終要求您添加后綴。在 KUTE.js 中為后綴屬性指定值時，請始終確保將該值括在引號內(nèi)。
在下面的示例中，我對漸變中第一個停止點的偏移值和第二個停止點的顏色進行了動畫處理。由于 offset 需要后綴，因此我將值括在引號內(nèi)。
var offsetAnimation = KUTE.allTo( ".stop1", { attr: { offset: '90%'} }, { repeat: 1, offset: 1000, yoyo: true, easing: 'easingCubicIn' } ); var colorAnimation = KUTE.allTo( ".stop2", { attr: { stopColor: 'black'} }, { repeat: 1, offset: 1000, yoyo: true, easing: 'easingCubicIn' } ); var scaleAnimation = KUTE.allTo( "circle", { svgTransform: { scale: 2} }, { repeat: 1, offset: 1000, yoyo: true, easing: 'easingCubicIn' } );
演示中有三種不同的漸變，每個漸變都有兩個顏色停止點，其類名稱為 stop1 和 stop2。我還使用 svgTransform 屬性應(yīng)用了縮放變換，我們在本系列的第三個教程中對此進行了討論。
最終想法
在本教程中，您了解了 KUTE.js 中提供的不同緩動函數(shù)以及如何使用它們來控制自己的動畫的速度。您還學(xué)習(xí)了如何為不同類型的屬性設(shè)置動畫。
我試圖在本系列中涵蓋 KUTE.js 的所有重要方面。這應(yīng)該足以幫助您在自己的項目中自信地使用 KUTE.js。您還可以閱讀文檔以了解有關(guān)該庫的更多信息。
我還建議您仔細閱讀源代碼并了解該庫的實際工作原理。如果您有任何與本教程相關(guān)的問題或提示，請隨時在評論中分享。
