tests/manual/accessibility/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 QtDeclarative module of the Qt Toolkit.
   8 **
   9 ** $QT_BEGIN_LICENSE:LGPL$
  10 ** GNU Lesser General Public License Usage
  11 ** This file may be used under the terms of the GNU Lesser General Public
  12 ** License version 2.1 as published by the Free Software Foundation and
  13 ** appearing in the file LICENSE.LGPL included in the packaging of this
  14 ** file. Please review the following information to ensure the GNU Lesser
  15 ** General Public License version 2.1 requirements will be met:
  16 ** http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
  17 **
  18 ** In addition, as a special exception, Nokia gives you certain additional
  19 ** rights. These rights are described in the Nokia Qt LGPL Exception
  20 ** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
  21 **
  22 ** GNU General Public License Usage
  23 ** Alternatively, this file may be used under the terms of the GNU General
  24 ** Public License version 3.0 as published by the Free Software Foundation
  25 ** and appearing in the file LICENSE.GPL included in the packaging of this
  26 ** file. Please review the following information to ensure the GNU General
  27 ** Public License version 3.0 requirements will be met:
  28 ** http://www.gnu.org/copyleft/gpl.html.
  29 **
  30 ** Other Usage
  31 ** Alternatively, this file may be used in accordance with the terms and
  32 ** conditions contained in a signed written agreement between you and Nokia.
  33 **
  34 **
  35 **
  36 **
  37 **
  38 ** $QT_END_LICENSE$
  39 **
  40 ****************************************************************************/
  41
  42 import QtQuick 2.0
  43
  44 Rectangle {
  45     id: scene
  46     width: 800; height: 600
  47
  48     Rectangle {
  49         id: behavior
  50         x : 50
  51         y : 100
  52         width: 100; height: 100
  53         color: "red"
  54
  55         Text {
  56             text : "Behavior"
  57         }
  58
  59         Behavior on x {
  60             NumberAnimation { duration: 1000 }
  61         }
  62
  63         MouseArea {
  64             anchors.fill: parent
  65             onClicked: behavior.x += 50
  66         }
  67     }
  68
  69     Rectangle {
  70         id: transition
  71         x : 400
  72         y : 100
  73         width: 100; height: 100
  74         color: "red"
  75
  76         MouseArea {
  77             id: mouseArea
  78             anchors.fill: parent
  79         }
  80
  81         Text {
  82             text : "Transition"
  83         }
  84
  85         states: State {
  86             name: "moved"; when: mouseArea.pressed
  87             PropertyChanges { target: transition; x: 500; y: 200 }
  88         }
  89
  90         transitions: Transition {
  91             NumberAnimation { properties: "x,y"; easing.type: Easing.InOutQuad; duration: 1000 }
  92         }
  93     }
  94
  95     Rectangle {
  96         id : animatee
  97         width: 100; height: 100
  98         x : 50
  99         y : 300
 100         color: "blue"
 101         opacity: 0.5
 102         Text {
 103             anchors.centerIn: parent
 104             text : "NumberAnimation"
 105         }
 106
 107         MouseArea {
 108             anchors.fill: parent
 109             onClicked: {
 110                 animatePosition.start()
 111             }
 112         }
 113
 114         NumberAnimation {
 115             id: animatePosition
 116             target: animatee
 117             properties: "x"
 118             from: animatee.x
 119             to: animatee.x + 50
 120             loops: 1
 121             easing {type: Easing.Linear;}
 122         }
 123     }
 124
 125     ListView {
 126         id : content
 127         x : 400
 128         y : 300
 129         width: 300
 130         height: 200
 131
 132         model : 200
 133         delegate : Text { text : "Flickable" + index; height : 50 }
 134     }
 135 }