title: PropertyAnimation vs. NumberAnimation
body: <p>The QML code below animates two rectangles. One uses <a href="https://doc.qt.io/qt-5/qml-qtquick-propertyanimation.html" rel="nofollow noreferrer"><code>PropertyAnimation</code></a>, while the other uses <a href="https://doc.qt.io/qt-5/qml-qtquick-numberanimation.html" rel="nofollow noreferrer"><code>NumberAnimation</code></a>. Both rectangles move similarly. I don't see anything different between the two animation types.</p>
  
  <pre><code>import QtQuick 2.0
  import QtQuick.Window 2.0
  
  Window {
      visible: true
      width: 640
      height: 480
  
      Rectangle {
          id: r1
          width: 100; height: 100
          color: "red"
  
          Behavior on x { PropertyAnimation {} }
      }
  
      Rectangle {
          id: r2
          y: 150
          width: 100; height: 100
          color: "blue"
  
          Behavior on x { NumberAnimation {} }
      }
  
      // click anywhere to start animation
      MouseArea { anchors.fill: parent; onClicked: r1.x = r2.x = 200 }
  }
  </code></pre>
  
  <p>What is the difference between <code>PropertyAnimation</code> and <code>NumberAnimation</code>; and when should I use one over the other?</p>