add new rotation demo and pathview demo
[devdays2011:devdays2011.git] / qml / demos / gridview_demo.qml
1 import QtQuick 1.1
2 import ".."
3
4 GridView {
5     id: root
6
7     anchors.centerIn: parent
8
9     width: 500
10     height: 800
11     cellWidth: 100
12     cellHeight: 100
13
14     model: 200
15     delegate: plate
16
17     Component {
18         id: plate
19         Rectangle {
20             width:  90
21             height: width
22 //            color: "#4C3288"
23             color: "lightslategrey"
24             smooth: true
25             clip: true
26             border.color: "mediumvioletred"
27             border.width: 2
28
29             transform: [
30                 Rotation {
31                     id: plateRotation
32                     angle: -90
33                     axis { x: 0; y: 1; z: 0 }
34                     origin.x: -200
35                     origin.y: 50
36                 },
37                 Rotation {
38                     id: plateFlip
39                     angle: 0
40                     axis { x: 1; y: 0; z: 0 }
41                     origin.x: 50
42                     origin.y: 50
43                 }
44             ]
45
46             SequentialAnimation {
47                 id: delegateItemAnim
48                 PauseAnimation { duration: Math.random()*1000 }
49                 NumberAnimation {
50                     target: plateRotation
51                     properties: "angle"
52                     easing.type: Easing.OutCubic
53                     from: -90
54                     to: 0
55                     duration: 800
56                 }
57             }
58
59             RotationAnimation {
60                 id: flipAnimation
61                 target: plateFlip
62                 easing.type: Easing.InOutCubic
63                 from: 0
64                 to: 360
65                 duration: 3000
66                 properties: "angle"
67             }
68
69             Timer {
70                 interval: Math.random()*50000
71                 repeat: true
72                 running: true
73                 onTriggered: flipAnimation.start()
74             }
75
76             AnimatedText {
77                 anchors.centerIn: parent
78                 text: index
79                 textColor: "white"
80                 altTextColor: "mediumvioletred"
81             }
82
83             Component.onCompleted: delegateItemAnim.restart()
84         }
85     }
86
87     MouseArea {
88         anchors.fill: parent
89         onClicked: {
90             root.model = 0
91             root.model = 200
92         }
93     }
94 }