如何在 JavaScript 中的渐变之间平滑淡入淡出答案

【问题标题】：How to fade smoothly between gradients in JavaScript如何在 JavaScript 中的渐变之间平滑淡入淡出
【发布时间】：2025-12-24 15:15:16
【问题描述】：

此代码使用 jQuery 的 .animate() 方法使用一组预定义的渐变填充 div 并在循环中淡入淡出：

/// Background Gradient Cycler
var gradients = [
  ['#9eb5d7', '#242424'],
  ['#efe2ae', '#a8acc9'],
  ['#6f7554', '#eee1ad']
]
var gradientsRev = gradients.reverse()
var gradientCover = document.getElementById('gradientCover');
for (var g = 0; g < gradientsRev.length; g++) {
  var gradEl = document.createElement('div')
  gradEl.className = 'gradient'
  gradEl.style.background = `linear-gradient(${gradientsRev[g][0]}, ${gradientsRev[g][1]})`;
  gradientCover.appendChild(gradEl)
}
var gradientEls = document.querySelectorAll('#gradientCover .gradient')

function gradientCycler() {
  function gradeFade(i, opDest) {
    var fadeDur = 20000
    $(gradientEls[i]).animate({
      'opacity': opDest
    }, {
      duration: fadeDur,
      complete: function() {
        if (parseInt(i) > 1) {
          if (parseInt(opDest) === 0) gradeFade(i - 1, 0)
          else gradFadeStart()
        } else {
          gradeFade(gradientEls.length - 1, 1)
        }
      }
    })
  }
  var gradFadeStart = function() {
    $('.gradient').css('opacity', 1);
    gradeFade(gradientEls.length - 1, 0)
  }
  gradFadeStart()
}
gradientCycler()

body {
  margin: 0;
  overflow: hidden;
}

#gradientCover,
.gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<div id="page">
  <div id="gradientCover"></div>
</div>

问题是某些部分的过渡明显不连贯，带有条带伪影--

可以做些什么来减少这种伪影，从而使渐变之间的过渡看起来更平滑且不那么不稳定？

【问题讨论】：

您能否将相关的 HTML 添加到问题中，以便我们可以看到实际代码工作，而不是它的图像。不过，条纹问题可能是由于显示器的颜色深度造成的。
@RoryMcCrossan 已更新为完整的 html。我明白了，那么在这种情况下，有什么方法可以在具有不同颜色深度的显示器上改进它？
对我来说看起来不错，可能是你的显示器故障
我遇到了与@AHaworth 相同的性能问题，而且我使用的不是慢速 PC。我强烈建议您将任何繁重的 UI 渲染逻辑移至 CSS，可以这样完成：codepen.io/P1N2O/pen/pyBNzX.
@RoryMcCrossan 的链接代码将 GPU 负载降低到原始代码的一半左右，因此绝对值得研究 - 尽管如果作为后台连续运行，仍然有一点潜在的电池扁平化。跨度>

标签： javascript jquery css

【解决方案1】：

我认为与color depth有关，作为一名前CG艺术家，我在Maya和Photoshop等软件中看到了这些“人工制品”，为了解决这个问题，必须增加每个通道的位数（in Photoshop going from 8 Bits/Channel to 16 )。

通常，当渐变的两种颜色接近 （就 RGB 值而言）时，会出现此条带问题，因为这两种颜色之间可用的颜色值很少

如果渐变被渲染或显示（由于监视器限制）每个通道的位数较低，则可能会出现这些条带效应。

您可以查看您的monitor color depth here。

你也可以根据这个值应用CSS：

if (screen.colorDepth <= 8)
  //simple blue background color for 8 bit screens
  document.body.style.background = "#0000FF"
else
  //fancy blue background color for modern screens
  document.body.style.background = "#87CEFA"

【讨论】：