无法创建十六进制值的渐变 - 由于形状的性质，传统的渐变笔触/填充不起作用

如何解决无法创建十六进制值的渐变 - 由于形状的性质，传统的渐变笔触/填充不起作用

所以我试图为弹簧设置动画。除了它的颜色，它都完成了。下面我附上了一张它应该是什么样子的图片，但是无论我自己尝试什么，都会得到一个纯色的春天。

Example of what I need to achieve

我将在下面包含我的代码。所以下面是我如何绘制它，但请注意 'fade hex' 函数，设置 'NowColour' 变量。这就是行为不正确的原因。

var holder = new createjs.MovieClip();
var dobj = new createjs.Shape();
holder.addChild(dobj);
dobj.graphics.clear();

for(let nLoop = 0; nLoop < 205; nLoop++){
        var startHex = 0x666666;// dark grey
        var endHex = 0x999999;//  light grey            
        var NowColor = calcs.fade_hex_spring(startHex,endHex,(1 + Math.cos(nLoop / 5))/2);
        dobj.graphics.setstrokeStyle(springThickness,'round','round').beginstroke(NowColor);

        nPoint = 10 + (20 - 10) * (nLoop / 5 + 2 * Math.cos(nLoop / 5)) / (204 / 5);
        dobj.graphics.lineto((0 - 495) + 30 * Math.sin(nLoop / 5),nPoint);
}

现在这是我的淡入淡出十六进制函数：

function fade_hex_spring(hex,hex2,ratio) {
        // //Attempt 1
        // var r = hex >> 16;
        // var g = hex >> 8 & 0xFF;
        // var b = hex & 0xFF;

        // r += ((hex2 >> 16) - r) * ratio;
        // g += ((hex2 >> 8 & 0xFF) - g) * ratio;
        // b += ((hex2 & 0xFF) - b) * ratio;

        // var result = (r << 16 | g << 8| b);
        // result = result.toString(16);

        // return  '#' + result;

        //Attempt 2
        var r = parseInt(String(hex).slice(1,3),16),g = parseInt(String(hex).slice(3,5),b = parseInt(String(hex).slice(5,7),16);

        var r2 = parseInt(String(hex2).slice(1,g2 = parseInt(String(hex2).slice(3,b2 = parseInt(String(hex2).slice(5,16);

        console.log(ratio)

        var r3 = roundTo((r2 - r) * ratio,0);
        g3 = roundTo((g2 - g) * ratio,0),b3 = roundTo((b2 - b) * ratio,0);
        // console.log(r3)

        return 'rgba(' + abs(r3) + 150 + ',' + abs(g3) + 150 + ',' + abs(b3) + 150 + ',1)';
    },

如您所见，我尝试通过十六进制和 rgb 值来实现。我记录了比率，它们似乎正确返回，但我的弹簧仍然是纯色。任何帮助将不胜感激！

谢谢