调整速度jQuery动画气泡的位置 [英] Adjusting speed & position of jQuery animated bubbles
问题描述
我发布了另一个有关我想代替该脚本使用的脚本的问题，但是没有人能够提供帮助，因此我决定尝试使此脚本按我的意愿工作.我已经阅读了与该主题有关的其他一些问题，但是我无法弄清楚如何将这些解决方案应用于所使用的脚本.
I posted another question about another script I wanted to use instead of this one, but no one was able to help, so I decided to try and get this one working how I'd like. I have read a few other questions pertaining to this topic, but I cannot figure out how to apply those solutions to the script I am using.
我希望几秒钟后气泡不会加速并聚集在屏幕顶部.通过调整rand和horiSpeed，我已经能够减慢气泡的初始速度，但是并不能解决随后的加速或结块.
I would like to keep the bubbles from speeding up and getting clumped together at the top of the screen after a few seconds. I have been able to slow down the initial speed of the bubbles by adjusting rand and horiSpeed, but it did not fix the subsequent speeding up or clumping.
我也玩过setInterval，但是那里也没有运气.如果有人能指出正确的方向并解释不同功能的作用，我将不胜感激.我对以下部分中的15和250感到特别困惑:
I also played around with setInterval, but no luck there either. If anyone can point me in the right direction and also explain what the different functions are doing, I would greatly appreciate it. I am particularly confused by the 15 and 250 in the parts below:
marginLeft: function (n, v) {
return (Math.sin(new Date().getTime() / (horiSpeed * 15000) + rand) + 1) * parentW;
}
});
}, 15);
setInterval(function () {
if (parseFloat(current.css('margin-top')) < -thisH) {
current.css('margin-top', windowH + thisH);
}
}, 250);
脚本如下，这是我的小提琴: http://jsfiddle.net/N63Tf/5/
The script follows and here is my Fiddle: http://jsfiddle.net/N63Tf/5/
jQuery.fn.verticalMarquee = function (vertSpeed, horiSpeed, index) {
this.css('float', 'left');
vertSpeed = vertSpeed || 1;
horiSpeed = 1 / horiSpeed || 1;
var windowH = this.parent().height(),
thisH = this.height(),
parentW = (this.parent().width() - this.width()) / 2,
rand = Math.random() * (index * 10000),
current = this;
this.css('margin-top', windowH + thisH);
this.parent().css('overflow', 'hidden');
setInterval(function () {
current.css({
marginTop: function (n, v) {
return parseFloat(v) - vertSpeed;
},
marginLeft: function (n, v) {
return (Math.sin(new Date().getTime() / (horiSpeed * 15000) + rand) + 1) * parentW;
}
});
}, 15);
setInterval(function () {
if (parseFloat(current.css('margin-top')) < -thisH) {
current.css('margin-top', windowH + thisH);
}
}, 250);
};
var message = 1;
$('.message').each(function (message) {
$(this).verticalMarquee(1, 1, message);
message++;
});
谢谢.
有关安东答案中功能的问题. (评论太久了，不确定是否还有其他地方.)
Questions about functions in Anton's answer. (Too long for a comment and wasn't sure where else to put it.)
当您提到在一个循环中进行所有动画处理时，您是说可以对此脚本进行改进，或者如果我想添加更多过渡，则应将其保留在此脚本的函数中?
When you mention doing all the animating in one loop, do you mean this script could be improved to do so, or that if I want to add more transitions I should keep them within the function in this script?
如果后者为true，新的转换将在代码中移至何处?我会创建另一个函数并将其放在animationStep之后吗?
If the latter is true, where in the code would the new transition go? Would I create another function and put it after animationStep?
该功能的对应部分是不是每个转换都有自己的功能? (在我看来，只有一个计数器，否则每次转换都会产生单独的气泡吗?)
Is the counter part of the function and each transition would have its own? (It seems to me there would only be one counter, otherwise each transition would generate separate bubbles?)
在计数器中，我是否纠正这一部分正在检查#parent的边界，以使气泡停留在div内，并在每10个气泡之后进行此检查吗?
In the counter, am I correct that this part is checking the bounds of #parent so the bubbles stay within the div, and doing so after every 10th bubble?
if(check && item.y < -item.elementHeight){ //check bounds every 10th iteration
最后，这是做什么的?它是在调用整个函数并设置间隔时间吗?这是我可以加快气泡生成速度的地方吗?
Lastly, what does this do? Is it calling the whole function and setting the interval time? Is this where I can speed up the rate at which the bubbles are generated?
window.requestAnimationFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
再次感谢您的所有帮助！
Thanks again for all of your help!
推荐答案
随机行为来自使用浮动div.浏览器试图将其布局并失败，因为您一直在更改边距.
The random behaviour comes from using floating divs. The browser tries to lay them out and fails, because you are constantly changing the margin.
第一个间隔为15ms的循环移动该项目，第二个循环检查该项目是否到达页面顶部.
The first loop with 15ms interval moves the item and the second one checks if it reached the top of the page.
我根据项目的索引为每个项目添加了一些延迟(有点超时)，以防止它们结块.
I added some delay to each item (a little timeout) based on its index to prevent them from clumping up.
一些动画制作的一般技巧:
Some general tips for animating:
- 尝试在一个循环中进行所有动画处理(这样就不会运行多个时间间隔)
- 看一下requestAnimationFrame函数，以60fps的速度流畅播放动画
- 要获得更高的性能，您还可以设置css转换的动画效果，而不是边距.
我增加了一点延迟，以防止物品杂乱. 这是您的作品:
I added a little delay to prevent the items from cluttering up. Here is your working piece:
jQuery.fn.verticalMarquee = function (vertSpeed, horiSpeed, index) {
this.css('position', 'absolute');
vertSpeed = vertSpeed || 1;
horiSpeed = 1 / horiSpeed || 1;
var windowH = this.parent().height(),
thisH = this.height(),
delay= (Math.random()/2+0.5)*3000*index,
parentW = (this.parent().width() - this.width()) / 2,
rand = Math.random() * (index * 10000),
current = this;
this.css('margin-top', windowH + thisH);
this.parent().css('overflow', 'hidden');
setTimeout(function(){
setInterval(function () {
current.css({
marginTop: function (n, v) {
return parseFloat(v) - vertSpeed;
},
marginLeft: function (n, v) {
return (Math.sin(new Date().getTime() / (horiSpeed * 15000) + rand) + 1) * parentW;
}
});
}, 15);
setInterval(function () {
if (parseFloat(current.css('margin-top')) < -thisH) {
current.css('margin-top', windowH + thisH);
}
}, 250);
}, delay);
};
$('.message').each(function (index) {
$(this).verticalMarquee(1, 1, index);
});
这就是我说过的所有内容的外观:
and that's how it looks with all the things I've said applied:
http://jsfiddle.net/Arimano/549Pa/
这篇关于调整速度jQuery动画气泡的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
