Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

ListView: Cover Flow Animation

From Wiki
Jump to: navigation, search

Introduction

QML provides pretty basic elements which can be used to display items in grids, lists or in more complex patterns. In this example I would like to show you how to customize a standard ListView, adding some 3D effects that make it more eye-candy. The media player is loading...

Code

Here you can find the QML code shown in the video. To run this code you can simply copy the following QML lines in a file and run it using QMLViewer.

import Qt 4.7
 
Rectangle {
id: background
 
width: 800; height: 480
Behavior on color { ColorAnimation { duration: 200 } }
color: "black"
 
Text {
text: "Forum Nokia"
color: "white"
anchors.top: parent.top
anchors.horizontalCenter: parent.horizontalCenter
anchors.topMargin: 10
}
 
Rectangle{
color: "transparent"
anchors.fill: parent
 
transform: Rotation {
origin.x: width / 2
origin.y: height / 2
axis.x:1
axis.y:0
axis.z:0
angle: -20
}
 
ListView {
id: flickable
anchors.fill: parent
orientation: "Horizontal"
 
property real angle: 0
snapMode: ListView.SnapToItem
spacing: -200/3
model: 20
focus: true
 
delegate: Rectangle {
id: rectItem
width: 200;
height: 200;
smooth: true
 
z: {
if (flickable.currentIndex == index) 255
else if (flickable.currentIndex > index) index;
else 255 - index;
}
color: { (flickable.currentIndex == index) ? "red" : "gray"; }
 
Text {
anchors.centerIn: parent
text: "Loren Ipsum" + index
rotation: 45
}
 
 
Rectangle {
smooth: false
id: shadowRect
anchors.fill: parent
rotation: 90
visible: (flickable.currentIndex != index)
gradient: Gradient {
GradientStop { position: (flickable.currentIndex > index) ? 1.0 : 0.0;
color: "transparent"
}
GradientStop { position: (flickable.currentIndex > index) ? 0.0 : 1.0;
color: "black"
}
}
opacity: 0.5
}
scale: { (flickable.currentIndex == index) ? 1 : 0.8; }
 
transform: Rotation {
origin.x: {
if (flickable.currentIndex == index) rectItem.width / 2;
else if (flickable.currentIndex > index) rectItem.width +100;
else -100;
}
origin.y: 0
axis.x:0
axis.y:1
axis.z:0
angle: {
if (flickable.currentIndex == index) 0;
else if (flickable.currentIndex > index) 50
else -50;
}
Behavior on angle {
SpringAnimation { spring: 2; damping: 0.3; }
}
 
}
 
y: { (flickable.currentIndex == index) ? (rectItem.width/6) * Math.sin(45): 0}
 
MouseArea{
anchors.fill: parent
onClicked: { flickable.currentIndex = index }
}
}
}
 
}
}


Article Metadata
Compatibility
Platform(s): Qt 4.7 and later
Symbian
Device(s): All
Article
Keywords: Qt, QML, 3D, ListView, Sliding
Created: gnuton (3 6, 2011)
Last edited: hamishwillee (30 Jan 2013)
This page was last modified on 30 January 2013, at 04:39.
65 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.

×