Gradient Shader Works in 2.4.7 However Not in 3.8.2 – Cocos Creator

I assumed by offering details about vertex information of SLICED sprite, you may do the calculation your self, oh properly
Right here’s the code anyway, works for SIMPLE and SLICED sprite:

import { _decorator, coloration, Coloration, Element, lerp, macro, Sprite, UITransform } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('vert_color')
export class vert_color extends Element {
    begin() {
        this.schedule(() => {
            this.updateColor()
        }, 1, macro.REPEAT_FOREVER)
    }
    randomColor1() {
        const COLORS = [Color.BLUE, Color.CYAN, Color.GREEN];
        return COLORS[Math.floor(Math.random() * COLORS.length)]
    }
    randomColor2() {
        const COLORS = [Color.RED, Color.YELLOW, Color.MAGENTA];
        return COLORS[Math.floor(Math.random() * COLORS.length)]
    }
    updateColor () {
        let sprite = this.getComponent(Sprite)
        let vb = sprite['_renderData'].chunk.vb;
        let color1 = this.randomColor1();
        let color2 = this.randomColor2();
        let lb = color1, // left backside
        rb = color1, // proper backside
        lt = color2, // left high
        rt = color2; // proper high
        if (sprite.sort == Sprite.Kind.SIMPLE) {
            this.setVertexColor(vb, 0, lb);
            this.setVertexColor(vb, 1, rb);
            this.setVertexColor(vb, 2, lt);
            this.setVertexColor(vb, 3, rt);
        } else if (sprite.sort == Sprite.Kind.SLICED) {
            let measurement = this.node.getComponent(UITransform).contentSize;
            // @ts-ignore
            let borderSize = sprite.spriteFrame._capInsets;
            let ratioLeft = borderSize[0] / measurement.width;
            let ratioTop = borderSize[1] / measurement.top;
            let ratioRight = borderSize[2] / measurement.width;
            let ratioBottom = borderSize[3] / measurement.top;
            let c4: Coloration, c8: Coloration, c7: Coloration, c11: Coloration;
            this.setVertexColor(vb, 0, lb);
            this.setVertexColor(vb, 3, rb);
            this.setVertexColor(vb, 12, lt);
            this.setVertexColor(vb, 15, rt);
            this.setVertexColor(vb, 1, this.lerpColor(lb, rb, ratioLeft));
            this.setVertexColor(vb, 2, this.lerpColor(rb, lb, ratioRight));
            this.setVertexColor(vb, 4, c4 = this.lerpColor(lb, lt, ratioBottom));
            this.setVertexColor(vb, 8, c8 = this.lerpColor(lt, lb, ratioTop));
            this.setVertexColor(vb, 13, this.lerpColor(lt, rt, ratioLeft));
            this.setVertexColor(vb, 14, this.lerpColor(rt, lt, ratioRight));
            this.setVertexColor(vb, 7, c7 = this.lerpColor(rb, rt, ratioBottom));
            this.setVertexColor(vb, 11, c11 = this.lerpColor(rt, rb, ratioTop));
            this.setVertexColor(vb, 5, this.lerpColor(c4, c7, ratioLeft));
            this.setVertexColor(vb, 6, this.lerpColor(c7, c4, ratioRight));
            this.setVertexColor(vb, 9, this.lerpColor(c8, c11, ratioLeft));
            this.setVertexColor(vb, 10, this.lerpColor(c11, c8, ratioRight));
        }
    }
    lerpColor(color1: Coloration, color2: Coloration, t: quantity) {
        return coloration(
            lerp(color1.r, color2.r, t),
            lerp(color1.g, color2.g, t),
            lerp(color1.b, color2.b, t),
            lerp(color1.a, color2.a, t)
        )
    }
    setVertexColor (vbo: Float32Array, vertexIndex: quantity, coloration: Coloration) {
        vbo[vertexIndex * 9 + 5] = coloration.r / 255;
        vbo[vertexIndex * 9 + 6] = coloration.g / 255;
        vbo[vertexIndex * 9 + 7] = coloration.b / 255;
        vbo[vertexIndex * 9 + 8] = coloration.a / 255;
    }
}