编辑:拉斐尔Rafatpanah指出,requestAnimationFrame()
不会在浏览器中运行。在推荐时我不了解上下文。 setTimeout()
是非浏览器专用的,可能是您最好的选择。
编辑2:修复错误范围界定
var fadeAmount = 0.01;
var waitTime = 250; // milliseconds == 0.25 seconds
var textOverlay = this.textOverlay;
function textFade() {
setTimeout(function() {
if (textOverlay.alpha >= 0) {
textOverlay.alpha -= fadeAmount;
textFade();
}
}, waitTime);
}
textFade();
这将通过fadeAmount每WAITTIME毫秒递减alpha值。玩弄fadeAmount和waitTime变量来找到你喜欢的速率。
如果您在浏览器中使用为,则可以使用requestAnimationFrame()和循环计数器,它将动画与浏览器的渲染周期相关联。
var fadeAmount = 0.01;
var n = 24;
var textOverlay = this.textOverlay;
function textFade() {
requestAnimationFrame(function (cycle) {
if (textOverlay.alpha >= 0) {
textOverlay.alpha -= fadeAmount;
}
if (cycle % n !== 0) {
cycle++;
textFade(cycle);
}
});
}
// Call with initial cycle value:
textFade(0);
这会通过fadeAmount每n帧递减α值。玩弄fadeAmount和n个变量来找到你喜欢的速度。更多信息上requestAnimationFrame()
查看文档:https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
不要在紧密循环一样,改变DOM - 你不会看到它的发生是因为“渲染”不会发生直到你的JS代码完成 –
如果你想要很好的平滑“过渡”...尝试使用[CSS转换](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions) –