Create animated gradients arrow

Question

I want to create animated gradient arrow. I want to create an animated background for arrow. I used the following code, but it does not show animated gradient in background of the arrow.

Canvas {
    id: arrowDown
    width: parent.height/3
    height: width
    antialiasing: true
    ...
    property real centerWidth: width / 2
    property real centerHeight: height / 2
    property real radius: (Math.min(arrowDown.width, arrowDown.height)*2) / (2*Math.PI)
    onPaint: {
        var ctx = getContext("2d");
        ctx.save();
        ctx.clearRect(0, 0, arrowDown.width, arrowDown.height);
        ctx.beginPath();
        ctx.lineWidth = 8;
        ctx.moveTo(arrowDown.centerWidth,arrowDown.centerHeight-arrowDown.radius/2);
        ctx.strokeStyle = secondaryColor
        ctx.lineTo(arrowDown.centerWidth,
                   arrowDown.centerHeight+arrowDown.radius/2);
        ctx.lineTo(arrowDown.centerWidth+arrowDown.centerWidth/4,
                   arrowDown.centerHeight+arrowDown.radius/4);
        ctx.moveTo(arrowDown.centerWidth,
                   arrowDown.centerHeight+arrowDown.radius/2);
        ctx.lineTo(arrowDown.centerWidth-arrowDown.centerWidth/4,
                   arrowDown.centerHeight+arrowDown.radius/4);
        var gradient = ctx.createLinearGradient(0, 0, 100, 100);
        gradient.addColorStop(0.3, Qt.rgba(1, 0, 0, 1));
        gradient.addColorStop(0.7, "white");
        ctx.stroke();
        ctx.restore();
    }
    Timer {
       ......
}

Answer 1

And while you are providing mcve, I've give you some close example of animating Canvas gradient:

import QtQuick 2.7
import QtQuick.Window 2.2

Window {
    visible: true
    width: 600
    height: 400

    Canvas {
        id: canvas
        width: 200
        height: 100
        anchors.centerIn: parent
        property double pos: 0.5
        onPaint: {
            var ctx = getContext("2d");
            var grd = ctx.createLinearGradient(0, height/2, width, height/2);
            grd.addColorStop(0, "red");
            grd.addColorStop(canvas.pos, "orange");
            grd.addColorStop(1,"red ");
            ctx.fillStyle=grd;
            ctx.fillRect(0, 0, width, height);
        }
        onPosChanged: {
            canvas.requestPaint();
        }
    }


    NumberAnimation {
        id: anim
        running: true
        target: canvas
        property: "pos"
        duration: 1000
        from: 0.9
        to: 0.1
        easing.type: Easing.InOutQuad

        onStopped: {
            var temp = anim.from;
            anim.from = anim.to;
            anim.to = temp;
            anim.running = true;
        }
    }
}