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函数开始，在中间使用线性，在最后使用easeOut，我得到一个更平滑的动画。无论如何我可以访问和修改队列中的动画吗？

修改

这是一个小提琴来展示我想要实现的目标：https://jsfiddle.net/reesewill/mtepvguw/

在小提琴中，我使用的是线性缓和，但我更喜欢一般的影响，更像是easeInOutQuad。但是，因为我允许排队，所以我不能只应用该缓动函数而不会弄乱整个效果（将线性更改为easeInOutQuad并快速点击队列几次以查看）。因此，我需要像上面这样的东西来创建easeInOutQuad的总体印象。

Answer 1

我试过，你可以通过创建新的（重新排序的）队列

来做到这一点

下载来源http://api.jquery.com/queue/
示例：设置队列数组以删除队列。

并用my替换start event，它已经工作了。

但队列中的函数存储在函数数组中。您需要知道要更改的动画原始队列的顺序:(或者您可以创建新的最佳化队列。

$( "#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 documentation

中找到更多信息

.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

要添加到数组的元素。如果你没有指定任何   elements，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>

更改jQuery队列中动画的缓动函数

2 个答案: