QML Animation and Transitions

Transitions during State Changes

States are property configurations where a property may have different values to reflect different states. State changes introduce abrupt property changes; animations smooth transitions to produce visually appealing state changes.

The Transition element can contain animation elements to interpolate property changes caused by state changes. To assign the transition to an object, bind it to the transitions property.

A button might have two states, the pressed state when the user clicks on the button and a released state when the user releases the button. We can assign different property configurations for each state. A transition would animate the change from the pressed state to the released state. Likewise, there would be an animation during the change from the released state to the pressed state.

 Rectangle {
     width: 75; height: 75
     id: button
     state: "RELEASED"

     MouseArea {
         anchors.fill: parent
         onPressed: button.state = "PRESSED"
         onReleased: button.state = "RELEASED"
     }

     states: [
         State {
             name: "PRESSED"
             PropertyChanges { target: button; color: "lightblue"}
         },
         State {
             name: "RELEASED"
             PropertyChanges { target: button; color: "lightsteelblue"}
         }
     ]

     transitions: [
         Transition {
             from: "PRESSED"
             to: "RELEASED"
             ColorAnimation { target: button; duration: 100}
         },
         Transition {
             from: "RELEASED"
             to: "PRESSED"
             ColorAnimation { target: button; duration: 100}
         }
     ]
 }

Binding the to and from properties to the state's name will assign that particular transition to the state change. For simple or symmetric transitions, setting the to to property to the wild card symbol, "*", denotes that the transition applies to any state change.

     transitions:
         Transition {
             to: "*"
             ColorAnimation { target: button; duration: 100}
         }

 Rectangle {
     width: 75; height: 75; radius: width
     id: ball
     color: "salmon"

     Behavior on x {
         NumberAnimation {
             id: bouncebehavior
             easing {
                 type: Easing.OutElastic
                 amplitude: 1.0
                 period: 0.5
             }
         }
     }
     Behavior on y {
         animation: bouncebehavior
     }
     Behavior {
         ColorAnimation { target: ball; duration: 100 }
     }
 }

 Rectangle {
     id: banner
     width: 150; height: 100; border.color: "black"

     Column {
         anchors.centerIn: parent
         Text {
             id: code
             text: "Code less."
             opacity: 0.01
         }
         Text {
             id: create
             text: "Create more."
             opacity: 0.01
         }
         Text {
             id: deploy
             text: "Deploy everywhere."
             opacity: 0.01
         }
     }

     MouseArea {
         anchors.fill: parent
         onPressed: playbanner.start()
     }

     SequentialAnimation {
         id: playbanner
         running: false
         NumberAnimation { target: code; property: "opacity"; to: 1.0; duration: 200}
         NumberAnimation { target: create; property: "opacity"; to: 1.0; duration: 200}
         NumberAnimation { target: deploy; property: "opacity"; to: 1.0; duration: 200}
     }
 }