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

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

这个实现怎么样？

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

Answer 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>

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

Using javascript to change gradient colors in animated background

javascript

animation

gradient