×
Namespaces

Variants
Actions

ListView: Cover Flow Animation

From Nokia Developer 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 07:39.
60 page views in the last 30 days.
×