Overview

This article demonstrates how to create a transition animation between two views by using Flickable in non-interactive mode. The two rectangles representing the views are placed inside a flickable one on top of the another in y-direction. Both of the views are exactly same size than the base size of the UI. The flickable is then controlled by a MouseArea to set the contentY property to switch the view.

This technique was used in the Nokia Developer example Dj Turntable to switch between views.

Preconditions

• Qt 4.7 or higher is installed on your platform.

Source

import Qt 4.7
 
Item {
    id: base
 
    width: 640; height: 360
 
    Component.onCompleted: flickable.state = "view1"
 
    Flickable {
        id: flickable
 
        anchors.fill: parent
        interactive: false
 
        Rectangle {
            id: view1
 
            width: base.width; height: base.height
            color: "black"
 
            Text { anchors.centerIn: parent; text: "View 1"; color: "white" }
        }
 
        Rectangle {
            id: view2
 
            width: base.width; height: base.height; y: height
            color: "gray"
 
            Text { anchors.centerIn: parent; text: "View 2"; color: "white" }
        }
 
        states: [
            State {
                name: "view1"
                PropertyChanges { target: flickable; contentY: 0 }
            },
            State {
                name: "view2"
                PropertyChanges { target: flickable; contentY: base.height }
            }
        ]
 
        transitions: Transition {
            PropertyAnimation { property: "contentY"; easing.type: Easing.InOutQuart; duration: 750 }
        }
    }
 
    MouseArea {
        anchors.fill: parent
        onClicked: {
            if(flickable.state == "view1") { flickable.state = "view2" }
            else { flickable.state = "view1" }
        }
    }
}

Postconditions

The Flickable element was used in non-interactive mode to implement a view change transition.