Hi,

Please consider the example below which pertains to this example:

Qt Code:
  1. import QtQuick 2.8
  2.  
  3. Rectangle {
  4. id: root
  5. width: 100
  6. height: 100
  7. clip: true
  8. property real value: 0.0
  9. property int pointCount: 100
  10. property string title
  11. signal clicked()
  12.  
  13. property alias easingType: anim.easing.type
  14.  
  15.  
  16. Image {
  17. anchors.fill: parent
  18. source: "blueprint.jpg"
  19. }
  20.  
  21. Rectangle {
  22. anchors.fill: view
  23. anchors.leftMargin: -8
  24. anchors.rightMargin: -8
  25. color: 'transparent'
  26. border.color: "#53d769"
  27. border.width: 4
  28. opacity: 0.5
  29.  
  30. }
  31.  
  32.  
  33. NumberAnimation {
  34. id: anim
  35. target: root
  36. property: 'value'
  37. from: 0
  38. to: 1
  39. duration: 3000
  40. }
  41.  
  42. ListModel {
  43. id: valueModel
  44. }
  45.  
  46. AnimationController {
  47. id: controller
  48. animation: anim
  49. Component.onCompleted: {
  50. valueModel.clear()
  51. for(var i=0; i<root.pointCount; i++) {
  52. progress = i/root.pointCount
  53. valueModel.append({value: root.value})
  54. }
  55. }
  56. }
  57.  
  58. PathView {
  59. id: view
  60. anchors.fill: parent
  61. anchors.topMargin: root.height*0.2
  62. anchors.bottomMargin: root.height*0.2
  63. model: valueModel
  64. pathItemCount: root.pointCount
  65. delegate: Item {
  66. width: 4; height: 4
  67. Rectangle {
  68. width: parent.width; height: width; radius: width/2
  69. y: -model.value*view.height
  70. color: "#ff8800"
  71. border.color: Qt.lighter(color, 1.2)
  72. opacity: 0.5
  73. }
  74. }
  75. path: Path {
  76. startX: 0
  77. startY: view.height
  78. PathLine {
  79. x: view.width
  80. y: view.height
  81. }
  82. }
  83. }
  84.  
  85. Text {
  86. anchors.horizontalCenter: parent.horizontalCenter
  87. anchors.bottom: parent.bottom
  88. color: '#fff'
  89. font.pixelSize: 14
  90. text: root.title
  91. }
  92.  
  93. MouseArea {
  94. anchors.fill: parent
  95. onClicked: root.clicked()
  96. }
  97. }
To copy to clipboard, switch view to plain text mode 

Please look at NumberAnimation there. It's used for drawing the curves not any animation! (I couldn't find such a feature in its description on Help).

As well as, what does its duration do? I changed it from 1000 to 19000 and saw no functional change!

'value' is a real (float) number (0.0) but when I use '0.0' instead of that in the code, it doesn't work.
What is its role here please?