改变背景颜色的同时改变填充样式答案

【问题标题】：changing fillStyle at the same time as the background color改变背景颜色的同时改变填充样式
【发布时间】：2015-06-09 07:08:29
【问题描述】：

我一直在为我的网站的背景制作动画，并且我有一个可视化器在它后面，所以我制作了两个列表，其中包含它们应该同时具有的颜色：

var frenzyModeColors = ["#BC49FF", "#574FFF", "#47FFF2", "#3AFF3D", "#9FFF4C", "#EFFF49", "#FF8A54", "#FF4C4C"];
var frenzyModeVisualizerColors = ["#FF6B83", "#FF8C3F", "#3D81FF", "#5BD3FF", "#FF962D", "#FF0004", "#FF4300", "#D8FF4F"];

但由于某种原因，可视化工具变得疯狂并不断切换颜色，而不是采用一种颜色并在当前颜色和新颜色之间进行平滑过渡

这是我的代码：

//frenzy mode background
function frenzyModeBG() {
    window.requestAnimationFrame(frenzyModeBG);
    if (frenzyMode == 1) {
        $("#BGFrenzy").css("opacity", 1);
        $("#visualizer").css("opacity", 1);
        $("#BGFrenzy").animate({ backgroundColor : randomRgb() }, 2500);
        ctx.fillStyle = frenzyModeVisualizerColors[BGcolor];
    }
    else {
        $("#BGFrenzy").css("opacity", 0);
        $("#visualizer").css("opacity", 0.1);
    }
};

here's the website （进入媒体播放器的选项选项卡并激活疯狂模式以查看问题）

我尝试过这样做：

$("#BGFrenzy").animate({ backgroundColor : randomRgb() }, 2500, function(){
    ctx.fillStyle = frenzyModeVisualizerColors[BGcolor];
});

但它仍然无法正常工作

我几乎可以肯定这是因为window.requestAnimationFrame(frenzyModeBG);，如果是这样的话，还有其他简单的方法可以实现我想要实现的目标吗？

【问题讨论】：

标签： jquery arrays html canvas

【解决方案1】：

我想通了，我已经替换了
window.requestAnimationFrame(frenzyModeBG);
与
window.setInterval(function(){ frenzyModeBG() }, 7500);

【讨论】：