1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
|
/****************************************************************************
**
** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies).
** All rights reserved.
** Contact: Nokia Corporation (qt-info@nokia.com)
**
** This file is part of the test suite of the Qt Toolkit.
**
** $QT_BEGIN_LICENSE:LGPL$
** No Commercial Usage
** This file contains pre-release code and may not be distributed.
** You may use this file in accordance with the terms and conditions
** contained in the Technology Preview License Agreement accompanying
** this package.
**
** GNU Lesser General Public License Usage
** Alternatively, this file may be used under the terms of the GNU Lesser
** General Public License version 2.1 as published by the Free Software
** Foundation and appearing in the file LICENSE.LGPL included in the
** packaging of this file. Please review the following information to
** ensure the GNU Lesser General Public License version 2.1 requirements
** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
**
** In addition, as a special exception, Nokia gives you certain additional
** rights. These rights are described in the Nokia Qt LGPL Exception
** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
**
** If you have questions regarding the use of this file, please contact
** Nokia at qt-info@nokia.com.
**
**
**
**
**
**
**
**
** $QT_END_LICENSE$
**
****************************************************************************/
/*!
\page tutorial3.html
\title Tutorial 3 - States and Transitions
In this chapter, we make this example a little bit more dynamic by introducing states and transitions.
We want our text to move to the bottom of the screen, rotate and become red when clicked.
\image declarative-tutorial3_animation.gif
Here is the QML code:
\snippet examples/declarative/tutorials/helloworld/tutorial3.qml 0
\section1 Walkthrough
\snippet examples/declarative/tutorials/helloworld/tutorial3.qml 2
First, we create a new \e down state for our text element.
This state will be activated when the \l MouseRegion is pressed, and deactivated when it is released.
The \e down state includes a set of property changes from our implicit \e {default state}
(the items as they were initially defined in the QML).
Specifically, we set the \c y property of the text to \c 160, the rotation to \c 180 and the \c color to red.
\snippet examples/declarative/tutorials/helloworld/tutorial3.qml 3
Because we don't want the text to appear at the bottom instantly but rather move smoothly,
we add a transition between our two states.
\c from and \c to define the states between which the transition will run.
In this case, we want a transition from the default state to our \e down state.
Because we want the same transition to be run in reverse when changing back from the \e down state to the default state,
we set \c reversible to \c true.
This is equivalent to writing the two transitions separately.
The \l ParallelAnimation element makes sure that the two types of animations (number and color) start at the same time.
We could also run them one after the other by using \l SequentialAnimation instead.
For more details on states and transitions, see \l {QML States}.
[Previous: \l {Tutorial 2 - QML Component}] [\l {Tutorial}]
*/
|
