QML AnchorAnimation Element

Detailed Description

AnchorAnimation is used to animate an anchor change.

In the following snippet we animate the addition of a right anchor to a Rectangle:

 import QtQuick 1.0

 Item {
     id: container
     width: 200; height: 200

     Rectangle {
         id: myRect
         width: 100; height: 100
         color: "red"
     }

     states: State {
         name: "reanchored"
         AnchorChanges { target: myRect; anchors.right: container.right }
     }

     transitions: Transition {
         // smoothly reanchor myRect and move into new position
         AnchorAnimation { duration: 1000 }
     }

     Component.onCompleted: container.state = "reanchored"
 }

For convenience, when an AnchorAnimation is used in a Transition, it will animate any AnchorChanges that have occurred during the state change. This can be overridden by setting a specific target item using the target property.

Like any other animation element, an AnchorAnimation can be applied in a number of ways, including transitions, behaviors and property value sources. The QML Animation and Transitions documentation shows a variety of methods for creating animations.

See also QML Animation and Transitions and AnchorChanges.

Property Documentation

 AnchorAnimation { easing.type: Easing.InOutQuad }