×
Namespaces

Variants
Actions

Using Flickable to implement a view change animation

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Tested with
Devices(s): E7, N8, N900
Compatibility
Platform(s): Symbian
Maemo
Symbian
Article
Keywords: QML, Flickable
Created: kratsan (27 Dec 2010)
Last edited: kiran10182 (31 Oct 2013)

Contents

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.

This page was last modified on 31 October 2013, at 22:58.
66 page views in the last 30 days.
×