Использование 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

Цветовая переменная вместе со слушателем событий на вашей кнопке, и вы можете переключаться между 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