更改jQuery隊列中動畫的緩動功能

Question

我有一個動畫鏈接到滾動位置。 每當用戶上下滾動時，都會觸發該位置的動畫，以在視圖窗口內移動元素。 如果用戶進一步滾動，則這些動畫需要排隊，以便元素沿路徑平滑移動。

var target = getAnimation();
var props = {
    left: [target.x, target.easing],
    top: target.y
};

$("#ball").animate(props, 400, "easeInOutQuad");

問題在於，當多個動畫排入隊列時，球會以不良的方式放慢速度並加速。 我想做的是這樣的：

var target = getAnimation();
var props = {
    left: [target.x, target.easing],
    top: target.y
};

var ball = $("#ball"), queue = ball.queue();

if(ball.queue().length) {
    for(var i = 1, len = queue.length; i < len; i++) {
        //modify all the other queued animations to use linear easing
    }
    ball.animate(props, 400, "easeOutQuad");
}
else {
    ball.animate(props, 400, "easeInQuad");
}

通過從easyIn函數開始，在中間使用線性，並在最后使用easyOut，我獲得了更加流暢的動畫。 無論如何，我可以訪問和修改隊列中的動畫嗎？

編輯：

這是一個小提琴，用來演示我要實現的目標： https : //jsfiddle.net/reesewill/mtepvguw/

擺弄，我正在使用線性緩動，但我真的希望總體效果更像是easyInOutQuad。 但是，因為允許排隊，所以我不能只應用緩動函數而不會弄亂整個效果（將線性更改為easeInOutQuad，然后快速單擊幾次以查看隊列）。 因此，我需要類似上面的內容來創建easyInOutQuad的總體印象。

Answer 1

我試過了，您可以通過創建新的（重新排序）隊列來做到這一點

下載源http://api.jquery.com/queue/
示例：設置隊列數組以刪除隊列。

並用我的開始事件代替了它的工作。

但是隊列中的函數存儲在函數數組中。 您需要知道要更改的原始動畫隊列的順序：（或者您可以創建新的優化隊列。

$( "#start" ).click(function() {
  $( "div" )
    .show( "slow" )
    .animate({ left: "+=50" }, 5000 )
    .animate({ top: "+=50" }, 5000 )
    .queue(function() {
      $( this ).addClass( "newcolor" ).dequeue();
    })
    .animate({ left: '-=50' }, 1500 )
    .queue(function() {
      $( this ).removeClass( "newcolor" ).dequeue();
    })
    .slideUp();


    // get current queue
    var currQueue = $( "div" ).queue( "fx");

    // create new queue and change order or add/remove animations
    var newQueue = [];
      newQueue.push(currQueue[1]);
      newQueue.push(currQueue[3]); // changed
      newQueue.push(currQueue[2]); // changed
      newQueue.push(currQueue[5]);

    // set new queue to element
    $("div").queue("fx", newQueue);

    console.log($("div").queue("fx"));
}); 

在jQuery文檔中找到更多信息

.queue（[queueName]，newQueue）
說明：對每個匹配的元素操縱一次要執行的功能隊列。

重要的是第二個參數newQueue

我希望它會有所幫助

Answer 2

注意， $(selector) .queue（）返回對動畫隊列的引用Array 。 可以使用標准數組方法修改此引用。 另請參見.dequeue（） 。

嘗試利用

Array.prototype.splice（）

摘要

splice（）方法通過刪除現有元素和/或添加新元素來更改數組的內容。

句法

array.splice（start，deleteCount [，item1 [，item2 [，...]]]）參數

開始

開始更改數組的索引。 如果大於數組的長度，則實際的起始索引將設置為數組的長度。 如果為負，則將從頭開始那么多元素。

deleteCount

一個整數，指示要刪除的舊數組元素的數量。 如果deleteCount為0，則不會刪除任何元素。 在這種情況下，您應該至少指定一個新元素。 如果deleteCount大於開始時數組中剩余的元素數，則將刪除數組末尾的所有元素。

itemN

要添加到數組中的元素。 如果不指定任何元素，則splice（）只會從數組中刪除元素。

返回

包含已刪除元素的數組。 如果僅刪除一個元素，則返回一個元素的數組。 如果沒有刪除任何元素，則返回一個空數組。

另請參見Array.prototype.concat（）

---

 var elem = $("body") , msg = function() { return "<br />" + "queue length:" + $(this).queue("abc").length }; elem.queue("abc", [ function(next) { $(this).append(msg.call(this)); next() }, function(next) { $(this).append(msg.call(this)); next() }, function(next) { $(this).append(msg.call(this)); next() } ]); elem.append(msg.call(elem)); // do stuff, // replace `function` within `abc` queue, // change `easing` options within replacement function elem.queue("abc").splice(1, 1, function(next) { $(this).append("<br />" + "`function` at index `1` within `abc` queue " + "replaced with new `function`" + msg.call(this)); next() }); elem.append("<br />" + "after `.splice()` , before `.concat()`" + msg.call(elem)); // do stuff, // `concat` functions onto `abc` queue` var arr = elem.queue("abc").concat( function(next) { $(this).append(msg.call(this)); next() }, function(next) { $(this).append(msg.call(this)); next() }, function() { $(this).append(msg.call(this) + "<br />" + "done"); } ); elem.queue("abc", arr); elem.append("<br />" + "after `.concat()`" + msg.call(elem)); elem.dequeue("abc"); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>