Question

我一直致力于动画我网站的背景，我有一个可视化工具，所以我已经制作了两个同时具有颜色的列表：

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);，如果是这样的话，还有其他简单的方法来做我想要实现的目标吗？

Answer 1

我已经弄明白了，我已经取代了 window.requestAnimationFrame(frenzyModeBG);
与
window.setInterval(function(){ frenzyModeBG() }, 7500);

在背景颜色的同时更改fillStyle

1 个答案: