PDA

View Full Version : Create animated gradient arrow



neda
9th November 2016, 12:34
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.centerW idth/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()
}
}
}

anda_skoa
9th November 2016, 19:06
Which value do you want to be animated?
Where is your animation setup?

Cheers,
_

neda
10th November 2016, 05:32
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.