创建动画渐变箭头

Question

我想创建动画渐变箭头。我想为箭头创建动画背景。我使用了以下代码，但它没有在箭头背景中显示动画渐变。

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

在您提供 mcve 的同时，我为您提供了一些动画 Canvas 渐变的近似示例：

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;
        }
    }
}

创建动画渐变箭头

Create animated gradients arrow

qt

qml

qt-quick

qtquickcontrols