doc/src/snippets/qtquick1/animation.qml

   1 /****************************************************************************
   2 **
   3 ** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
   4 ** All rights reserved.
   5 ** Contact: http://www.qt-project.org/
   6 **
   7 ** This file is part of the documentation of the Qt Toolkit.
   8 **
   9 ** $QT_BEGIN_LICENSE:BSD$
  10 ** You may use this file under the terms of the BSD license as follows:
  11 **
  12 ** "Redistribution and use in source and binary forms, with or without
  13 ** modification, are permitted provided that the following conditions are
  14 ** met:
  15 **   * Redistributions of source code must retain the above copyright
  16 **     notice, this list of conditions and the following disclaimer.
  17 **   * Redistributions in binary form must reproduce the above copyright
  18 **     notice, this list of conditions and the following disclaimer in
  19 **     the documentation and/or other materials provided with the
  20 **     distribution.
  21 **   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
  22 **     the names of its contributors may be used to endorse or promote
  23 **     products derived from this software without specific prior written
  24 **     permission.
  25 **
  26 ** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
  27 ** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
  28 ** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
  29 ** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
  30 ** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
  31 ** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
  32 ** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
  33 ** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
  34 ** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  35 ** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  36 ** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
  37 ** $QT_END_LICENSE$
  38 **
  39 ****************************************************************************/
  40 //! [document]
  41 import QtQuick 1.0
  42
  43
  44 //! [parent begin]
  45 Rectangle {
  46 //! [parent begin]
  47     width: 200; height: 600
  48     id: screen
  49
  50 Column {
  51     spacing: 12
  52 //! [direct property change]
  53 Rectangle {
  54     id: blob
  55     width: 75; height: 75
  56     color: "blue"
  57
  58     MouseArea {
  59         anchors.fill: parent
  60         onClicked: blob.color = "green"
  61     }
  62 }
  63 //! [direct property change]
  64
  65 //! [property animation]
  66 Rectangle {
  67     id: flashingblob
  68     width: 75; height: 75
  69     color: "blue"
  70     opacity: 1.0
  71
  72     MouseArea {
  73         anchors.fill: parent
  74         onClicked: {
  75             animateColor.start()
  76             animateOpacity.start()
  77         }
  78     }
  79
  80     PropertyAnimation {id: animateColor; target: flashingblob; properties: "color"; to: "green"; duration: 100}
  81
  82     NumberAnimation {
  83         id: animateOpacity
  84         target: flashingblob
  85         properties: "opacity"
  86         from: 0.99
  87         to: 1.0
  88         loops: Animation.Infinite
  89         easing {type: Easing.OutBack; overshoot: 500}
  90    }
  91 }
  92 //! [property animation]
  93
  94 //! [transition animation]
  95 Rectangle {
  96     width: 75; height: 75
  97     id: button
  98     state: "RELEASED"
  99
 100     MouseArea {
 101         anchors.fill: parent
 102         onPressed: button.state = "PRESSED"
 103         onReleased: button.state = "RELEASED"
 104     }
 105
 106     states: [
 107         State {
 108             name: "PRESSED"
 109             PropertyChanges { target: button; color: "lightblue"}
 110         },
 111         State {
 112             name: "RELEASED"
 113             PropertyChanges { target: button; color: "lightsteelblue"}
 114         }
 115     ]
 116
 117     transitions: [
 118         Transition {
 119             from: "PRESSED"
 120             to: "RELEASED"
 121             ColorAnimation { target: button; duration: 100}
 122         },
 123         Transition {
 124             from: "RELEASED"
 125             to: "PRESSED"
 126             ColorAnimation { target: button; duration: 100}
 127         }
 128     ]
 129 }
 130 //! [transition animation]
 131
 132 Rectangle {
 133     width: 75; height: 75
 134     id: wildcard
 135     color: "green"
 136 //! [wildcard animation]
 137     transitions:
 138         Transition {
 139             to: "*"
 140             ColorAnimation { target: button; duration: 100}
 141         }
 142 //! [wildcard animation]
 143
 144     MouseArea {
 145         anchors.fill: parent
 146         onPressed: {
 147             ball.x = 10
 148             ball.color = "red"
 149         }
 150         onReleased: {
 151             ball.x = screen.width / 2
 152             ball.color = "salmon"
 153         }
 154     }
 155 }
 156
 157 //! [behavior animation]
 158 Rectangle {
 159     width: 75; height: 75; radius: width
 160     id: ball
 161     color: "salmon"
 162
 163     Behavior on x {
 164         NumberAnimation {
 165             id: bouncebehavior
 166             easing {
 167                 type: Easing.OutElastic
 168                 amplitude: 1.0
 169                 period: 0.5
 170             }
 171         }
 172     }
 173     Behavior on y {
 174         animation: bouncebehavior
 175     }
 176     Behavior {
 177         ColorAnimation { target: ball; duration: 100 }
 178     }
 179 }
 180 //! [behavior animation]
 181
 182 //! [sequential animation]
 183 Rectangle {
 184     id: banner
 185     width: 150; height: 100; border.color: "black"
 186
 187     Column {
 188         anchors.centerIn: parent
 189         Text {
 190             id: code
 191             text: "Code less."
 192             opacity: 0.01
 193         }
 194         Text {
 195             id: create
 196             text: "Create more."
 197             opacity: 0.01
 198         }
 199         Text {
 200             id: deploy
 201             text: "Deploy everywhere."
 202             opacity: 0.01
 203         }
 204     }
 205
 206     MouseArea {
 207         anchors.fill: parent
 208         onPressed: playbanner.start()
 209     }
 210
 211     SequentialAnimation {
 212         id: playbanner
 213         running: false
 214         NumberAnimation { target: code; property: "opacity"; to: 1.0; duration: 200}
 215         NumberAnimation { target: create; property: "opacity"; to: 1.0; duration: 200}
 216         NumberAnimation { target: deploy; property: "opacity"; to: 1.0; duration: 200}
 217     }
 218 }
 219 //! [sequential animation]
 220
 221 }//end of col
 222 //! [parent end]
 223 }
 224 //! [parent end]
 225
 226 //! [document]