Create animated gradient arrow

[neda]

Hi,
I want to create animated gradient arrow. I used the following code, but it does not show animated gradient.

Canvas {
id: arrowDown
        width: parent.height/3
        height: width
        antialiasing: true
        anchors.centerIn: parent
 
        property color secondaryColor: "blue"
 
        property real centerWidth: width / 2
        property real centerHeight: height / 2
        property real radius: (Math.min(arrowDown.width, arrowDown.height)*2) / (2*Math.PI)
 
        onSecondaryColorChanged: requestPaint()
        onVisibleChanged: requestPaint()
 
        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 {
            interval: 200
            repeat: true
            running: true
 
            onTriggered: {
               ???
                arrowDown.requestPaint()
            }
        }
    }

Canvas {
id: arrowDown
        width: parent.height/3
        height: width
        antialiasing: true
        anchors.centerIn: parent

        property color secondaryColor: "blue"

        property real centerWidth: width / 2
        property real centerHeight: height / 2
        property real radius: (Math.min(arrowDown.width, arrowDown.height)*2) / (2*Math.PI)

        onSecondaryColorChanged: requestPaint()
        onVisibleChanged: requestPaint()

        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 {
            interval: 200
            repeat: true
            running: true

            onTriggered: {
               ???
                arrowDown.requestPaint()
            }
        }
    }

To copy to clipboard, switch view to plain text mode 

[anda_skoa]

Which value do you want to be animated?
Where is your animation setup?

Cheers,
_

[neda]

My decision changed. An array of arrows come from the top down (such as 3 arrow) and coming down arrows disappeared and all have gradient background.

All the above steps are in a loop.