FreeKill/qml/Pages/RoomElement/IndicatorLine.qml

import QtQuick 2.15

Item {
  property point start: Qt.point(0, 0)
  property var end: []
  property alias running: pointToAnimation.running
  property color color: "#96943D"
  property real ratio: 0
  property int lineWidth: 6

  signal finished()

  id: root
  anchors.fill: parent

  Repeater {
    model: end

    Rectangle {
      width: 6
      height: Math.sqrt(Math.pow(modelData.x - start.x, 2) + Math.pow(modelData.y - start.y, 2)) * ratio
      x: start.x
      y: start.y
      antialiasing: true

      gradient: Gradient {
        GradientStop {
          position: 0
          color: Qt.rgba(255, 255, 255, 0)
        }
        GradientStop {
          position: 1
          color: Qt.rgba(200, 200, 200, 0.12)
        }
      }

      Rectangle {
        anchors.horizontalCenter: parent.horizontalCenter
        width: 3
        height: parent.height
        antialiasing: true

        gradient: Gradient {
          GradientStop {
            position: 0
            color: Qt.rgba(255, 255, 255, 0)
          }
          GradientStop {
            position: 1
            color: Qt.lighter(root.color)
          }
        }
      }

      transform: Rotation {
        angle: 0

        Component.onCompleted: {
          var dx = modelData.x - start.x;
          var dy = modelData.y - start.y;
          if (dx > 0) {
            angle = Math.atan2(dy, dx) / Math.PI * 180 - 90;
          } else if (dx < 0) {
            angle = Math.atan2(dy, dx) / Math.PI * 180 + 270;
          } else if (dy < 0) {
            angle = 180;
          }
        }
      }
    }
  }

  SequentialAnimation {
    id: pointToAnimation

    PropertyAnimation {
      target: root
      property: "ratio"
      to: 1
      easing.type: Easing.OutCubic
      duration: 200
    }

    PauseAnimation {
      duration: 200
    }

    PropertyAnimation {
      target: root
      property: "opacity"
      to: 0
      easing.type: Easing.InQuart
      duration: 300
    }

    onStopped: {
      root.visible = false;
      root.finished();
    }
  }
}