創建動畫漸變箭頭

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