更改jQuery队列中动画的缓动功能 [英] Change easing functions on animations in jQuery queue
问题描述
我有一个动画链接到滚动位置。每当用户上下滚动时，都会触发该位置的动画，以在视图窗口内移动元素。如果用户进一步滚动，则这些动画需要排队，以便元素沿路径平滑移动。
var target = getAnimation（ ）;
var props = {剩余
：[target.x，target.easing]，
顶部：target.y
};
$（＃ball）。animate（props，400， easeInOutQuad）;
此问题是当多个动画排入队列时，球变慢并加速道路。我想做的是这样的：
var target = getAnimation（）;
var props = {剩余
：[target.x，target.easing]，
顶部：target.y
};
var ball = $（＃ball），queue = ball.queue（）;
if（ball.queue（）。length）{
for（var i = 1，len = queue.length; i< len; i ++）{
//修改所有其他排队的动画以使用线性缓动
}
ball.animate（props，400， easeOutQuad）;
}
else {
ball.animate（props，400， easeInQuad）;
}
从easyIn函数开始，在中间使用线性，在最后，我得到了更加流畅的动画。无论如何，我可以访问和修改队列中的动画吗？
编辑：
以下是用来证明我要实现的目标的小提琴： https://jsfiddle.net/reesewill / mtepvguw /
小提琴手中，我正在使用线性缓动，但我真的希望总体效果更像是easyInOutQuad。但是，因为我允许排队，所以我不能只应用缓动函数而不会弄乱整个效果（将线性更改为easeInOutQuad，然后快速单击几次以查看队列）。因此，我需要类似上面的内容来创建easeInOutQuad的一般印象。
注意
， $（选择器） .queue（）返回对动画队列，一个 Array 。可以使用标准数组方法修改此引用。另请参见 .dequeue（）。
尝试利用
摘要
splice（）方法通过删除现有元素和/或添加新元素来改变数组的内容。
语法
array.splice（start，deleteCount [，item1 [，item2 [，...]]]）
参数
开始
开始更改数组的索引。如果大于数组的
长度，则实际起始索引将设置为数组的长度
。如果为负，将从头开始那么多元素。
deleteCount
一个整数，指示要删除的旧数组元素的数量
。如果deleteCount为0，则不会删除任何元素。在这种情况下，
应该至少指定一个新元素。如果deleteCount比开始时数组中剩余的元素数多
，则
到数组末尾的所有元素都将被删除。
itemN
要添加到数组中的元素。如果您未指定任何
元素，则splice（）只会从数组中删除元素。
返回
包含已删除元素的数组。如果仅删除一个元素
，则返回一个元素的数组。如果没有删除
元素，则返回一个空数组。
var elem = $（ body），msg = function（）{返回< br /> +队列长度： + $（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））; //做东西，//在`abc`队列中替换`function`，///在替换函数elem.queue中更改`easing'选项（ abc）。splice（1，1，function（next）{$（this）.append（< br /> +`ʻʻ```````在`abc`队列中的队列 +替换为新的`function` + msg.call（this））; next（）}）; elem.append（< br /> +在`.splice（）之后，在`.concat（）之后` + msg.call（elem））; //做事，//`concat`函数到`abc`队列上var arr = elem.queue（ abc）。concat（function（next）{$（this ）.append（msg.call（this））; next（）}，function（next）{$（this）.append（msg.call（this））; next（）}，functio n（）{$（this）.append（msg.call（this）+< br /> +完成）; }）; elem.queue（ abc，arr）; elem.append（< br /> +在`.concat（）`之后 + msg.call（elem））; elem.dequeue（ abc）;
< script src = https： //ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js\"></script>
I have an animation linked to scroll position. Whenever the the user scrolls up or down, an animation is triggered for that position to move an element within the view window. If the user scrolls farther, these animations need to queue so that the element moves smoothly along the path.
var target = getAnimation();
var props = {
left: [target.x, target.easing],
top: target.y
};
$("#ball").animate(props, 400, "easeInOutQuad");
The problem with this is that when multiple animations get queued, the ball slows and speeds up in a bad way. What I'd like to do is something like this:
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");
}
By starting with an easeIn function, using linear in the middle, and easeOut at the end, I get a much smoother animation. Is there anyway I can access and modify the animations in the queue?
Edit:
Here is a fiddle to demonstrate what I'm trying to achieve: https://jsfiddle.net/reesewill/mtepvguw/
In the fiddle, I am using linear easing, but I'd really like the general affect to be more like easeInOutQuad. However, because I allow queueing, I can't just apply that easing function without it messing up the whole effect (change the linear to easeInOutQuad and click queue a few times quickly to see). Thus, I need something like the above to create the general impression of easeInOutQuad.
Note
, $(selector).queue() returns a reference to the animation queue, an Array. This reference can be modified with standard array methods. See also .dequeue() .
Try utilizing
Summary
The splice() method changes the content of an array by removing existing elements and/or adding new elements.
Syntax
array.splice(start, deleteCount[, item1[, item2[, ...]]]) Parameters
start
Index at which to start changing the array. If greater than the length of the array, actual starting index will be set to the length of the array. If negative, will begin that many elements from the end.
deleteCount
An integer indicating the number of old array elements to remove. If deleteCount is 0, no elements are removed. In this case, you should specify at least one new element. If deleteCount is greater than the number of elements left in the array starting at start, then all of the elements through the end of the array will be deleted.
itemN
The element to add to the array. If you don't specify any elements, splice() will only remove elements from the array.
Returns
An array containing the deleted elements. If only one element is removed, an array of one element is returned. If no elements are removed, an empty array is returned.
See also 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队列中动画的缓动功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
