Javascript 从灰度颜色创建动态渐变

我试图在库的帮助下为灰度颜色生成渐变。下面的代码获取CSS变量

--color

，并使用

devalueByAmount（）

方法生成不同的音调。梯度成功生成，但是如果可能，我需要帮助生成更平滑的梯度

目前，渐变起点和终点的颜色似乎太明显。我想把它们涂掉，以便过渡更平滑。有什么办法可以做到这一点吗？任何帮助都将不胜感激

const root=document.documentElement；
const Color=net.brehaut.Color；
常数下降=0.2；
设numOfTones=500；
让color=color（getComputedStyle（document.documentElement）.getPropertyValue（'--color'））；
让scheme=[…数组（numOfTones）.keys（）].map（（i，u2;，a）=>{
let drop=（（dropBy/numOfTones）*（i+1））.toFixed（3）；
让色调=（i！=0）？颜色。按金额贬值（下降）：颜色；
回音；
});
让grad=[…数组（numOfTones*2）.keys（）].map（（i，u，a）=>{
设numOfSteps=a.length-2；
设断点=（（100/2）/（numOfSteps））*（i-1））.toFixed（6）；
设colorNo=（i>numOfTones）？numOfTones-（i-numOfTones）：i；
让分隔符=i==（a.length-1）？'）：'，'；
设s=`${（i<1）``重复线性梯度（90度，`:`${scheme[colorNo-1]}${breakPoint}%${delimiter}}`；
返回s；
}).加入（“”）；
root.style.setProperty（'--grad'，grad）；
document.querySelector（'div'）.classList.add（'animate'）
：根目录{
--颜色：#5454；
}
html{
高度：100vh；
}
身体{
保证金：0；
填充：0；
身高：100%；
}
div{
宽度：100%；
身高：100%；
}
.制作动画{
背景：var（--梯度）；
背景位置：400%50%；
背景大小：400%400%；
动画：渐变动画35s线性无限；
}
@关键帧渐变动画{
0%{背景位置：400%50%}
100%{背景位置：0%50%}
}
我通过使用a控制下降值解决了这个问题。不知道为什么我以前没想到这个，不过还是谢谢你

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

现在，它产生了更宽的端点


const root=document.documentElement；
const Color=net.brehaut.Color；
常数下降=0.2；
设numOfTones=500；
让color=color（getComputedStyle（document.documentElement）.getPropertyValue（'--color'））；
设递增器=0；
让scheme=[…数组（numOfTones）.keys（）].map（（i，u2;，a）=>{
递增器+=1/个音调；
让drop=dropBy*-（Math.cos（Math.PI*递增器）-1）/2；
让色调=（i！=0）？颜色。按金额贬值（下降）：颜色；
回音；
});
让grad=[…数组（numOfTones*2）.keys（）].map（（i，u，a）=>{
设numOfSteps=a.length-2；
设断点=（（100/2）/（numOfSteps））*（i-1））.toFixed（6）；
设colorNo=（i>numOfTones）？numOfTones-（i-numOfTones）：i；
让分隔符=i==（a.length-1）？'）：'，'；
设s=`${（i<1）``重复线性梯度（90度，`:`${scheme[colorNo-1]}${breakPoint}%${delimiter}}`；
返回s；
}).加入（“”）；
root.style.setProperty（'--grad'，grad）；
document.querySelector（'div'）.classList.add（'animate'）
：根目录{
--颜色：#5454；
}
html{
高度：100vh；
}
身体{
保证金：0；
填充：0；
身高：100%；
}
div{
宽度：100%；
身高：100%；
}
.制作动画{
背景：var（--梯度）；
背景位置：400%50%；
背景大小：400%400%；
动画：渐变动画35s线性无限；
}
@关键帧渐变动画{
0%{背景位置：400%50%}
100%{背景位置：0%50%}
}