Qt
Internal/Contributor docs for the Qt SDK. Note: These are NOT official API docs; those are found at https://doc.qt.io/
Loading...
Searching...
No Matches
animation.qdoc
Go to the documentation of this file.
1// Copyright (C) 2016 The Qt Company Ltd.
2// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
3
4/*!
5 \group animation
6 \brief Provides an easy way for creating animated GUIs.
7 \title Animation Framework
8
9 This page lists classes belonging to \l{Qt Core}'s
10 \l{The Animation Framework}{animation framework}.
11
12*/
13
14/*!
15 \page animation-overview.html
16 \title The Animation Framework
17 \ingroup qt-gui-concepts
18
19 \brief An overview of the Animation Framework
20
21 \ingroup frameworks-technologies
22
23 \keyword Animation
24
25 The animation framework provides an easy way to animate your GUI elements.
26 It enables you to animate a Qt property value of a widget or QObject.
27 Most of the features offered by the framework are also available in
28 \l{Qt Quick}, where it's possible to define animations in a declarative way.
29
30 This overview explains the framework's architecture, with examples that
31 demonstrate the common techniques used for animating QObject and
32 GUI elements.
33
34 \section1 The Animation architecture
35
36 The following diagram shows the most important classes provided by the
37 framework:
38
39 \image animations-architecture.png "The Animation Framework class hierarchy."
40
41 It includes the QAbstractAnimation class, which provides the
42 necessary foundation for animations. This class defines the
43 generic properties for all animations supported by the framework.
44 For example, the ability to start, stop, and pause an animation. The
45 class also receives the time change notifications.
46
47 The framework further provides the QVariantAnimation and
48 QAnimationGroup classes, which build on their base case, QAbstractAnimation.
49 Next in the hierarchy is QPropertyAnimation, which is derived from
50 QVariantAnimation, and it lets you animate a Qt property of a widget or
51 QObject. The class performs interpolation on the property value using an
52 easing curve. With these in place, you just need a QObject class with a
53 Qt property value that you can animate.
54
55 \note It is required that the target object you are animating is a QObject
56 or its subclass. This is necessary as the animation framework depends on the
57 \l{Meta-Object System}{meta-object system} for all the information about the
58 object it is animating.
59
60 Complex animations can be constructed by building a tree structure
61 of \l{QAbstractAnimation}s, where the tree is a QAnimationGroup that
62 contains other animations. These animation groups can also contain
63 subgroups representing different groups or animations, such as
64 QParallelAnimationGroup and QSequentialAnimationGroup.
65
66 Behind the scenes, all animations are controlled by a global
67 timer, which sends \l{QAbstractAnimation::updateCurrentTime()}{updates} about
68 all animations that are running.
69
70 For detailed information of these individual classes' and their roles in
71 the framework, refer to their documentation.
72
73 \section1 Classes offered by the framework
74
75 These classes provide the necessary infrastructure to create both simple and
76 complex animations.
77
78 \annotatedlist animation
79
80 \section1 Animating Qt properties
81
82 As the QPropertyAnimation class can interpolate on Qt properties, it is
83 used often. In fact, its superclass---QVariantAnimation---provides an
84 abstract implementation of \l{QVariantAnimation::}{updateCurrentValue()},
85 which does not change any value unless you change it on the
86 \l{QVariantAnimation::valueChanged()}{valueChanged signal}.
87
88 The framework lets you animate the Qt properties of the existing
89 classes in Qt. For example, the QWidget class---can be embedded in
90 a QGraphicsView---has properties for its bounds, colors, and so on.
91 The following example demonstrates how you can animate a QPushButton
92 widget:
93
94 \snippet code/src_corelib_animation_qpropertyanimation.cpp includes
95 \snippet code/src_corelib_animation_qpropertyanimation.cpp class_decl
96 \snippet code/src_corelib_animation_qpropertyanimation.cpp ctor_impl
97 \snippet code/src_corelib_animation_qpropertyanimation.cpp first_example
98 \snippet code/src_corelib_animation_qpropertyanimation.cpp ctor_close
99 \snippet code/src_corelib_animation_qpropertyanimation.cpp main
100
101 The example animates the \c pos Qt property of a QPushButton, to move
102 it from the top--left corner of the screen to the end position (250, 250),
103 in 10 seconds (10000 milliseconds).
104
105 It uses the linear interpolation method to control the speed of
106 animation between the start and end values. Try adding another value
107 in--between the start and end value to see how they are interpolated.
108 This time use the QPropertyAnimation::setKeyValueAt() function to add
109 these values:
110
111 \code
112 ...
113 anim->setDuration(10000);
114 anim->setKeyValueAt(0, QPoint(0, 0));
115 anim->setKeyValueAt(0.8, QPoint(250, 250));
116 anim->setKeyValueAt(1, QPoint(0, 0));
117 ...
118 \endcode
119
120 In this example, the animation moves the button to
121 (250, 250) in 8 seconds, and moves it back to its original position in
122 the remaining 2 seconds. The button's movement is linear-interpolated
123 between these points.
124
125 You can also animate a QObject's value that is not declared as a Qt
126 property, if the value has a setter method. In such cases, derive
127 a new class from the class that contains the value, and add a Qt property
128 for that value with the setter.
129
130 \note Each Qt property requires a getter also, so you should provide a
131 getter if that is not defined.
132
133 \code
134 class MyGraphicsRectItem : public QObject, public QGraphicsRectItem
135 {
136 Q_OBJECT
137 Q_PROPERTY(QPointF pos READ pos WRITE setPos)
138 };
139 \endcode
140
141 In this example, the \c MyGraphicsRectItem derives from
142 QGraphicsRectItem and QObject, and defines the \c pos property. You can
143 animate the item's \c pos even if QGraphicsRectItem does not provide
144 the \c pos property.
145
146 For a general introduction to the Qt property system, refer to
147 \l{Qt's Property System}.
148
149 \section1 Animations and the Graphics View Framework
150
151 QPropertyAnimation can also be used to animate a QGraphicsItem, which does
152 not inherit QObject. In such cases, you derive a class from the graphics
153 item that you want to animate. This derived class should also inherit form
154 QObject to enable using QPropertyAnimation on a QGraphicsItem. The
155 following example shows how this is done:
156
157 \code
158 class Pixmap : public QObject, public QGraphicsPixmapItem
159 {
160 Q_OBJECT
161 Q_PROPERTY(QPointF pos READ pos WRITE setPos)
162 ...
163 }
164 \endcode
165
166 \note You can also derive from QGraphicsWidget, which already is a
167 QObject.
168
169 As described in the previous section, you need to define
170 properties that you want to animate. The derived class must inherit
171 from QObject first as the meta-object system requires it.
172
173 \section1 Easing curves
174
175 A QPropertyAnimation performs linear interpolation
176 between the start and end property values. In addition to adding more key
177 values to the animation, you can also choose an easing curve to control the
178 speed of interpolation between 0 and 1, without changing the
179 path.
180
181
182 \snippet code/src_corelib_animation_qpropertyanimation.cpp ctor_impl
183 \snippet code/src_corelib_animation_qpropertyanimation.cpp easing-curve
184 \snippet code/src_corelib_animation_qpropertyanimation.cpp ctor_close
185
186 In this example, the animation follows a curve that makes the
187 \c button bounce like a ball. QEasingCurve offers a large collection of curves
188 to choose from the QEasingCurve::Type enum. If you want
189 to use another curve that is not available, implement one yourself and
190 register it with QEasingCurve.
191
192 \section1 Grouping animations
193
194 An application often contains more than one animation. For
195 example, it wants to move more than one graphics item
196 simultaneously or move them in sequence after each other.
197
198 The subclasses of QAnimationGroup---QSequentialAnimationGroup and
199 QParallelAnimationGroup---are containers for other animations so
200 that these animations can be animated either in sequence or
201 parallel. The QAnimationGroup does not animate properties, but it
202 gets notified of time changes periodically. This enables it to
203 forward those time changes to the animation groups, which control when
204 their animations are played.
205
206 The two following examples demonstrate the use of both
207 QSequentialAnimationGroup and QParallelAnimationGroup:
208
209 \snippet code/src_corelib_animation_qpropertyanimation.cpp ctor_impl
210 \snippet code/src_corelib_animation_qpropertyanimation.cpp animation-group1
211 \snippet code/src_corelib_animation_qpropertyanimation.cpp ctor_close
212
213 A parallel group plays more than one animation at the same time.
214 Its \l{QAbstractAnimation::}{start()} function starts all
215 animations that are part of the group.
216
217 \snippet code/src_corelib_animation_qpropertyanimation.cpp ctor_impl
218 \snippet code/src_corelib_animation_qpropertyanimation.cpp animation-group2
219 \snippet code/src_corelib_animation_qpropertyanimation.cpp ctor_close
220
221 As the name suggests, a QSequentialAnimationGroup plays
222 its animations in sequence. It starts the next animation in
223 the list after the previous finishes.
224
225 A group is an animation itself, so you can add
226 it to another group. This way, building an animation tree, which define
227 when the animations are played in relation to each other.
228
229 \section1 Object ownership
230
231 A QPropertyAnimation should always have a parent that controls
232 its lifespan. A typical application may include several animations that
233 are grouped, where the animation group takes ownership of those animations.
234 An independent QPropertyAnimation must be explicitly assigned a parent to
235 control its lifespan. In the following example, you can see that an
236 independent QPropertyAnimation has the QApplication instance as its
237 parent:
238
239 \snippet code/src_corelib_animation_qpropertyanimation.cpp includes
240 \snippet code/src_corelib_animation_qpropertyanimation.cpp class_decl
241 \snippet code/src_corelib_animation_qpropertyanimation.cpp ctor_impl
242 \snippet code/src_corelib_animation_qpropertyanimation.cpp first_example
243 \snippet code/src_corelib_animation_qpropertyanimation.cpp ctor_close
244 \snippet code/src_corelib_animation_qpropertyanimation.cpp main
245
246 \note You can also control the animation's lifespan by choosing a
247 \l{QAbstractAnimation::DeletionPolicy}{delete policy} while starting it.
248*/