Home · All Classes · All Functions · Overviews

QML Animation

Animation in QML is done by animating properties of objects. Properties of type real, int, color, rect, point, size, and vector3d can all be animated.

QML supports three main forms of animation - basic property animation, transitions, and property behaviors.

Basic Property Animation

The simplest form of animation is directly using PropertyAnimation, which can animate all of the property types listed above. If the property you are animating is a number or color, you can alternatively use NumberAnimation or ColorAnimation. These elements don't add any additional functionality, but will help enforce type correctness and are slightly more efficient.

A property animation can be specified as a value source. This is especially useful for repeating animations.

The following example creates a bouncing effect:

 Rectangle {
     id: rect
     width: 120; height: 200;
     Image {
         id: img
         source: "qt-logo.png"
         x: 60-img.width/2
         y: 0
         y: SequentialAnimation {
             repeat: true
             NumberAnimation { to: 200-img.height; easing.type: "OutBounce"; duration: 2000 }
             PauseAnimation { duration: 1000 }
             NumberAnimation { to: 0; easing.type: "OutQuad"; duration: 1000 }
         }
     }
 }

When you assign an animation as a value source, you do not need to specify property or target; they are automatically selected for you. You do, however, need to specify to. An animation specified as a value source will be running by default.

 Rectangle {
     id: rect
     width: 200; height: 200;
     Rectangle {
         color: "red"
         width: 50; height: 50
         x: NumberAnimation { to: 50; }
     }
 }

A property animation can also be specified as a resource that is manipulated from script.

 PropertyAnimation {
     id: animation
     target: image
     property: "scale"
     from: 1; to: .5
 }
 Image {
     id: image
     source: "image.png"
     MouseArea {
         anchors.fill: parent
         onPressed: animation.start()
     }
 }

As can be seen, when an animation is used like this (as opposed to as a value source) you will need to explicitly set the target and property to animate.

Animations can be joined into a group using SequentialAnimation and ParallelAnimation.

Transitions

QML transitions describe animations to perform when state changes occur. A transition can only be triggered by a state change.

For example, a transition could describe how an item moves from its initial position to its new position:

 transitions: [
     Transition {
         NumberAnimation {
             properties: "x,y"
             easing.type: "OutBounce"
             duration: 200
         }
     }
 ]

As can be seen, transitions make use of the same basic animation classes introduced above. In the above example we have specified that we want to animate the x and y properties, but have not specified the objects to animate or the to values. By default these values are supplied by the framework -- the animation will animate any targets whose x and y have changed, and the to values will be those defined in the end state. You can always supply explicit values to override these implicit values when needed.

 Transition {
     from: "*"
     to: "MyState"
     reversible: true
     SequentialAnimation {
         NumberAnimation {
             duration: 1000
             easing.type: "OutBounce"
             // animate myItem's x and y if they have changed in the state
             target: myItem
             properties: "x,y"
         }
         NumberAnimation {
             duration: 1000
             // animate myItem2's y to 200, regardless of what happens in the state
             target: myItem2
             property: "y"
             to: 200
         }
     }
 }

QML transitions have selectors to determine which state changes a transition should apply to. The following transition will only be triggered when we enter into the "details" state.

 Transition {
     from: "*"
     to: "details"
     ...
 }

Transitions can happen in parallel, in sequence, or in any combination of the two. By default, the top-level animations in a transition will happen in parallel. The following example shows a rather complex transition making use of both sequential and parallel animations:

 Transition {
     from: "*"
     to: "MyState"
     reversible: true
     SequentialAnimation {
         ColorAnimation { duration: 1000 }
         PauseAnimation { duration: 1000 }
         ParallelAnimation {
             NumberAnimation {
                 duration: 1000
                 easing.type: "OutBounce"
                 targets: box1
                 properties: "x,y"
             }
             NumberAnimation {
                 duration: 1000
                 targets: box2
                 properties: "x,y"
             }
         }
     }
 }

Property Behaviors

A property behavior specifies a default animation to run whenever the property's value changes, regardless of what caused the change. The enabled property can be used to force a Behavior to only apply under certain circumstances.

In the following snippet, we specify that we want the x position of redRect to be animated whenever it changes. The animation will last 300 milliseconds and use an InOutQuad easing curve.

 Rectangle {
     id: redRect
     color: "red"
     width: 100; height: 100
     x: Behavior { NumberAnimation { duration: 300; easing.type: "InOutQuad" } }
 }

Like using an animation as a value source, when used in a Behavior and animation does not need to specify a target or property.

To trigger this behavior, we could:

If x were bound to another property, triggering the binding would also trigger the behavior.

If a state change has a transition animation matching a property with a Behavior, the transition animation will override the Behavior for that state change.


Copyright © 2010 Nokia Corporation and/or its subsidiary(-ies) Trademarks
Qt 4.7.0