This file is indexed.

/usr/share/qt5/doc/qtdoc/qtquick-usecase-animations.html is in qt5-doc-html 5.2.1-1.

This file is owned by root:root, with mode 0o644.

The actual contents of the file can be viewed below.

  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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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" />
<!-- animations.qdoc -->
  <title>Usecase - Animations In QML | QtDoc 5.2</title>
  <link rel="stylesheet" type="text/css" href="style/offline.css" />
</head>
<body>
<div class="header" id="qtdocheader">
    <div class="main">
    <div class="main-rounded">
        <div class="navigationbar">
        <ul>
<li><a href="index.html">Qt 5.2</a></li>
<li>Usecase - Animations In QML</li>
<li id="buildversion">
Qt 5.2.1 Reference Documentation</li>
    </ul>
    </div>
</div>
<div class="content">
<div class="line">
<div class="content mainContent">
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#fluid-uis">Fluid UIs</a></li>
<li class="level2"><a href="#states-and-transitions">States and Transitions</a></li>
<li class="level2"><a href="#animating-property-changes">Animating Property Changes.</a></li>
<li class="level1"><a href="#other-animations">Other Animations</a></li>
</ul>
</div>
<h1 class="title">Usecase - Animations In QML</h1>
<span class="subtitle"></span>
<!-- $$$qtquick-usecase-animations.html-description -->
<div class="descr"> <a name="details"></a>
<p><a href="../qtquick/qtquick-index.html">Qt Quick</a> provides the ability to animate properties. Animating properties allows property values to move through intermediate values instead of immediately changing to the target value. To animate the position of an item, you can animate the properties that controle the item's position, x and y for example, so that the item's position changes each frame on the way to the target position.</p>
<a name="fluid-uis"></a>
<h2>Fluid UIs</h2>
<p>QML was designed to facilitate the creation of fluid UIs. These are user interfaces where the UI components animate instead of appearing, disappearing, or jumping abruptly. Qt Quick provides two simple ways to have UI components move with animation instead of instantly appearing at their new location.</p>
<a name="states-and-transitions"></a>
<h3>States and Transitions</h3>
<p>Qt Quick allows you to declare various UI states in <a href="../qtquick/qml-qtquick-state.html">State</a> objects. These states are comprised of property changes from a base state, and can be a useful way of organizing your UI logic. Transitions are objects you can associate with an item to define how its properties will animate when they change due to a state change.</p>
<p>States and transitions for an item can be declared with the <a href="../qtquick/qml-qtquick-item.html#states-prop">Item::states</a> and <a href="../qtquick/qml-qtquick-item.html#transitions-prop">Item::transitions</a> properties. States are declared inside the states list property of an item, usually the root item of the component. Transitions defined on the same item are used to animate the changes in the state. Here is an example.</p>
<pre class="qml"><span class="type"><a href="../qtquick/qml-qtquick-item.html">Item</a></span> {
    <span class="name">id</span>: <span class="name">container</span>
    <span class="name">width</span>: <span class="number">320</span>
    <span class="name">height</span>: <span class="number">120</span>

    <span class="type"><a href="../qtquick/qml-qtquick-rectangle.html">Rectangle</a></span> {
        <span class="name">id</span>: <span class="name">rect</span>
        <span class="name">color</span>: <span class="string">&quot;red&quot;</span>
        <span class="name">width</span>: <span class="number">120</span>
        <span class="name">height</span>: <span class="number">120</span>

        <span class="type"><a href="../qtquick/qml-qtquick-mousearea.html">MouseArea</a></span> {
            <span class="name">anchors</span>.fill: <span class="name">parent</span>
            <span class="name">onClicked</span>: <span class="name">container</span>.<span class="name">state</span> <span class="operator">==</span> <span class="string">'other'</span> ? <span class="name">container</span>.<span class="name">state</span> <span class="operator">=</span> <span class="string">''</span> : <span class="name">container</span>.<span class="name">state</span> <span class="operator">=</span> <span class="string">'other'</span>
        }
    }
    <span class="name">states</span>: [
        <span class="comment">// This adds a second state to the container where the rectangle is farther to the right</span>

        <span class="type"><a href="../qtquick/qml-qtquick-state.html">State</a></span> { <span class="name">name</span>: <span class="string">&quot;other&quot;</span>

            <span class="type"><a href="../qtquick/qml-qtquick-propertychanges.html">PropertyChanges</a></span> {
                <span class="name">target</span>: <span class="name">rect</span>
                <span class="name">x</span>: <span class="number">200</span>
            }
        }
    ]
    <span class="name">transitions</span>: [
        <span class="comment">// This adds a transition that defaults to applying to all state changes</span>

        <span class="type"><a href="../qtquick/qml-qtquick-transition.html">Transition</a></span> {

            <span class="comment">// This applies a default NumberAnimation to any changes a state change makes to x or y properties</span>
            <span class="type"><a href="../qtquick/qml-qtquick-numberanimation.html">NumberAnimation</a></span> { <span class="name">properties</span>: <span class="string">&quot;x,y&quot;</span> }
        }
    ]
}</pre>
<a name="animating-property-changes"></a>
<h3>Animating Property Changes.</h3>
<p>Behaviors can be used to specify an animation for a property to use when it changes. This is then applied to all changes, regardless of their source. The following example animates a button moving around the screen using behaviors.</p>
<pre class="qml"><span class="type"><a href="../qtquick/qml-qtquick-item.html">Item</a></span> {
    <span class="name">width</span>: <span class="number">320</span>
    <span class="name">height</span>: <span class="number">120</span>

    <span class="type"><a href="../qtquick/qml-qtquick-rectangle.html">Rectangle</a></span> {
        <span class="name">color</span>: <span class="string">&quot;green&quot;</span>
        <span class="name">width</span>: <span class="number">120</span>
        <span class="name">height</span>: <span class="number">120</span>

        <span class="comment">// This is the behavior, and it applies a NumberAnimation to any attempt to set the x property</span>
        Behavior on <span class="name">x</span> {

            <span class="type"><a href="../qtquick/qml-qtquick-numberanimation.html">NumberAnimation</a></span> {
                <span class="comment">//This specifies how long the animation takes</span>
                <span class="name">duration</span>: <span class="number">600</span>
                <span class="comment">//This selects an easing curve to interpolate with, the default is Easing.Linear</span>
                <span class="name">easing</span>.type: <span class="name">Easing</span>.<span class="name">OutBounce</span>
            }
        }

        <span class="type"><a href="../qtquick/qml-qtquick-mousearea.html">MouseArea</a></span> {
            <span class="name">anchors</span>.fill: <span class="name">parent</span>
            <span class="name">onClicked</span>: <span class="name">parent</span>.<span class="name">x</span> <span class="operator">==</span> <span class="number">0</span> ? <span class="name">parent</span>.<span class="name">x</span> <span class="operator">=</span> <span class="number">200</span> : <span class="name">parent</span>.<span class="name">x</span> <span class="operator">=</span> <span class="number">0</span>
        }
    }
}</pre>
<a name="other-animations"></a>
<h2>Other Animations</h2>
<p>Not all animations have to be tied to a specific property or state. You can also create animations more generally, and specify target items and properties inside the animation. Here are some examples of different ways to do this:</p>
<pre class="qml"><span class="type"><a href="../qtquick/qml-qtquick-item.html">Item</a></span> {
    <span class="name">width</span>: <span class="number">320</span>
    <span class="name">height</span>: <span class="number">120</span>

    <span class="type"><a href="../qtquick/qml-qtquick-rectangle.html">Rectangle</a></span> {
        <span class="name">color</span>: <span class="string">&quot;blue&quot;</span>
        <span class="name">width</span>: <span class="number">120</span>
        <span class="name">height</span>: <span class="number">120</span>

        <span class="comment">// By setting this SequentialAnimation on x, it and animations within it will automatically animate</span>
        <span class="comment">// the x property of this element</span>
        SequentialAnimation on <span class="name">x</span> {
            <span class="name">id</span>: <span class="name">xAnim</span>
            <span class="comment">// Animations on properties start running by default</span>
            <span class="name">running</span>: <span class="number">false</span>
            <span class="name">loops</span>: <span class="name">Animation</span>.<span class="name">Infinite</span> <span class="comment">// The animation is set to loop indefinitely</span>
            <span class="type"><a href="../qtquick/qml-qtquick-numberanimation.html">NumberAnimation</a></span> { <span class="name">from</span>: <span class="number">0</span>; <span class="name">to</span>: <span class="number">200</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="../qtquick/qml-qtquick-numberanimation.html">NumberAnimation</a></span> { <span class="name">from</span>: <span class="number">200</span>; <span class="name">to</span>: <span class="number">0</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="../qtquick/qml-qtquick-pauseanimation.html">PauseAnimation</a></span> { <span class="name">duration</span>: <span class="number">250</span> } <span class="comment">// This puts a bit of time between the loop</span>
        }

        <span class="type"><a href="../qtquick/qml-qtquick-mousearea.html">MouseArea</a></span> {
            <span class="name">anchors</span>.fill: <span class="name">parent</span>
            <span class="comment">// The animation starts running when you click within the rectangle</span>
            <span class="name">onClicked</span>: <span class="name">xAnim</span>.<span class="name">running</span> <span class="operator">=</span> <span class="number">true</span>
        }
    }
}
<span class="type"><a href="../qtquick/qml-qtquick-item.html">Item</a></span> {
    <span class="name">width</span>: <span class="number">320</span>
    <span class="name">height</span>: <span class="number">120</span>

    <span class="type"><a href="../qtquick/qml-qtquick-rectangle.html">Rectangle</a></span> {
        <span class="name">id</span>: <span class="name">rectangle</span>
        <span class="name">color</span>: <span class="string">&quot;yellow&quot;</span>
        <span class="name">width</span>: <span class="number">120</span>
        <span class="name">height</span>: <span class="number">120</span>

        <span class="type"><a href="../qtquick/qml-qtquick-mousearea.html">MouseArea</a></span> {
            <span class="name">anchors</span>.fill: <span class="name">parent</span>
            <span class="comment">// The animation starts running when you click within the rectange</span>
            <span class="name">onClicked</span>: <span class="name">anim</span>.<span class="name">running</span> <span class="operator">=</span> <span class="number">true</span>;
        }
    }

    <span class="comment">// This animation specifically targets the Rectangle's properties to animate</span>
    <span class="type"><a href="../qtquick/qml-qtquick-sequentialanimation.html">SequentialAnimation</a></span> {
        <span class="name">id</span>: <span class="name">anim</span>
        <span class="comment">// Animations on their own are not running by default</span>
        <span class="comment">// The default number of loops is one, restart the animation to see it again</span>

        <span class="type"><a href="../qtquick/qml-qtquick-numberanimation.html">NumberAnimation</a></span> { <span class="name">target</span>: <span class="name">rectangle</span>; <span class="name">property</span>: <span class="string">&quot;x&quot;</span>; <span class="name">from</span>: <span class="number">0</span>; <span class="name">to</span>: <span class="number">200</span>; <span class="name">duration</span>: <span class="number">500</span> }

        <span class="type"><a href="../qtquick/qml-qtquick-numberanimation.html">NumberAnimation</a></span> { <span class="name">target</span>: <span class="name">rectangle</span>; <span class="name">property</span>: <span class="string">&quot;x&quot;</span>; <span class="name">from</span>: <span class="number">200</span>; <span class="name">to</span>: <span class="number">0</span>; <span class="name">duration</span>: <span class="number">500</span> }
    }
}</pre>
<p class="centerAlign"><img src="images/qml-uses-animation.png" alt="" /></p><p>More information about animations can be found on the <a href="../qtquick/qtquick-statesanimations-topic.html">Important Concepts in Qt Quick - States, Transitions and Animations</a> page.</p>
</div>
<!-- @@@qtquick-usecase-animations.html -->
        </div>
       </div>
   </div>
   </div>
</div>
<div class="footer">
   <p>
   <acronym title="Copyright">&copy;</acronym> 2013 Digia Plc and/or its
   subsidiaries. Documentation contributions included herein are the copyrights of
   their respective owners.<br>    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.<br>    Digia, Qt and their respective logos are trademarks of Digia Plc     in Finland and/or other countries worldwide. All other trademarks are property
   of their respective owners. </p>
</div>
</body>
</html>