tests/testapplications/listview/viewTransitions.qml

   1 /****************************************************************************
   2 **
   3 ** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
   4 ** Contact: http://www.qt-project.org/
   5 **
   6 ** This file is part of the test suite of the Qt Toolkit.
   7 **
   8 ** $QT_BEGIN_LICENSE:BSD$
   9 ** You may use this file under the terms of the BSD license as follows:
  10 **
  11 ** "Redistribution and use in source and binary forms, with or without
  12 ** modification, are permitted provided that the following conditions are
  13 ** met:
  14 **   * Redistributions of source code must retain the above copyright
  15 **     notice, this list of conditions and the following disclaimer.
  16 **   * Redistributions in binary form must reproduce the above copyright
  17 **     notice, this list of conditions and the following disclaimer in
  18 **     the documentation and/or other materials provided with the
  19 **     distribution.
  20 **   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
  21 **     the names of its contributors may be used to endorse or promote
  22 **     products derived from this software without specific prior written
  23 **     permission.
  24 **
  25 ** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
  26 ** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
  27 ** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
  28 ** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
  29 ** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
  30 ** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
  31 ** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
  32 ** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
  33 ** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  34 ** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  35 ** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
  36 **
  37 ** $QT_END_LICENSE$
  38 **
  39 ****************************************************************************/
  40
  41 import QtQuick 2.0
  42 import QtQuick.Particles 2.0
  43 Item {
  44     id: root
  45     width: 450; height: 600
  46
  47     property int currentSet: 0
  48     property bool useStock: false
  49
  50     Component {
  51         id: viewDelegate
  52
  53         Rectangle {
  54             id: item
  55             property bool movn: false
  56             property int parts: 0
  57
  58             width: 225; height: 40
  59             border.width: ListView.isCurrentItem ? 3 : 1
  60             z: ListView.isCurrentItem ? 100 : 1
  61             color: original ? "lightsteelblue" : "yellow"
  62             objectName: name
  63             Text { x: 10; text: name; font.pixelSize: 20 }
  64             MouseArea { anchors.fill: parent; onClicked: listview.currentIndex = index }
  65
  66             Emitter {
  67                 id: emitter
  68                 system: ps
  69                 anchors.fill: parent
  70                 enabled: false
  71                 speed: AngleDirection {
  72                     angle: 0
  73                     angleVariation: 360
  74                     magnitude: 50
  75                     magnitudeVariation: 50
  76                 }
  77             }
  78             Emitter {
  79                 id: emitter2
  80                 system: ps
  81                 anchors.fill: parent
  82                 enabled: item.movn
  83                 emitRate: parts
  84                 speed: AngleDirection {
  85                     angle: 0
  86                     angleVariation: 360
  87                     magnitude: 2
  88                     magnitudeVariation: 5
  89                 }
  90             }
  91         }
  92     }
  93
  94     ListView {
  95         id: listview
  96         width: 225; height: 500
  97         anchors.centerIn: parent
  98         delegate: viewDelegate
  99         header: Rectangle {
 100             height: 50; width: 225
 101             color: "blue"
 102             Text { anchors.centerIn: parent; text: "Transitions!"; color: "goldenrod" }
 103         }
 104         model: ListModel {
 105             id: a_model
 106             ListElement { name: "Item A"; original: true }
 107             ListElement { name: "Item B"; original: true }
 108             ListElement { name: "Item C"; original: true }
 109             ListElement { name: "Item D"; original: true }
 110             ListElement { name: "Item E"; original: true }
 111             ListElement { name: "Item F"; original: true }
 112         }
 113         Rectangle {
 114             anchors.fill: parent
 115             color: "transparent"
 116             border.color: "black"
 117         }
 118
 119     }
 120
 121     ParticleSystem {
 122         id: ps
 123         ImageParticle {
 124             id: imageparticle
 125             source: "star.png"
 126             color: "red"
 127         }
 128     }
 129
 130
 131     /* States (Selected operation Transitions) */
 132     states: [
 133         State {
 134             name: "setA"
 135             when: currentSet == 0
 136             PropertyChanges {
 137                 target: listview
 138                 add: a_add
 139                 move: a_move
 140                 remove: a_remove
 141                 displaced: a_displaced
 142             }
 143         },
 144         State {
 145             name: "setB"
 146             when: currentSet == 1
 147             PropertyChanges {
 148                 target: listview
 149                 add: b_add
 150                 move: b_move
 151                 remove: b_remove
 152                 displaced: b_displaced
 153             }
 154         },
 155         State {
 156             name: "setC"
 157             when: currentSet == 2
 158             PropertyChanges {
 159                 target: listview
 160                 add: c_add
 161                 move: c_move
 162                 remove: c_remove
 163                 addDisplaced: c_addDisplaced
 164                 moveDisplaced: c_moveDisplaced
 165                 removeDisplaced: c_removeDisplaced
 166             }
 167         },
 168         State {
 169             name: "setD"
 170             when: currentSet == 3
 171             PropertyChanges {
 172                 target: listview
 173                 move: d_move
 174                 moveDisplaced: d_moveDisplaced
 175             }
 176             PropertyChanges {
 177                 target: root
 178                 useStock: true
 179             }
 180         }
 181     ]
 182
 183     /* Transitions */
 184     Transition {
 185         id: a_add
 186         ParallelAnimation {
 187             NumberAnimation { target: a_add.ViewTransition.item; properties: "opacity"; from: 0; to: 1; duration: 1000 }
 188         }
 189     }
 190     Transition {
 191         id: a_remove
 192         SequentialAnimation {
 193             NumberAnimation { target: a_remove.ViewTransition.item; properties: "opacity"; from: 1; to: 0; duration: 1000 }
 194         }
 195     }
 196     Transition {
 197         id: a_move
 198         ColorAnimation { target: a_move.ViewTransition.item; properties: "color"; to: "lightsteelblue"; duration: 1000 }
 199         PathAnimation {
 200             duration: 1000
 201             target: a_move.ViewTransition.item
 202             path: Path {
 203                 PathCurve { x: a_move.ViewTransition.destination.x + 150; y: a_move.ViewTransition.destination.y + 100 }
 204                 PathCurve { x: a_move.ViewTransition.destination.x + 150; y: a_move.ViewTransition.destination.y }
 205                 PathCurve { x: a_move.ViewTransition.destination.x; y: a_move.ViewTransition.destination.y }
 206             }
 207         }
 208     }
 209     Transition {
 210         id: a_displaced
 211         PropertyAction { target: a_displaced.ViewTransition.item; property: "color"; value: "lightsteelblue" }
 212         ParallelAnimation {
 213             NumberAnimation { target: a_displaced.ViewTransition.item; property: "opacity"; to: 1; duration: 250 }
 214             SequentialAnimation {
 215                 PauseAnimation { duration: a_displaced.ViewTransition.index * 200 }
 216                 NumberAnimation { properties: "x,y"; duration: 1000; easing.type: Easing.OutQuad }
 217             }
 218         }
 219     }
 220
 221
 222     Transition {
 223         id: b_add
 224         SequentialAnimation {
 225             NumberAnimation { target: b_add.ViewTransition.item; properties: "scale"; from: 1; to: 1.3; duration: 100 }
 226             NumberAnimation { target: b_add.ViewTransition.item; properties: "scale"; from: 1.3; to: 1; duration: 500; easing.type: Easing.OutBounce }
 227         }
 228     }
 229     Transition {
 230         id: b_move
 231         SequentialAnimation {
 232             PauseAnimation { duration: b_move.ViewTransition.index * 100 }
 233             ParallelAnimation {
 234                 ColorAnimation { target: b_move.ViewTransition.item; properties: "color"; from: "red"; to: "lightsteelblue"; duration: 2000 }
 235                 SequentialAnimation {
 236                     PathAnimation {
 237                         duration: 1000
 238                         target: b_move.ViewTransition.item
 239                         path: Path {
 240                             PathCurve { x: b_move.ViewTransition.destination.x + 150; y: b_move.ViewTransition.destination.y + 100 }
 241                             PathCurve { relativeX: 30; relativeY: -100 }
 242                         }
 243                     }
 244                     NumberAnimation { properties: "x,y"; duration: 1000; easing.type: Easing.OutBounce }
 245                 }
 246             }
 247         }
 248     }
 249     Transition {
 250         id: b_remove
 251         SequentialAnimation {
 252             NumberAnimation { target: b_remove.ViewTransition.item; properties: "opacity"; from: 1; to: 0; duration: 1000 }
 253         }
 254     }
 255     Transition {
 256         id: b_displaced
 257         PropertyAction { target: b_displaced.ViewTransition.item; property: "color"; value: "lightsteelblue" }
 258         SequentialAnimation {
 259             PauseAnimation { duration: b_displaced.ViewTransition.item.x == 0 ? b_displaced.ViewTransition.index * 200 : 0 }
 260             NumberAnimation { properties: "x,y"; duration: 1000; easing.type: Easing.OutBounce }
 261         }
 262     }
 263
 264
 265     Transition {
 266         id: c_add
 267         NumberAnimation { property: "opacity"; from: 0; to: 1.0; duration: 400 }
 268         NumberAnimation { property: "scale"; from: 0; to: 1.0; duration: 400 }
 269         property int xoff
 270         xoff: c_add.ViewTransition.index % 2 == 0 ? 200 : -200
 271         PathAnimation {
 272             duration: 1000
 273             path: Path {
 274                 startX: c_add.ViewTransition.destination.x + c_add.xoff
 275                 startY: c_add.ViewTransition.destination.y + 200
 276                 PathCurve { relativeX: -100; relativeY: -50 }
 277                 PathCurve { relativeX: 50; relativeY: -150 }
 278                 PathCurve {
 279                     x: c_add.ViewTransition.destination.x
 280                     y: c_add.ViewTransition.destination.y
 281                 }
 282             }
 283         }
 284     }
 285     Transition {
 286         id: c_move
 287         ColorAnimation { target: c_move.ViewTransition.item; properties: "color"; from: "red"; to: "lightsteelblue"; duration: 1000 }
 288         PathAnimation {
 289             duration: 1000
 290             target: c_move.ViewTransition.item
 291             path: Path {
 292                 PathCurve { x: c_move.ViewTransition.destination.x + 150; y: c_move.ViewTransition.destination.y + 100 }
 293                 PathCurve { x: c_move.ViewTransition.destination.x + 150; y: c_move.ViewTransition.destination.y }
 294                 PathCurve { x: c_move.ViewTransition.destination.x; y: c_move.ViewTransition.destination.y }
 295             }
 296         }
 297     }
 298     Transition {
 299         id: c_remove
 300         PropertyAnimation { target: c_remove.ViewTransition.item; properties: "opacity"; to: 0; duration: 3000; easing.type: Easing.OutInBounce }
 301     }
 302     Transition {
 303         id: c_addDisplaced
 304
 305         PropertyAction { property: "color"; value: "lightsteelblue" }
 306         PropertyAction { property: "opacity"; value: 1.0 }
 307         PropertyAction { property: "scale"; value: 1.0 }
 308         SequentialAnimation {
 309             PauseAnimation { duration: c_addDisplaced.ViewTransition.index * 200 }
 310             NumberAnimation { properties: "x,y"; duration: 1000; easing.type: Easing.OutElastic }
 311         }
 312
 313     }
 314     Transition {
 315         id: c_moveDisplaced
 316
 317         PropertyAction { property: "color"; value: "lightsteelblue" }
 318         PropertyAction { property: "opacity"; value: 1.0 }
 319         PropertyAction { property: "scale"; value: 1.0 }
 320         SequentialAnimation {
 321             NumberAnimation { properties: "x,y"; duration: 1000; easing.type: Easing.OutBounce }
 322         }
 323
 324     }
 325     Transition {
 326         id: c_removeDisplaced
 327
 328         PropertyAction { property: "color"; value: "lightsteelblue" }
 329         PropertyAction { property: "opacity"; value: 1.0 }
 330         PropertyAction { property: "scale"; value: 1.0 }
 331         SequentialAnimation {
 332             PauseAnimation { duration: (c_removeDisplaced.ViewTransition.index * 200) + 3000 }
 333             NumberAnimation { properties: "x,y"; duration: 1000; easing.type: Easing.OutElastic }
 334         }
 335
 336     }
 337     Transition {
 338         id: d_move
 339         SequentialAnimation {
 340             PropertyAction { target: d_move.ViewTransition.item; property: "movn"; value: true }
 341             ParallelAnimation {
 342                 NumberAnimation { target: d_move.ViewTransition.item; properties: "opacity"; to: 0; duration: 2000 }
 343                 NumberAnimation { target: d_move.ViewTransition.item; properties: "parts"; to: 500; duration: 2000 }
 344             }
 345             NumberAnimation { properties: "x,y"; duration: 1000*(d_move.ViewTransition.index+1) }
 346             ParallelAnimation {
 347                 NumberAnimation { target: d_move.ViewTransition.item; properties: "opacity"; to: 1; duration: 2000 }
 348                 NumberAnimation { target: d_move.ViewTransition.item; properties: "parts"; to: 0; duration: 2000 }
 349             }
 350             PropertyAction { target: d_move.ViewTransition.item; property: "movn"; value: false }
 351         }
 352     }
 353
 354     Transition {
 355         id: d_moveDisplaced
 356         PropertyAction { target: d_moveDisplaced.ViewTransition.item; property: "color"; value: "lightsteelblue" }
 357         SequentialAnimation {
 358             PauseAnimation { duration: 500*(d_moveDisplaced.ViewTransition.index+1) }
 359             NumberAnimation { properties: "x,y"; duration: 1000; easing.type: Easing.OutQuad }
 360         }
 361     }
 362
 363     /* Buttons */
 364     Column {
 365         spacing: 2
 366         Rectangle {
 367             gradient: Gradient {
 368                 GradientStop { position: 0.0; color: "darkgray" }
 369                 GradientStop { position: 0.5; color: "lightgray" }
 370                 GradientStop { position: 1.0; color: "darkgray" }
 371             }
 372             radius: 6
 373             border.color: "black"
 374             height: 50; width: 80
 375             Text { anchors.centerIn: parent; text: "To Top" }
 376             MouseArea { anchors.fill: parent; onClicked: listview.model.move(listview.currentIndex, 0, 1) }
 377         }
 378         Rectangle {
 379             gradient: Gradient {
 380                 GradientStop { position: 0.0; color: "darkgray" }
 381                 GradientStop { position: 0.5; color: "lightgray" }
 382                 GradientStop { position: 1.0; color: "darkgray" }
 383             }
 384             radius: 6
 385             border.color: "black"
 386             height: 50; width: 80
 387             Text { anchors.centerIn: parent; text: "Add" }
 388             MouseArea {
 389                 anchors.fill: parent
 390                 onClicked: listview.model.insert(listview.currentIndex+1, {"name": "New item", "original": false } )
 391             }
 392         }
 393         Rectangle {
 394             gradient: Gradient {
 395                 GradientStop { position: 0.0; color: "darkgray" }
 396                 GradientStop { position: 0.5; color: "lightgray" }
 397                 GradientStop { position: 1.0; color: "darkgray" }
 398             }
 399             radius: 6
 400             border.color: "black"
 401             height: 50; width: 80
 402             Text { anchors.centerIn: parent; text: "Remove" }
 403             MouseArea {
 404                 anchors.fill: parent
 405                 onClicked: listview.model.remove(listview.currentIndex)
 406             }
 407         }
 408         Rectangle {
 409             gradient: Gradient {
 410                 GradientStop { position: 0.0; color: "darkgray" }
 411                 GradientStop { position: 0.5; color: "lightgray" }
 412                 GradientStop { position: 1.0; color: "darkgray" }
 413             }
 414             radius: 6
 415             border.color: "black"
 416             height: 50; width: 80
 417             Text { anchors.centerIn: parent; text: "Append" }
 418             MouseArea {
 419                 anchors.fill: parent
 420                 onClicked: listview.model.append({"name": "New item", "original": false })
 421             }
 422         }
 423     }
 424     Column {
 425         spacing: 2
 426         anchors.right: parent.right
 427         anchors.rightMargin: 2
 428         Rectangle {
 429             gradient: Gradient {
 430                 GradientStop { position: 0.0; color: "darkgray" }
 431                 GradientStop { position: 0.5; color: currentSet == 0 ? "green" : "lightgray"
 432                     ColorAnimation on color { duration: 1000 }
 433                 }
 434                 GradientStop { position: 1.0; color: "darkgray" }
 435             }
 436             radius: 6
 437             border.color: "black"
 438             height: 50; width: 80
 439             Text { anchors.centerIn: parent; text: "Set A" }
 440             MouseArea { anchors.fill: parent; onClicked: { currentSet = 0 } }
 441         }
 442         Rectangle {
 443             gradient: Gradient {
 444                 GradientStop { position: 0.0; color: "darkgray" }
 445                 GradientStop { position: 0.5; color: currentSet == 1 ? "green" : "lightgray" }
 446                 GradientStop { position: 1.0; color: "darkgray" }
 447             }
 448             radius: 6
 449             border.color: "black"
 450             height: 50; width: 80
 451             Text { anchors.centerIn: parent; text: "Set B" }
 452             MouseArea { anchors.fill: parent; onClicked: { currentSet = 1 } }
 453         }
 454         Rectangle {
 455             gradient: Gradient {
 456                 GradientStop { position: 0.0; color: "darkgray" }
 457                 GradientStop { position: 0.5; color: currentSet == 2 ? "green" : "lightgray" }
 458                 GradientStop { position: 1.0; color: "darkgray" }
 459             }
 460             radius: 6
 461             border.color: "black"
 462             height: 50; width: 80
 463             Text { anchors.centerIn: parent; text: "Set C" }
 464             MouseArea { anchors.fill: parent; onClicked: { currentSet = 2 } }
 465         }
 466         Rectangle {
 467             gradient: Gradient {
 468                 GradientStop { position: 0.0; color: "darkgray" }
 469                 GradientStop { position: 0.5; color: currentSet == 3 ? "green" : "lightgray" }
 470                 GradientStop { position: 1.0; color: "darkgray" }
 471             }
 472             radius: 6
 473             border.color: "black"
 474             height: 50; width: 80
 475             Text { anchors.centerIn: parent; text: "Set D" }
 476             MouseArea { anchors.fill: parent; onClicked: { currentSet = 3 } }
 477         }
 478     }
 479 }