src/quick/doc/snippets/qml/usecases/animations.qml

   1 /****************************************************************************
   2 **
   3 ** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies).
   4 ** Contact: http://www.qt-project.org/legal
   5 **
   6 ** This file is part of the documentation 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 Digia Plc and its Subsidiary(-ies) nor the names
  21 **     of its contributors may be used to endorse or promote products derived
  22 **     from this software without specific prior written permission.
  23 **
  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 //![0]
  42 import QtQuick 2.0
  43
  44 Item {
  45
  46     width: 320
  47     height: 480
  48
  49     Rectangle {
  50         color: "#272822"
  51         width: 320
  52         height: 480
  53     }
  54
  55     Column {
  56         //![states]
  57
  58         Item {
  59             id: container
  60             width: 320
  61             height: 120
  62
  63             Rectangle {
  64                 id: rect
  65                 color: "red"
  66                 width: 120
  67                 height: 120
  68
  69                 MouseArea {
  70                     anchors.fill: parent
  71                     onClicked: container.state == 'other' ? container.state = '' : container.state = 'other'
  72                 }
  73             }
  74             states: [
  75                 // This adds a second state to the container where the rectangle is farther to the right
  76
  77                 State { name: "other"
  78
  79                     PropertyChanges {
  80                         target: rect
  81                         x: 200
  82                     }
  83                 }
  84             ]
  85             transitions: [
  86                 // This adds a transition that defaults to applying to all state changes
  87
  88                 Transition {
  89
  90                     // This applies a default NumberAnimation to any changes a state change makes to x or y properties
  91                     NumberAnimation { properties: "x,y" }
  92                 }
  93             ]
  94         }
  95         //![states]
  96         //![behave]
  97         Item {
  98             width: 320
  99             height: 120
 100
 101             Rectangle {
 102                 color: "green"
 103                 width: 120
 104                 height: 120
 105
 106                 // This is the behavior, and it applies a NumberAnimation to any attempt to set the x property
 107                 Behavior on x {
 108
 109                     NumberAnimation {
 110                         //This specifies how long the animation takes
 111                         duration: 600
 112                         //This selects an easing curve to interpolate with, the default is Easing.Linear
 113                         easing.type: Easing.OutBounce
 114                     }
 115                 }
 116
 117                 MouseArea {
 118                     anchors.fill: parent
 119                     onClicked: parent.x == 0 ? parent.x = 200 : parent.x = 0
 120                 }
 121             }
 122         }
 123         //![behave]
 124         //![constant]
 125         Item {
 126             width: 320
 127             height: 120
 128
 129             Rectangle {
 130                 color: "blue"
 131                 width: 120
 132                 height: 120
 133
 134                 // By setting this SequentialAnimation on x, it and animations within it will automatically animate
 135                 // the x property of this element
 136                 SequentialAnimation on x {
 137                     id: xAnim
 138                     // Animations on properties start running by default
 139                     running: false
 140                     loops: Animation.Infinite // The animation is set to loop indefinitely
 141                     NumberAnimation { from: 0; to: 200; duration: 500; easing.type: Easing.InOutQuad }
 142                     NumberAnimation { from: 200; to: 0; duration: 500; easing.type: Easing.InOutQuad }
 143                     PauseAnimation { duration: 250 } // This puts a bit of time between the loop
 144                 }
 145
 146                 MouseArea {
 147                     anchors.fill: parent
 148                     // The animation starts running when you click within the rectangle
 149                     onClicked: xAnim.running = true
 150                 }
 151             }
 152         }
 153         //![constant]
 154
 155         //![scripted]
 156         Item {
 157             width: 320
 158             height: 120
 159
 160             Rectangle {
 161                 id: rectangle
 162                 color: "yellow"
 163                 width: 120
 164                 height: 120
 165
 166                 MouseArea {
 167                     anchors.fill: parent
 168                     // The animation starts running when you click within the rectange
 169                     onClicked: anim.running = true;
 170                 }
 171             }
 172
 173             // This animation specifically targets the Rectangle's properties to animate
 174             SequentialAnimation {
 175                 id: anim
 176                 // Animations on their own are not running by default
 177                 // The default number of loops is one, restart the animation to see it again
 178
 179                 NumberAnimation { target: rectangle; property: "x"; from: 0; to: 200; duration: 500 }
 180
 181                 NumberAnimation { target: rectangle; property: "x"; from: 200; to: 0; duration: 500 }
 182             }
 183         }
 184         //![scripted]
 185     }
 186 }
 187 //![0]