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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
|
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en_US" lang="en_US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- tutorial.qdoc -->
<title>Qt 4.8: QML Tutorial 3 - States and Transitions</title>
<link rel="stylesheet" type="text/css" href="style/offline.css" />
</head>
<body>
<div class="header" id="qtdocheader">
<div class="content">
<a href="index.html" class="qtref"><span>Qt Reference Documentation</span></a>
</div>
<div class="breadcrumb toolblock">
<ul>
<li class="first"><a href="index.html">Home</a></li>
<!-- Breadcrumbs go here -->
<li>QML Tutorial 3 - States and Transitions</li>
</ul>
</div>
</div>
<div class="content mainContent">
<link rel="prev" href="qml-tutorial2.html" />
<p class="naviNextPrevious headerNavi">
<a class="prevPage" href="qml-tutorial2.html">QML Tutorial 2 - QML Components</a>
</p><p/>
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#walkthrough">Walkthrough</a></li>
</ul>
</div>
<h1 class="title">QML Tutorial 3 - States and Transitions</h1>
<span class="subtitle"></span>
<!-- $$$qml-tutorial3.html-description -->
<div class="descr"> <a name="details"></a>
<p>In this chapter, we make this example a little bit more dynamic by introducing states and transitions.</p>
<p>We want our text to move to the bottom of the screen, rotate and become red when clicked.</p>
<p class="centerAlign"><img src="images/declarative-tutorial3_animation.gif" alt="" /></p><p>Here is the QML code:</p>
<pre class="qml"> import QtQuick 1.0
<span class="type"><a href="qml-rectangle.html">Rectangle</a></span> {
<span class="name">id</span>: <span class="name">page</span>
<span class="name">width</span>: <span class="number">500</span>; <span class="name">height</span>: <span class="number">200</span>
<span class="name">color</span>: <span class="string">"lightgray"</span>
<span class="type"><a href="qml-text.html">Text</a></span> {
<span class="name">id</span>: <span class="name">helloText</span>
<span class="name">text</span>: <span class="string">"Hello world!"</span>
<span class="name">y</span>: <span class="number">30</span>
<span class="name">anchors</span>.horizontalCenter: <span class="name">page</span>.<span class="name">horizontalCenter</span>
<span class="name">font</span>.pointSize: <span class="number">24</span>; <span class="name">font</span>.bold: <span class="number">true</span>
<span class="type"><a href="qml-mousearea.html">MouseArea</a></span> { <span class="name">id</span>: <span class="name">mouseArea</span>; <span class="name">anchors</span>.fill: <span class="name">parent</span> }
<span class="name">states</span>: <span class="name">State</span> {
<span class="name">name</span>: <span class="string">"down"</span>; <span class="name">when</span>: <span class="name">mouseArea</span>.<span class="name">pressed</span> <span class="operator">==</span> <span class="number">true</span>
<span class="type"><a href="qml-propertychanges.html">PropertyChanges</a></span> { <span class="name">target</span>: <span class="name">helloText</span>; <span class="name">y</span>: <span class="number">160</span>; <span class="name">rotation</span>: <span class="number">180</span>; <span class="name">color</span>: <span class="string">"red"</span> }
}
<span class="name">transitions</span>: <span class="name">Transition</span> {
<span class="name">from</span>: <span class="string">""</span>; <span class="name">to</span>: <span class="string">"down"</span>; <span class="name">reversible</span>: <span class="number">true</span>
<span class="type"><a href="qml-parallelanimation.html">ParallelAnimation</a></span> {
<span class="type"><a href="qml-numberanimation.html">NumberAnimation</a></span> { <span class="name">properties</span>: <span class="string">"y,rotation"</span>; <span class="name">duration</span>: <span class="number">500</span>; <span class="name">easing</span>.type: <span class="name">Easing</span>.<span class="name">InOutQuad</span> }
<span class="type"><a href="qml-coloranimation.html">ColorAnimation</a></span> { <span class="name">duration</span>: <span class="number">500</span> }
}
}
}
<span class="type"><a href="qml-grid.html">Grid</a></span> {
<span class="name">id</span>: <span class="name">colorPicker</span>
<span class="name">x</span>: <span class="number">4</span>; <span class="name">anchors</span>.bottom: <span class="name">page</span>.<span class="name">bottom</span>; <span class="name">anchors</span>.bottomMargin: <span class="number">4</span>
<span class="name">rows</span>: <span class="number">2</span>; <span class="name">columns</span>: <span class="number">3</span>; <span class="name">spacing</span>: <span class="number">3</span>
<span class="type">Cell</span> { <span class="name">cellColor</span>: <span class="string">"red"</span>; <span class="name">onClicked</span>: <span class="name">helloText</span>.<span class="name">color</span> <span class="operator">=</span> <span class="name">cellColor</span> }
<span class="type">Cell</span> { <span class="name">cellColor</span>: <span class="string">"green"</span>; <span class="name">onClicked</span>: <span class="name">helloText</span>.<span class="name">color</span> <span class="operator">=</span> <span class="name">cellColor</span> }
<span class="type">Cell</span> { <span class="name">cellColor</span>: <span class="string">"blue"</span>; <span class="name">onClicked</span>: <span class="name">helloText</span>.<span class="name">color</span> <span class="operator">=</span> <span class="name">cellColor</span> }
<span class="type">Cell</span> { <span class="name">cellColor</span>: <span class="string">"yellow"</span>; <span class="name">onClicked</span>: <span class="name">helloText</span>.<span class="name">color</span> <span class="operator">=</span> <span class="name">cellColor</span> }
<span class="type">Cell</span> { <span class="name">cellColor</span>: <span class="string">"steelblue"</span>; <span class="name">onClicked</span>: <span class="name">helloText</span>.<span class="name">color</span> <span class="operator">=</span> <span class="name">cellColor</span> }
<span class="type">Cell</span> { <span class="name">cellColor</span>: <span class="string">"black"</span>; <span class="name">onClicked</span>: <span class="name">helloText</span>.<span class="name">color</span> <span class="operator">=</span> <span class="name">cellColor</span> }
}
}</pre>
<a name="walkthrough"></a>
<h2>Walkthrough</h2>
<pre class="qml"> <span class="name">states</span>: <span class="name">State</span> {
<span class="name">name</span>: <span class="string">"down"</span>; <span class="name">when</span>: <span class="name">mouseArea</span>.<span class="name">pressed</span> <span class="operator">==</span> <span class="number">true</span>
<span class="type"><a href="qml-propertychanges.html">PropertyChanges</a></span> { <span class="name">target</span>: <span class="name">helloText</span>; <span class="name">y</span>: <span class="number">160</span>; <span class="name">rotation</span>: <span class="number">180</span>; <span class="name">color</span>: <span class="string">"red"</span> }
}</pre>
<p>First, we create a new <i>down</i> state for our text element. This state will be activated when the <a href="qml-mousearea.html">MouseArea</a> is pressed, and deactivated when it is released.</p>
<p>The <i>down</i> state includes a set of property changes from our implicit <i>default state</i> (the items as they were initially defined in the QML). Specifically, we set the <tt>y</tt> property of the text to <tt>160</tt>, the rotation to <tt>180</tt> and the <tt>color</tt> to red.</p>
<pre class="qml"> <span class="name">transitions</span>: <span class="name">Transition</span> {
<span class="name">from</span>: <span class="string">""</span>; <span class="name">to</span>: <span class="string">"down"</span>; <span class="name">reversible</span>: <span class="number">true</span>
<span class="type"><a href="qml-parallelanimation.html">ParallelAnimation</a></span> {
<span class="type"><a href="qml-numberanimation.html">NumberAnimation</a></span> { <span class="name">properties</span>: <span class="string">"y,rotation"</span>; <span class="name">duration</span>: <span class="number">500</span>; <span class="name">easing</span>.type: <span class="name">Easing</span>.<span class="name">InOutQuad</span> }
<span class="type"><a href="qml-coloranimation.html">ColorAnimation</a></span> { <span class="name">duration</span>: <span class="number">500</span> }
}
}</pre>
<p>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.</p>
<p><tt>from</tt> and <tt>to</tt> define the states between which the transition will run. In this case, we want a transition from the default state to our <i>down</i> state.</p>
<p>Because we want the same transition to be run in reverse when changing back from the <i>down</i> state to the default state, we set <tt>reversible</tt> to <tt>true</tt>. This is equivalent to writing the two transitions separately.</p>
<p>The <a href="qml-parallelanimation.html">ParallelAnimation</a> 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 <a href="qml-sequentialanimation.html">SequentialAnimation</a> instead.</p>
<p>For more details on states and transitions, see <a href="qdeclarativestates.html">QML States</a> and the <a href="declarative-animation-states.html">states and transitions example</a>.</p>
</div>
<!-- @@@qml-tutorial3.html -->
<p class="naviNextPrevious footerNavi">
<a class="prevPage" href="qml-tutorial2.html">QML Tutorial 2 - QML Components</a>
</p>
<div class="ft">
<span></span>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2012 Nokia Corporation and/or its
subsidiaries. Documentation contributions included herein are the copyrights of
their respective owners.</p>
<br />
<p>
The documentation provided herein is licensed under the terms of the
<a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation
License version 1.3</a> as published by the Free Software Foundation.</p>
<p>
Documentation sources may be obtained from <a href="http://www.qt-project.org">
www.qt-project.org</a>.</p>
<br />
<p>
Nokia, Qt and their respective logos are trademarks of Nokia Corporation
in Finland and/or other countries worldwide. All other trademarks are property
of their respective owners. <a title="Privacy Policy"
href="http://en.gitorious.org/privacy_policy/">Privacy Policy</a></p>
</div>
</body>
</html>
|
