PropertyAnimation

PropertyAnimation

在過渡中使用

  Rectangle {
      id: rect
      width: 100; height: 100
      color: "red"

      states: State {
          name: "moved"
          PropertyChanges { target: rect; x: 50 }
      }

      transitions: Transition {
          PropertyAnimation { properties: "x,y"; easing.type: Easing.InOutQuad }
      }
  }

在Behavior

 Rectangle {
      width: 100; height: 100
      color: "red"

      Behavior on x { PropertyAnimation {} }

      MouseArea { anchors.fill: parent; onClicked: parent.x = 50 }
  }

在組合動畫中

  Rectangle {
      width: 100; height: 100
      color: "red"

      SequentialAnimation on x {
          loops: Animation.Infinite
          PropertyAnimation { to: 50 }
          PropertyAnimation { to: 0 }
      }
  }

在信號處理中

  MouseArea {
      anchors.fill: theObject
      onClicked: PropertyAnimation { target: theObject; property: "opacity"; to: 0 }
  }

單獨使用

  Rectangle {
      id: theRect
      width: 100; height: 100
      color: "red"

      // this is a standalone animation, it's not running by default
      PropertyAnimation { id: animation;
                          target: theRect;
                          property: "width";
                          to: 30;
                          duration: 500 }

      MouseArea { anchors.fill: parent; onClicked: animation.running = true }
  }