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

Question

所以我试图为 spring 制作动画。 除了上色外，一切都完成了。 下面我附上了一张它应该是什么样子的图片，但是无论我自己尝试什么，结果都是纯色 spring。

我需要实现的示例

我将在下面包含我的代码。 所以以下是我如何绘制它，但请注意“渐变十六进制”function，设置“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：

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), 16),
        b = parseInt(String(hex).slice(5, 7), 16);

        var r2 = parseInt(String(hex2).slice(1, 3), 16),
        g2 = parseInt(String(hex2).slice(3, 5), 16),
        b2 = parseInt(String(hex2).slice(5, 7), 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)';
    },

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

谢谢