从灰度颜色创建动态渐变答案

【问题标题】：Creating dynamic gradient from a grayscale color从灰度颜色创建动态渐变
【发布时间】：2021-01-20 00:43:56
【问题描述】：

我正在尝试借助 color.js 库为灰度颜色生成渐变。下面的代码获取 CSS 变量 --color 并使用 devalueByAmount() 方法生成不同的色调。渐变已成功生成，但如果可能的话，我需要帮助以生成更平滑的渐变。

目前，渐变的起点和终点的颜色似乎太明显了。我想把它们弄脏，以便更顺畅地过渡。有什么想法可以实现这一目标吗？任何帮助将不胜感激！

const root = document.documentElement;
const Color = net.brehaut.Color;
const dropBy = 0.2;

let numOfTones = 500;
let color = Color(getComputedStyle(document.documentElement).getPropertyValue('--color'));

let scheme = [...Array(numOfTones).keys()].map((i, _, a) => {
  let drop = ((dropBy / numOfTones) * (i+1)).toFixed(3);
  let tone = (i != 0) ? color.devalueByAmount(drop) : color;
  return tone;
});

let grad = [...Array(numOfTones * 2).keys()].map((i, _, a) => {
  let numOfSteps = a.length - 2;
  let breakPoint = (((100 / 2) / (numOfSteps)) * (i-1)).toFixed(6);
  let colorNo = (i > numOfTones) ? numOfTones - (i - numOfTones) : i;
  let delimiter = i == (a.length - 1) ? ')' : ',';

  let s = `${(i < 1) ? `repeating-linear-gradient(90deg,` : `${scheme[colorNo - 1]} ${breakPoint}%${delimiter}`}`;

  return s;
}).join(' ');

root.style.setProperty('--grad', grad);
document.querySelector('div').classList.add('animate');

:root {
  --color: #545454;
}
html {
  height: 100vh;
}
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
div {
  width: 100%;
  height: 100%;
}
.animate {
  background: var(--grad);
  background-position: 400% 50%;
  background-size: 400% 400%;
  animation: gradient-animation 35s linear infinite;
}
@keyframes gradient-animation {
  0% { background-position: 400% 50% }
  100% { background-position: 0% 50% }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/color-js/1.0.1/color.min.js"></script>
<div></div>

【问题讨论】：

标签： javascript html css colors gradient

【解决方案1】：

我通过使用timing function 来控制丢弃值解决了这个问题。不知道为什么我以前没有想到这一点，但还是谢谢你。

-(Math.cos(Math.PI * x) - 1)

它现在生成更宽的端点。

const root = document.documentElement;
const Color = net.brehaut.Color;
const dropBy = 0.2;

let numOfTones = 500;

let color = Color(getComputedStyle(document.documentElement).getPropertyValue('--color'));

let incrementer = 0;
let scheme = [...Array(numOfTones).keys()].map((i, _, a) => {
  incrementer += 1 / numOfTones;
  let drop = dropBy * -(Math.cos(Math.PI * incrementer) - 1) / 2;
  let tone = (i != 0) ? color.devalueByAmount(drop) : color;
  return tone;
});

let grad = [...Array(numOfTones * 2).keys()].map((i, _, a) => {
  let numOfSteps = a.length - 2;
  let breakPoint = (((100 / 2) / (numOfSteps)) * (i-1)).toFixed(6);
  let colorNo = (i > numOfTones) ? numOfTones - (i - numOfTones) : i;
  let delimiter = i == (a.length - 1) ? ')' : ',';

  let s = `${(i < 1) ? `repeating-linear-gradient(90deg,` : `${scheme[colorNo - 1]} ${breakPoint}%${delimiter}`}`;

  return s;
}).join(' ');

root.style.setProperty('--grad', grad);
document.querySelector('div').classList.add('animate');

:root {
  --color: #545454;
}
html {
  height: 100vh;
}
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
div {
  width: 100%;
  height: 100%;
}
.animate {
  background: var(--grad);
  background-position: 400% 50%;
  background-size: 400% 400%;
  animation: gradient-animation 35s linear infinite;
}
@keyframes gradient-animation {
  0% { background-position: 400% 50% }
  100% { background-position: 0% 50% }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/color-js/1.0.1/color.min.js"></script>
<div></div>

【讨论】：