Question

我正在尝试向我的网站添加一个按钮，该按钮将更改线性渐变动画中的两种渐变颜色之一。该动画目前正在运行，并在我的网站后台运行。

动画javascript如下

var angle = 0 

var changeBackground = function (){
angle = angle + 1

document.body.style.backgroundImage = "linear-gradient(" + angle +"deg, #000000, #666"
requestAnimationFrame(changeBackground)
}

changeBackground ()

我要添加此html按钮。当您单击它时，以上动画中的颜色＃666将切换为＃d22c1f。

<button class="Btn" id="myBtn">Click</button>

我发现这个“ https://codepen.io/Chrono79/pen/YxyJqw”非常接近，但是我无法在动画中实现此代码。我也只希望它在两种颜色之间切换，并且在此示例中，它会生成随机的rgb颜色。

Answer 1

颜色变量以及按钮上的事件监听器，您可以在2种颜色之间切换

堆栈片段

var angle = 0, color = "#666";

var changeBackground = function() {
  angle = angle + 1
  document.body.style.backgroundImage = "linear-gradient(" + angle + "deg, #000000, " + color;
  requestAnimationFrame(changeBackground)
}

changeBackground()

document.querySelector('#myBtn').addEventListener('click', function () {
  color = (color != "#666") ? "#666" : "#d22c1f";
})

<button class="Btn" id="myBtn">Click</button>

Answer 2

该实现如何？

var angle = 0;

var changeBackground = function (){
  angle += 1;
  document.body.style.backgroundImage = "linear-gradient(" + angle +"deg, 
  #000000, #666"
  var interval = setInterval(function(){
    angle += 1;
    document.body.style.backgroundImage = "linear-gradient(" + angle +"deg, 
#000000, #666"
    if (angle % 90 === 0) clearInterval(interval);
  }, 5)
}

https://jsbin.com/xamolumove/edit?html,js,output

使用JavaScript更改动画背景中的渐变颜色

2 个答案: