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
135
136
137
138
139
140
141
142
143
|
<?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" />
<!-- qdeclarativeanimation.cpp -->
<title>Qt 4.8: QML PropertyAction Element</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><a href="qdeclarativeelements.html">QML Elements</a></li>
<li>QML PropertyAction Element</li>
</ul>
</div>
</div>
<div class="content mainContent">
<p class="naviNextPrevious headerNavi">
</p><p/>
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#properties">Properties</a></li>
<li class="level1"><a href="#details">Detailed Description</a></li>
</ul>
</div>
<h1 class="title">QML PropertyAction Element</h1>
<span class="subtitle"></span>
<!-- $$$PropertyAction-brief -->
<p>The PropertyAction element allows immediate property changes during animation. <a href="#details">More...</a></p>
<!-- @@@PropertyAction -->
<p>Inherits <a href="qml-animation.html">Animation</a></p>
<p>This element was introduced in Qt 4.7.</p>
<ul>
<li><a href="qml-propertyaction-members.html">List of all members, including inherited members</a></li>
</ul>
<a name="properties"></a>
<h2>Properties</h2>
<ul>
<li class="fn"><b><b><a href="qml-propertyaction.html#exclude-prop">exclude</a></b></b> : list<Object></li>
<li class="fn"><b><b><a href="qml-propertyaction.html#properties-prop">properties</a></b></b> : string</li>
<li class="fn"><b><b><a href="qml-propertyaction.html#property-prop">property</a></b></b> : string</li>
<li class="fn"><b><b><a href="qml-propertyaction.html#target-prop">target</a></b></b> : Object</li>
<li class="fn"><b><b><a href="qml-propertyaction.html#targets-prop">targets</a></b></b> : list<Object></li>
<li class="fn"><b><b><a href="qml-propertyaction.html#value-prop">value</a></b></b> : any</li>
</ul>
<!-- $$$PropertyAction-description -->
<a name="details"></a>
<h2>Detailed Description</h2>
<p>PropertyAction is used to specify an immediate property change during an animation. The property change is not animated.</p>
<p>It is useful for setting non-animated property values during an animation.</p>
<p>For example, here is a <a href="qml-sequentialanimation.html">SequentialAnimation</a> that sets the image's <a href="qml-image.html#smooth-prop">smooth</a> property to <tt>true</tt>, animates the width of the image, then sets <a href="qml-image.html#smooth-prop">smooth</a> back to <tt>false</tt>:</p>
<pre class="qml"> <span class="type"><a href="qml-sequentialanimation.html">SequentialAnimation</a></span> {
<span class="type">PropertyAction</span> { <span class="name">target</span>: <span class="name">img</span>; <span class="name">property</span>: <span class="string">"smooth"</span>; <span class="name">value</span>: <span class="string">"true"</span> }
<span class="type"><a href="qml-numberanimation.html">NumberAnimation</a></span> { <span class="name">target</span>: <span class="name">img</span>; <span class="name">property</span>: <span class="string">"width"</span>; <span class="name">to</span>: <span class="number">300</span>; <span class="name">duration</span>: <span class="number">1000</span> }
<span class="type">PropertyAction</span> { <span class="name">target</span>: <span class="name">img</span>; <span class="name">property</span>: <span class="string">"smooth"</span>; <span class="name">value</span>: <span class="string">"false"</span> }
}</pre>
<p>PropertyAction is also useful for setting the exact point at which a property change should occur during a <a href="qml-transition.html">Transition</a>. For example, if <a href="qml-propertychanges.html">PropertyChanges</a> was used in a <a href="qml-state.html">State</a> to rotate an item around a particular <a href="qml-item.html#transformOrigin-prop">transformOrigin</a>, it might be implemented like this:</p>
<pre class="qml"> <span class="type"><a href="qml-item.html">Item</a></span> {
<span class="name">width</span>: <span class="number">400</span>; <span class="name">height</span>: <span class="number">400</span>
<span class="type"><a href="qml-rectangle.html">Rectangle</a></span> {
<span class="name">id</span>: <span class="name">rect</span>
<span class="name">width</span>: <span class="number">200</span>; <span class="name">height</span>: <span class="number">100</span>
<span class="name">color</span>: <span class="string">"red"</span>
<span class="name">states</span>: <span class="name">State</span> {
<span class="name">name</span>: <span class="string">"rotated"</span>
<span class="type"><a href="qml-propertychanges.html">PropertyChanges</a></span> { <span class="name">target</span>: <span class="name">rect</span>; <span class="name">rotation</span>: <span class="number">180</span>; <span class="name">transformOrigin</span>: <span class="name">Item</span>.<span class="name">BottomRight</span> }
}
<span class="name">transitions</span>: <span class="name">Transition</span> {
<span class="type"><a href="qml-rotationanimation.html">RotationAnimation</a></span> { <span class="name">duration</span>: <span class="number">1000</span>; <span class="name">direction</span>: <span class="name">RotationAnimation</span>.<span class="name">Counterclockwise</span> }
}
<span class="type"><a href="qml-mousearea.html">MouseArea</a></span> {
<span class="name">anchors</span>.fill: <span class="name">parent</span>
<span class="name">onClicked</span>: <span class="name">rect</span>.<span class="name">state</span> <span class="operator">=</span> <span class="string">"rotated"</span>
}
}
}</pre>
<p>However, with this code, the <tt>transformOrigin</tt> is not set until <i>after</i> the animation, as a <a href="qml-state.html">State</a> is taken to define the values at the <i>end</i> of a transition. The animation would rotate at the default <tt>transformOrigin</tt>, then jump to <tt>Item.BottomRight</tt>. To fix this, insert a PropertyAction before the <a href="qml-rotationanimation.html">RotationAnimation</a> begins:</p>
<pre class="qml"> <span class="name">transitions</span>: <span class="name">Transition</span> {
<span class="type"><a href="qml-sequentialanimation.html">SequentialAnimation</a></span> {
<span class="type">PropertyAction</span> { <span class="name">target</span>: <span class="name">rect</span>; <span class="name">property</span>: <span class="string">"transformOrigin"</span> }
<span class="type"><a href="qml-rotationanimation.html">RotationAnimation</a></span> { <span class="name">duration</span>: <span class="number">1000</span>; <span class="name">direction</span>: <span class="name">RotationAnimation</span>.<span class="name">Counterclockwise</span> }
}
}</pre>
<p>This immediately sets the <tt>transformOrigin</tt> property to the value defined in the end state of the <a href="qml-transition.html">Transition</a> (i.e. the value defined in the PropertyAction object) so that the rotation animation begins with the correct transform origin.</p>
<p><b>See also </b><a href="qdeclarativeanimation.html">QML Animation and Transitions</a> and <a href="qtdeclarative.html">QtDeclarative</a>.</p>
<!-- @@@PropertyAction -->
<h2>Property Documentation</h2>
<!-- $$$exclude -->
<div class="qmlitem"><div class="qmlproto"><table class="qmlname"><tr valign="top" class="odd"><td class="tblQmlPropNode"><p><a name="exclude-prop"></a><span class="qmlreadonly">read-only</span><span class="name">exclude</span> : <span class="type"><a href="qml-list.html">list</a></span><<span class="type">Object</span>></p></td></tr></table></div><div class="qmldoc"><p>This property holds the objects that should not be affected by this action.</p>
<p><b>See also </b><a href="qml-propertyaction.html#targets-prop">targets</a>.</p>
</div></div><!-- @@@exclude -->
<br/>
<!-- $$$target -->
<div class="qmlitem"><div class="qmlproto"><table class="qmlname"><tr valign="top" class="odd"><td class="tblQmlPropNode"><p><a name="target-prop"></a><span class="name">target</span> : <span class="type">Object</span></p></td></tr><tr valign="top" class="even"><td class="tblQmlPropNode"><p><a name="targets-prop"></a><span class="name">targets</span> : <span class="type"><a href="qml-list.html">list</a></span><<span class="type">Object</span>></p></td></tr><tr valign="top" class="odd"><td class="tblQmlPropNode"><p><a name="property-prop"></a><span class="name">property</span> : <span class="type"><a href="qml-string.html">string</a></span></p></td></tr><tr valign="top" class="even"><td class="tblQmlPropNode"><p><a name="properties-prop"></a><span class="name">properties</span> : <span class="type"><a href="qml-string.html">string</a></span></p></td></tr></table></div><div class="qmldoc"><p>These properties determine the items and their properties that are affected by this action.</p>
<p>The details of how these properties are interpreted in different situations is covered in the <a href="qml-propertyanimation.html#properties-prop">corresponding</a> <a href="qml-propertyanimation.html">PropertyAnimation</a> documentation.</p>
<p><b>See also </b><a href="qml-propertyaction.html#exclude-prop">exclude</a>.</p>
</div></div><!-- @@@target -->
<br/>
<!-- $$$value -->
<div class="qmlitem"><div class="qmlproto"><table class="qmlname"><tr valign="top" class="odd"><td class="tblQmlPropNode"><p><a name="value-prop"></a><span class="name">value</span> : <span class="type">any</span></p></td></tr></table></div><div class="qmldoc"><p>This property holds the value to be set on the property.</p>
<p>If the <a href="qml-propertyaction.html">PropertyAction</a> is defined within a <a href="qml-transition.html">Transition</a> or <a href="qml-behavior.html">Behavior</a>, this value defaults to the value defined in the end state of the <a href="qml-transition.html">Transition</a>, or the value of the property change that triggered the <a href="qml-behavior.html">Behavior</a>.</p>
</div></div><!-- @@@value -->
<br/>
<p class="naviNextPrevious footerNavi">
</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>
|
