Thi*_*lem 3 javascript jquery animation blink
我用很少的吉祥物创建这个网站,我将实现一个"眨眼计时器",我会让每个吉祥物都眨眼.
我的问题是:我如何实现(以及它有多长?)闪烁和眨眼之间的延迟,在任何语言上(我可能会使用Javascript,但现在没关系).
有没有关于"眨眼算法"的资源或类似的东西?
编辑:我知道如何使用setTimeout和setInterval,我的问题更多的是关于算法而不是实现本身.
最后结果:
var blink = {
delay: function() {
return Math.random() * 8000 + 2000;
},
duration: function() {
return 100 + Math.floor(Math.random() * 100);
},
blinkAgain: function() {
return (Math.random() < .2);
},
betweenBliks: function() {
return blink.duration() / 2;
}
};
$.fn.blink = function(continueBlinking) {
var $element = $(this);
// Star the blink
$element.addClass('blink');
// Finish the blink
setTimeout(function() {
$element.removeClass('blink');
// Change of blinking again
if (blink.blinkAgain()) {
setTimeout(function() {
$element.blink(false);
}, blink.betweenBliks());
}
}, blink.duration());
// Continue blinking?
if (continueBlinking) {
setTimeout(function() {
$element.blink(true);
}, blink.delay());
}
};
Run Code Online (Sandbox Code Playgroud)
眨眼率变化,但平均每五秒钟眨眼一次.这
相当于每天17,000次,每年625万次.
假设你有一个blink"闪烁"的功能,你可能只想做这样的事情:
setInterval(blink, 5000); // 5000ms i.e. 5s
Run Code Online (Sandbox Code Playgroud)
如果你想在眨眼中再多一点"随机性",你可以做以下事情:
function blink() {
[...] // The blinking
setTimeout(blink, 5000 + ((Math.random() - 0.5) * 2000));
}
Run Code Online (Sandbox Code Playgroud)
如果我的计算是正确的话,将在4000和6000ms之间以随机方式调用闪烁函数,因为它Math.random()返回介于0.0和1.0之间的值,因此"Math.random() - 0.5"将介于-0.5和0.5之间.那个时间2000将导致-1000到1000之间的值.
| 归档时间: |
|
| 查看次数: |
1648 次 |
| 最近记录: |