PropertyAnimation Class Reference

The PropertyAnimation element animates changes in property values. More...

Inheritance diagram for PropertyAnimation:

Detailed Description

The PropertyAnimation element animates changes in property values.

Since

4.7

PropertyAnimation provides a way to animate changes to a property's value.

It can be used to define animations in a number of ways:

• In a Transition

  For example, to animate any objects that have changed their x or y properties as a result of a state change, using an InOutQuad easing curve:

  Rectangle {
      id: rect
      width: 100; height: 100
      color: "red"
  
      //! [single state]
      states: State {
          name: "moved"
          PropertyChanges { target: rect; x: 50 }
      }
      //! [single state]
  
      transitions: Transition { 
          PropertyAnimation { properties: "x,y"; easing.type: Easing.InOutQuad } 
      }
  }

• In a Behavior

  For example, to animate all changes to a rectangle's x property:

  Rectangle {
      width: 100; height: 100
      color: "red"
  
      Behavior on x { PropertyAnimation {} }
  
      MouseArea { anchors.fill: parent; onClicked: parent.x = 50 }
  }

• As a property value source

  For example, to repeatedly animate the rectangle's x property:

  Rectangle {
      width: 100; height: 100
      color: "red"
  
      SequentialAnimation on x {
          loops: Animation.Infinite
          PropertyAnimation { to: 50 }
          PropertyAnimation { to: 0 }
      }
  }

• In a signal handler

  For example, to fade out theObject when clicked:

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

• Standalone

  For example, to animate rect's width property over 500ms, from its current width to 30:

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

Depending on how the animation is used, the set of properties normally used will be different. For more information see the individual property documentation, as well as the QML Animation and Transitions introduction.

Note that PropertyAnimation inherits the abstract Animation element. This includes additional properties and methods for controlling the animation.

See also

{QML Animation and Transitions}, {declarative/animation/basics}{Animation basics example}

---

The documentation for this class was generated from the following file:

• /src/declarative/util/qdeclarativeanimation.cpp