在 Anime.js 系列的第一個教程中，您了解了指定要設置動畫的目標元素的不同方法以及可以設置動畫的 CSS 屬性和 DOM 屬性的類型。愛掏網 - it200.com上一個教程中的動畫非?；A。愛掏網 - it200.com所有目標元素只是移動一定距離或以固定速度改變邊界半徑。愛掏網 - it200.com

有時，您可能需要以更有節奏的方式為目標元素設置動畫。愛掏網 - it200.com例如，您可能有 10 個不同的元素，想要從左向右移動，每個元素的動畫開始之間有 500 毫秒的延遲。愛掏網 - it200.com同樣，您可能希望根據每個元素的位置增加或減少動畫持續時間。愛掏網 - it200.com

在本教程中，您將學習如何使用 Anime.js 使用特定參數正確計時不同元素的動畫。愛掏網 - it200.com這將允許您控制單個元素或所有元素的動畫序列的播放順序。愛掏網 - it200.com

屬性參數

這些參數允許您一次控制單個屬性或一組屬性的持續時間、延遲和緩動。愛掏網 - it200.com duration 和 delay 參數以毫秒為單位指定。愛掏網 - it200.com持續時間的默認值為 1000 毫秒或 1 秒。愛掏網 - it200.com

這意味著除非另有指定，否則應用于元素的任何動畫都將播放 1 秒。愛掏網 - it200.com delay 參數指定動畫在觸發后開始所需的時間。愛掏網 - it200.com延遲的默認值為 0。愛掏網 - it200.com這意味著動畫將在觸發后立即開始。愛掏網 - it200.com

您可以使用 easing 參數來控制動畫在活動期間播放的速率。愛掏網 - it200.com有些動畫一開始很慢，中間加快速度，然后在最后再次減慢速度。愛掏網 - it200.com其他人一開始速度很快，然后在剩下的時間里放慢速度。愛掏網 - it200.com

但是，在所有情況下，動畫始終在使用 duration 參數指定的時間內完成。愛掏網 - it200.com Anime.js 提供了許多緩動函數，您可以僅使用元素的名稱直接將它們應用于元素。愛掏網 - it200.com對于某些緩動函數，您還可以為 elasticity 參數設置一個值，以控制元素的值像彈簧一樣來回彈跳的程度。愛掏網 - it200.com

您將在本系列的最后一個教程中了解有關不同緩動函數的更多信息。愛掏網 - it200.com以下代碼片段展示了如何將所有這些參數應用于不同的動畫。愛掏網 - it200.com

var slowAnimation = anime({
  targets: '.square',
  translateY: 250,
  borderRadius: 50,
  duration: 4000
});

var delayAnimation = anime({
  targets: '.square',
  translateY: 250,
  borderRadius: 50,
  delay: 800
});

var cubicAnimation = anime({
  targets: '.square',
  translateY: 250,
  borderRadius: 50,
  duration: 1200,
  easing: 'easeInOutCubic'
});

登錄后復制

正如您所看到的，這些參數可以獨立于其他參數使用，也可以與它們結合使用。愛掏網 - it200.com cubicAnimation 同時應用了 duration 和 easing 參數。愛掏網 - it200.com如果未指定持續時間，動畫將運行 1 秒。愛掏網 - it200.com現在，它將運行 1,200 毫秒或 1.2 秒。愛掏網 - it200.com

上例中屬性參數的一個主要限制是目標元素的所有動畫都將具有相同的 duration、delay 和 easing 值。愛掏網 - it200.com

這可能是也可能不是期望的行為。愛掏網 - it200.com例如，您可能希望首先平移目標元素，然后為其邊框半徑設置動畫，而不是同時平移和更改目標元素的邊框半徑。愛掏網 - it200.com Anime.js 允許您為 duration、delay、easing 和 指定不同的值各個屬性的elastic 參數。愛掏網 - it200.com下面的代碼和演示應該會更清楚。愛掏網 - it200.com

var indiParam = anime({
  targets: '.square',
  translateY: {
    value: 250
  },
  rotate: {
    value: '2.125turn'
  },
  backgroundColor: {
    value: 'rgb(255,0,0)',
    duration: 400,
    delay: 1500,
    easing: 'linear'
  },
  duration: 1500
});

登錄后復制

在上面的代碼中，我們想要設置動畫的所有屬性都有不同的值。愛掏網 - it200.com背景顏色動畫的持續時間為400ms，而旋轉和平移動畫使用全局持續時間值1500ms。愛掏網 - it200.com

背景顏色動畫也有延遲，因此顏色的任何變化僅在 1500 毫秒過去后才開始。愛掏網 - it200.com rotate 和 translateY 屬性使用 delay 和 easing 參數的默認值，因為我們既沒有為它們提供本地值也沒有提供全局值。愛掏網 - it200.com

基于函數的參數

當您想要更改單個屬性的動畫順序和持續時間時，基于屬性的參數非常有用。愛掏網 - it200.com但是，相同的 duration 和 delay 仍將應用于所有目標元素上的各個屬性。愛掏網 - it200.com基于函數的參數允許您單獨指定 duration、delay、elasticity 和 easing以緊湊的方式針對不同的目標元素。愛掏網 - it200.com

在這種情況下，您可以使用函數而不是數字來設置不同參數的值。愛掏網 - it200.com這些函數接受三個參數：target、index 和 targetCount。愛掏網 - it200.com target 參數存儲對當前目標元素的引用。愛掏網 - it200.com index 參數存儲當前目標元素的索引或位置。愛掏網 - it200.com targetCount 參數存儲目標元素的總數。愛掏網 - it200.com

當需要根據目標元素的某些屬性設置動畫值時，target 參數非常有用。愛掏網 - it200.com例如，您可以將目標元素的 delay、duration 或 easing 值存儲在數據屬性中，然后稍后訪問它們.

類似地，您可以訪問目標元素的背景顏色，然后操作它來為各個元素設置最終的唯一顏色值。愛掏網 - it200.com通過這種方式，您可以對所有元素進行動畫處理，使其背景顏色比當前顏色深 20%。愛掏網 - it200.com

index 參數為您提供當前目標在目標元素列表中的位置。愛掏網 - it200.com您可以使用它逐步更改不同元素的 duration 和 delay 等參數的值。愛掏網 - it200.com

當您想要按升序設置值時，這通常很有用。愛掏網 - it200.com您還可以從 targetCount 中減去 index 以按降序設置值。愛掏網 - it200.com以下代碼片段使用這兩個參數來按升序和降序指定值。愛掏網 - it200.com

var delaySequence = anime({
  targets: '.square',
  translateY: 250,
  delay: function(target, index) {
    return index * 200;
  }
});

var delaySequenceR = anime({
  targets: '.square',
  translateY: 250,
  delay: function(target, index, targetCount) {
    return (targetCount - index) * 200;
  }
});

登錄后復制

以下代碼使用 index 參數為每??個目標元素設置不同的 easing 值。愛掏網 - it200.com

var easeInValues = ['easeInQuad', 'easeInCubic', 'easeInQuart', 'easeInQuint', 'easeInSine', 'easeInExpo', 'easeInCirc', 'easeInBack', 'easeInElastic'];

var easeInSequence = anime({
  targets: '.square',
  translateY: 250,
  duration: 2000,
  easing: function(target, index) {
    return easeInValues[index];
  },
  autoplay: false
});

登錄后復制

動畫參數

最后一組參數允許您指定動畫應播放的次數以及播放的方向。愛掏網 - it200.com您可以使用loop參數指定動畫播放的次數。愛掏網 - it200.com還有一個 autoplay 參數，可以設置為 true 或 false。愛掏網 - it200.com它的默認值為 true，但您可以通過將其設置為 false 來阻止動畫自行啟動。愛掏網 - it200.com

direction 參數控制動畫播放的方向。愛掏網 - it200.com它可以具有三個值：normal、reverse 和 alternate。愛掏網 - it200.com默認值為 normal，它使動畫從開始值到結束值正常播放。愛掏網 - it200.com一旦目標元素達到結束值，如果 loop 值大于 1，目標元素會突然跳回起始值，然后再次開始動畫。愛掏網 - it200.com

當direction 設置為reverse 并且loop 值大于1 時，動畫將反轉。愛掏網 - it200.com換句話說，目標元素從最終狀態開始動畫，然后向后到達初始狀態。愛掏網 - it200.com一旦它們處于初始狀態，元素就會跳回到最終狀態，然后再次開始反向動畫。愛掏網 - it200.com alternate 方向值會在每次循環后更改動畫方向。愛掏網 - it200.com

var normalLoop = anime({
  targets: '.square',
  translateY: 250,
  delay: function(target, index) {
    return index * 200;
  },
  loop: 4,
  easing: 'easeInSine',
  autoplay: false
});

登錄后復制

在下面的演示中，我將循環次數設置為四，以便您可以輕松注意到不同模式下元素動畫的差異。愛掏網 - it200.com

使用 stagger() 方法

到目前為止，在本教程中，我們已經使用函數將不同的值傳遞給目標元素的動畫延遲或持續時間。愛掏網 - it200.com您還可以借助 Anime.js 中的 stagger() 方法獲得相同的功能。愛掏網 - it200.com

stagger() 方法基本上允許您控制動畫如何在多個元素上發生。愛掏網 - it200.com它接受兩個參數。愛掏網 - it200.com第一個是您想要應用的值，第二個是一個帶有一堆參數的對象，這些參數決定如何應用交錯。愛掏網 - it200.com

下面是一個示例，展示 stagger() 如何與我們到目前為止編寫的常規函數??進行比較：

// A function to introduce animation delay in elements.
delay: function(target, index) {
    return index * 200;
}

// The stagger() Equivalent
delay: anime.stagger(200);

登錄后復制

您現在可能會問是否有一種方法可以反向應用動畫延遲，就像我們對函數所做的那樣。愛掏網 - it200.com是的，這絕對是可能的。愛掏網 - it200.com這是一個例子：

// Reversing the delay direction
delay: function(target, index, targetCount) {
    return (targetCount - index) * 200;
}

// Equivalent functionality with stagger()
delay: anime.stagger(200, {"direction": "reverse"})
  

登錄后復制

我們可以類似地對動畫持續時間應用交錯。愛掏網 - it200.com由于交錯，前面示例中第一個元素的延遲值被設置為 0，這也是我們想要做的。愛掏網 - it200.com但是，第一個元素的動畫持續時間必須非零。愛掏網 - it200.com否則，頁面加載后就會處于結束階段。愛掏網 - it200.com

可以借助 start 參數設置第一個元素的動畫的非零持續時間，該參數設置為 1000 以達到驚人效果。愛掏網 - it200.com這是一個例子：

// Duration starts at 1000 and increases by 800
duration: function(target, index) {
    return 1000 + index * 800;
}

// Equivalent functionality with stagger()
duration: anime.stagger(800, {"start": 1000})

登錄后復制

如果在開始最后一個元素時必須應用非零持續時間值怎么辦？在這種情況下，我們可以對 stagger() 方法使用以下參數：

// A non-zero duration in reverse direction
duration: function(target, index, targetCount) {
    return 1000 + (targetCount - index) * 800;
}

// Equivalent functionality with stagger()
duration: anime.stagger(800, {"start": 1000, "direction": "reverse"})

登錄后復制

以下 CodePen 演示的所有操作與“基于函數的參數”部分下的示例類似，但它使用 stagger() 方法來執行此操作。愛掏網 - it200.com正如您所看到的，最終結果沒有任何區別。愛掏網 - it200.com

我想指出的一件事是交錯方法在舊版本的庫中不起作用。愛掏網 - it200.com確保您使用的是最新版本以避免任何錯誤。愛掏網 - it200.com

最終想法

在本教程中，您了解了可用于控制 Anime.js 中目標元素的動畫的不同類型的參數。愛掏網 - it200.com屬性參數用于控制各個屬性的動畫。愛掏網 - it200.com

您可以使用它們來控制各個元素的動畫播放順序。愛掏網 - it200.com函數參數允許您控制單個元素相對于整個組的動畫時間和速率。愛掏網 - it200.com動畫參數允許您控制不同元素的動畫本身的播放方式。愛掏網 - it200.com

以上就是擴展參數：使用Anime.js進行基于JavaScript的動畫，第二部分的詳細內容，更多請關注愛掏網 - it200.com其它相關文章！