ListView: Cover Flow Animation

Comments

(no comments yet)

Log in or Join to leave comments.

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

Device(s): All

---

Article

Keywords: Qt, QML, 3D, ListView, Sliding

Created: gnuton (3 6, 2011)

Last edited: hamishwillee (30 Jan 2013)