×
Namespaces

Variants
Actions

Turnstile Menu using Qt Quick

From Nokia Developer Wiki
Jump to: navigation, search

This article demonstrates how to create a Turnstile menu using Qt Quick.

Article Metadata
Code Example
Installation file: Media: TurnstileQML.sis
Tested with
Devices(s): N8 (Nokia Belle)
Compatibility
Platform(s): Symbian^3 OS
Symbian
Symbian^3
Platform Security
Signing Required: Self-Signed
Article
Keywords: Rotation, Image, Transition
Created: somnathbanik (03 Apr 2012)
Last edited: hamishwillee (11 Oct 2012)

Contents

Introduction

In this article we will see how to create a Turnstile menu using QML Rotation Element. We will create four Images and will set the Rotation angle and origin to zero as default. When we click on any of the menu we change its angle and (x,y) origin . For each Image we set a Transition time duration with it angle property.

Note.pngNote: We tried using QML elements to bring an animation effect like Windows Phone Turnstile effect. The effect might not be exactly the same as that of Windows Phone Turnstile effect. Please try the example and share your feedback. To know more about Windows Phone Turnstile, please visit MSDN.

Implementation

Let’s create an empty QML project. We create four Images and places in grid view.

Image {
id: imageGreen
source: "Images/green.png"
anchors.top: parent.top
anchors.topMargin: 70
anchors.right: parent.right
anchors.rightMargin: 25
opacity: mouseAreaGreen.pressed ? 0.5 :1.0
MouseArea{
id:mouseAreaGreen
anchors.fill: parent
onClicked:
{
durationBlue = 1000;
durationGreen = 1500;
durationYellow = 500;
durationRed = 900;
if (imageRed.state == '') imageRed.state = "right"; else imageRed.state = ''
if (imageGreen.state == '') imageGreen.state = "right"; else imageGreen.state = ''
if (imageYellow.state == '') imageYellow.state = "right"; else imageYellow.state = ''
if (imageBlue.state == '') imageBlue.state = "right"; else imageBlue.state = ''
textBody.visible = true;
}
}
transform: Rotation
{
id: rotationimageGreen
origin.x: 0;
origin.y: 0;
axis { x: 0; y: 1; z: 0 }
angle: 0
}
smooth: true
states : State {
name: "right"
PropertyChanges { target: rotationimageGreen; angle : -90; origin.x: -200; origin.y: 0; }
}
transitions: Transition {
NumberAnimation { target: rotationimageGreen; property: "angle"; duration: durationGreen }
}
}

By default each Images are set to angle zero and with zero (x,y) origin. When user clicks on Images it changes it state and all other Images, which finally changes the Image Rotation angle and x origin. We also set a Transition effect for smooth animation whose duration depends on [http://doc.qt.nokia.com/4.7/qml-image.html Image}} clicks.

Summary

This article shows how to use the QML Rotation Element to create a Turnstile effect for menu. The Images displayed here are in a very basic way, you can use ListModel to display the Images in a GridView or in ListView order.

Source Code

This page was last modified on 11 October 2012, at 01:20.
48 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×