<?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" />
<!-- animation.qdoc -->
<title>Qt 4.8: The Animation Framework</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
<script src="scripts/jquery.js" type="text/javascript"></script>
<script src="scripts/functions.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style/superfish.css" />
<link rel="stylesheet" type="text/css" href="style/narrow.css" />
<!--[if IE]>
<meta name="MSSmartTagsPreventParsing" content="true">
<meta http-equiv="imagetoolbar" content="no">
<![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="style/style_ie6.css">
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="style/style_ie7.css">
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="style/style_ie8.css">
<![endif]-->
<script src="scripts/superfish.js" type="text/javascript"></script>
<script src="scripts/narrow.js" type="text/javascript"></script>
</head>
<body class="" onload="CheckEmptyAndLoadList();">
<div class="header" id="qtdocheader">
<div class="content">
<div id="nav-logo">
<a href="index.html">Home</a></div>
<a href="index.html" class="qtref"><span>Qt Reference Documentation</span></a>
<div id="narrowsearch"></div>
<div id="nav-topright">
<ul>
<li class="nav-topright-home"><a href="http://qt.digia.com/">Qt HOME</a></li>
<li class="nav-topright-dev"><a href="http://qt-project.org/">DEV</a></li>
<li class="nav-topright-doc nav-topright-doc-active"><a href="http://qt-project.org/doc/">
DOC</a></li>
<li class="nav-topright-blog"><a href="http://blog.qt.digia.com/">BLOG</a></li>
</ul>
</div>
<div id="shortCut">
<ul>
<li class="shortCut-topleft-inactive"><span><a href="index.html">Qt 4.8</a></span></li>
<li class="shortCut-topleft-active"><a href="http://qt-project.org/doc/">ALL VERSIONS </a></li>
</ul>
</div>
<ul class="sf-menu" id="narrowmenu">
<li><a href="#">API Lookup</a>
<ul>
<li><a href="classes.html">Class index</a></li>
<li><a href="functions.html">Function index</a></li>
<li><a href="modules.html">Modules</a></li>
<li><a href="namespaces.html">Namespaces</a></li>
<li><a href="qtglobal.html">Global Declarations</a></li>
<li><a href="qdeclarativeelements.html">QML elements</a></li>
</ul>
</li>
<li><a href="#">Qt Topics</a>
<ul>
<li><a href="qt-basic-concepts.html">Programming with Qt</a></li>
<li><a href="qtquick.html">Device UIs & Qt Quick</a></li>
<li><a href="qt-gui-concepts.html">UI Design with Qt</a></li>
<li><a href="supported-platforms.html">Supported Platforms</a></li>
<li><a href="technology-apis.html">Qt and Key Technologies</a></li>
<li><a href="best-practices.html">How-To's and Best Practices</a></li>
</ul>
</li>
<li><a href="#">Examples</a>
<ul>
<li><a href="all-examples.html">Examples</a></li>
<li><a href="tutorials.html">Tutorials</a></li>
<li><a href="demos.html">Demos</a></li>
<li><a href="qdeclarativeexamples.html">QML Examples</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="wrapper">
<div class="hd">
<span></span>
</div>
<div class="bd group">
<div class="sidebar">
<div class="searchlabel">
Search index:</div>
<div class="search" id="sidebarsearch">
<form id="qtdocsearch" action="" onsubmit="return false;">
<fieldset>
<input type="text" name="searchstring" id="pageType" value="" />
<div id="resultdialog">
<a href="#" id="resultclose">Close</a>
<p id="resultlinks" class="all"><a href="#" id="showallresults">All</a> | <a href="#" id="showapiresults">API</a> | <a href="#" id="showarticleresults">Articles</a> | <a href="#" id="showexampleresults">Examples</a></p>
<p id="searchcount" class="all"><span id="resultcount"></span><span id="apicount"></span><span id="articlecount"></span><span id="examplecount"></span> results:</p>
<ul id="resultlist" class="all">
</ul>
</div>
</fieldset>
</form>
</div>
<div class="box first bottombar" id="lookup">
<h2 title="API Lookup"><span></span>
API Lookup</h2>
<div id="list001" class="list">
<ul id="ul001" >
<li class="defaultLink"><a href="classes.html">Class index</a></li>
<li class="defaultLink"><a href="functions.html">Function index</a></li>
<li class="defaultLink"><a href="modules.html">Modules</a></li>
<li class="defaultLink"><a href="namespaces.html">Namespaces</a></li>
<li class="defaultLink"><a href="qtglobal.html">Global Declarations</a></li>
<li class="defaultLink"><a href="qdeclarativeelements.html">QML elements</a></li>
</ul>
</div>
</div>
<div class="box bottombar" id="topics">
<h2 title="Qt Topics"><span></span>
Qt Topics</h2>
<div id="list002" class="list">
<ul id="ul002" >
<li class="defaultLink"><a href="qt-basic-concepts.html">Programming with Qt</a></li>
<li class="defaultLink"><a href="qtquick.html">Device UIs & Qt Quick</a></li>
<li class="defaultLink"><a href="qt-gui-concepts.html">UI Design with Qt</a></li>
<li class="defaultLink"><a href="supported-platforms.html">Supported Platforms</a></li>
<li class="defaultLink"><a href="technology-apis.html">Qt and Key Technologies</a></li>
<li class="defaultLink"><a href="best-practices.html">How-To's and Best Practices</a></li>
</ul>
</div>
</div>
<div class="box" id="examples">
<h2 title="Examples"><span></span>
Examples</h2>
<div id="list003" class="list">
<ul id="ul003">
<li class="defaultLink"><a href="all-examples.html">Examples</a></li>
<li class="defaultLink"><a href="tutorials.html">Tutorials</a></li>
<li class="defaultLink"><a href="demos.html">Demos</a></li>
<li class="defaultLink"><a href="qdeclarativeexamples.html">QML Examples</a></li>
</ul>
</div>
</div>
</div>
<div class="wrap">
<div class="toolbar">
<div class="breadcrumb toolblock">
<ul>
<li class="first"><a href="index.html">Home</a></li>
<!-- Breadcrumbs go here -->
<li>The Animation Framework</li>
</ul>
</div>
<div class="toolbuttons toolblock">
<ul>
<li id="smallA" class="t_button">A</li>
<li id="medA" class="t_button active">A</li>
<li id="bigA" class="t_button">A</li>
<li id="print" class="t_button"><a href="javascript:this.print();">
<span>Print</span></a></li>
</ul>
</div>
</div>
<div class="content mainContent">
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#the-animation-architecture">The Animation Architecture</a></li>
<li class="level1"><a href="#classes-in-the-animation-framework">Classes in the Animation Framework</a></li>
<li class="level1"><a href="#animating-qt-properties">Animating Qt Properties</a></li>
<li class="level1"><a href="#animations-and-the-graphics-view-framework">Animations and the Graphics View Framework</a></li>
<li class="level1"><a href="#easing-curves">Easing Curves</a></li>
<li class="level1"><a href="#putting-animations-together">Putting Animations Together</a></li>
<li class="level1"><a href="#animations-and-states">Animations and States</a></li>
</ul>
</div>
<h1 class="title">The Animation Framework</h1>
<span class="subtitle"></span>
<!-- $$$animation-overview.html-description -->
<div class="descr"> <a name="details"></a>
<a name="animation"></a><p>The animation framework is part of the Kinetic project, and aims to provide an easy way for creating animated and smooth GUI's. By animating Qt properties, the framework provides great freedom for animating widgets and other <a href="qobject.html">QObject</a>s. The framework can also be used with the Graphics View framework.</p>
<p>In this overview, we explain the basics of its architecture. We also show examples of the most common techniques that the framework allows for animating <a href="qtwebkit-bridge.html#qobjects">QObjects</a> and graphics items.</p>
<a name="the-animation-architecture"></a>
<h2>The Animation Architecture</h2>
<p>We will in this section take a high-level look at the animation framework's architecture and how it is used to animate Qt properties. The following diagram shows the most important classes in the animation framework.</p>
<p class="centerAlign"><img src="images/animations-architecture.png" alt="" /></p><p>The animation framework foundation consists of the base class <a href="qabstractanimation.html">QAbstractAnimation</a>, and its two subclasses <a href="qvariantanimation.html">QVariantAnimation</a> and <a href="qanimationgroup.html">QAnimationGroup</a>. <a href="qabstractanimation.html">QAbstractAnimation</a> is the ancestor of all animations. It represents basic properties that are common for all animations in the framework; notably, the ability to start, stop, and pause an animation. It is also receives the time change notifications.</p>
<p>The animation framework further provides the <a href="qpropertyanimation.html">QPropertyAnimation</a> class, which inherits <a href="qvariantanimation.html">QVariantAnimation</a> and performs animation of a Qt property, which is part of Qt's <a href="metaobjects.html#meta-object-system">meta-object system</a>. The class performs an interpolation over the property using an easing curve. So when you want to animate a value, you can declare it as a property and make your class a <a href="qobject.html">QObject</a>. Note that this gives us great freedom in animating already existing widgets and other <a href="qobject.html">QObject</a>s.</p>
<p>Complex animations can be constructed by building a tree structure of <a href="qabstractanimation.html">QAbstractAnimation</a>s. The tree is built by using <a href="qanimationgroup.html">QAnimationGroup</a>s, which function as containers for other animations. Note also that the groups are subclasses of <a href="qabstractanimation.html">QAbstractAnimation</a>, so groups can themselves contain other groups.</p>
<p>The animation framework can be used on its own, but is also designed to be part of the state machine framework (See the <a href="statemachine-api.html">state machine framework</a> for an introduction to the Qt state machine). The state machine provides a special state that can play an animation. A <a href="qstate.html">QState</a> can also set properties when the state is entered or exited, and this special animation state will interpolate between these values when given a <a href="qpropertyanimation.html">QPropertyAnimation</a>. We will look more closely at this later.</p>
<p>Behind the scenes, the animations are controlled by a global timer, which sends <a href="qabstractanimation.html#updateCurrentTime">updates</a> to all animations that are playing.</p>
<p>For detailed descriptions of the classes' function and roles in the framework, please look up their class descriptions.</p>
<a name="classes-in-the-animation-framework"></a>
<h2>Classes in the Animation Framework</h2>
<p>These classes provide a framework for creating both simple and complex animations.</p>
<table class="annotated">
<tr class="odd topAlign"><td class="tblName"><p><a href="qabstractanimation.html">QAbstractAnimation</a></p></td><td class="tblDescr"><p>The base of all animations</p></td></tr>
<tr class="even topAlign"><td class="tblName"><p><a href="qanimationgroup.html">QAnimationGroup</a></p></td><td class="tblDescr"><p>Abstract base class for groups of animations</p></td></tr>
<tr class="odd topAlign"><td class="tblName"><p><a href="qeasingcurve.html">QEasingCurve</a></p></td><td class="tblDescr"><p>Easing curves for controlling animation</p></td></tr>
<tr class="even topAlign"><td class="tblName"><p><a href="qparallelanimationgroup.html">QParallelAnimationGroup</a></p></td><td class="tblDescr"><p>Parallel group of animations</p></td></tr>
<tr class="odd topAlign"><td class="tblName"><p><a href="qpauseanimation.html">QPauseAnimation</a></p></td><td class="tblDescr"><p>Pause for QSequentialAnimationGroup</p></td></tr>
<tr class="even topAlign"><td class="tblName"><p><a href="qpropertyanimation.html">QPropertyAnimation</a></p></td><td class="tblDescr"><p>Animates Qt properties</p></td></tr>
<tr class="odd topAlign"><td class="tblName"><p><a href="qsequentialanimationgroup.html">QSequentialAnimationGroup</a></p></td><td class="tblDescr"><p>Sequential group of animations</p></td></tr>
<tr class="even topAlign"><td class="tblName"><p><a href="qtimeline.html">QTimeLine</a></p></td><td class="tblDescr"><p>Timeline for controlling animations</p></td></tr>
<tr class="odd topAlign"><td class="tblName"><p><a href="qvariantanimation.html">QVariantAnimation</a></p></td><td class="tblDescr"><p>Abstract base class for animations</p></td></tr>
</table>
<a name="animating-qt-properties"></a>
<h2>Animating Qt Properties</h2>
<p>As mentioned in the previous section, the <a href="qpropertyanimation.html">QPropertyAnimation</a> class can interpolate over Qt properties. It is this class that should be used for animation of values; in fact, its superclass, <a href="qvariantanimation.html">QVariantAnimation</a>, is an abstract class, and cannot be used directly.</p>
<p>A major reason we chose to animate Qt properties is that it presents us with freedom to animate already existing classes in the Qt API. Notably, the <a href="qwidget.html">QWidget</a> class (which we can also embed in a <a href="qgraphicsview.html">QGraphicsView</a>) has properties for its bounds, colors, etc. Let's look at a small example:</p>
<pre class="cpp"> <span class="type"><a href="qpushbutton.html">QPushButton</a></span> button(<span class="string">"Animated Button"</span>);
button<span class="operator">.</span>show();
<span class="type"><a href="qpropertyanimation.html">QPropertyAnimation</a></span> animation(<span class="operator">&</span>button<span class="operator">,</span> <span class="string">"geometry"</span>);
animation<span class="operator">.</span>setDuration(<span class="number">10000</span>);
animation<span class="operator">.</span>setStartValue(<span class="type"><a href="qrect.html">QRect</a></span>(<span class="number">0</span><span class="operator">,</span> <span class="number">0</span><span class="operator">,</span> <span class="number">100</span><span class="operator">,</span> <span class="number">30</span>));
animation<span class="operator">.</span>setEndValue(<span class="type"><a href="qrect.html">QRect</a></span>(<span class="number">250</span><span class="operator">,</span> <span class="number">250</span><span class="operator">,</span> <span class="number">100</span><span class="operator">,</span> <span class="number">30</span>));
animation<span class="operator">.</span>start();</pre>
<p>This code will move <tt>button</tt> from the top left corner of the screen to the position (250, 250) in 10 seconds (10000 milliseconds).</p>
<p>The example above will do a linear interpolation between the start and end value. It is also possible to set values situated between the start and end value. The interpolation will then go by these points.</p>
<pre class="cpp"> <span class="type"><a href="qpushbutton.html">QPushButton</a></span> button(<span class="string">"Animated Button"</span>);
button<span class="operator">.</span>show();
<span class="type"><a href="qpropertyanimation.html">QPropertyAnimation</a></span> animation(<span class="operator">&</span>button<span class="operator">,</span> <span class="string">"geometry"</span>);
animation<span class="operator">.</span>setDuration(<span class="number">10000</span>);
animation<span class="operator">.</span>setKeyValueAt(<span class="number">0</span><span class="operator">,</span> <span class="type"><a href="qrect.html">QRect</a></span>(<span class="number">0</span><span class="operator">,</span> <span class="number">0</span><span class="operator">,</span> <span class="number">100</span><span class="operator">,</span> <span class="number">30</span>));
animation<span class="operator">.</span>setKeyValueAt(<span class="number">0.8</span><span class="operator">,</span> <span class="type"><a href="qrect.html">QRect</a></span>(<span class="number">250</span><span class="operator">,</span> <span class="number">250</span><span class="operator">,</span> <span class="number">100</span><span class="operator">,</span> <span class="number">30</span>));
animation<span class="operator">.</span>setKeyValueAt(<span class="number">1</span><span class="operator">,</span> <span class="type"><a href="qrect.html">QRect</a></span>(<span class="number">0</span><span class="operator">,</span> <span class="number">0</span><span class="operator">,</span> <span class="number">100</span><span class="operator">,</span> <span class="number">30</span>));
animation<span class="operator">.</span>start();</pre>
<p>In this example, the animation will take the button to (250, 250) in 8 seconds, and then move it back to its original position in the remaining 2 seconds. The movement will be linearly interpolated between these points.</p>
<p>You also have the possibility to animate values of a <a href="qobject.html">QObject</a> that is not declared as a Qt property. The only requirement is that this value has a setter. You can then subclass the class containing the value and declare a property that uses this setter. Note that each Qt property requires a getter, so you will need to provide a getter yourself if this is not defined.</p>
<pre class="cpp"> <span class="keyword">class</span> MyGraphicsRectItem : <span class="keyword">public</span> <span class="type"><a href="qobject.html">QObject</a></span><span class="operator">,</span> <span class="keyword">public</span> <span class="type"><a href="qgraphicsrectitem.html">QGraphicsRectItem</a></span>
{
Q_OBJECT
Q_PROPERTY(<span class="type"><a href="qrectf.html">QRectF</a></span> geometry READ geometry WRITE setGeometry)
};</pre>
<p>In the above code example, we subclass <a href="qgraphicsrectitem.html">QGraphicsRectItem</a> and define a geometry property. We can now animate the widgets geometry even if <a href="qgraphicsrectitem.html">QGraphicsRectItem</a> does not provide the geometry property.</p>
<p>For a general introduction to the Qt property system, see its <a href="properties.html#qt-s-property-system">overview</a>.</p>
<a name="animations-and-the-graphics-view-framework"></a>
<h2>Animations and the Graphics View Framework</h2>
<p>When you want to animate <a href="qgraphicsitem.html">QGraphicsItem</a>s, you also use <a href="qpropertyanimation.html">QPropertyAnimation</a>. However, <a href="qgraphicsitem.html">QGraphicsItem</a> does not inherit <a href="qobject.html">QObject</a>. A good solution is to subclass the graphics item you wish to animate. This class will then also inherit <a href="qobject.html">QObject</a>. This way, <a href="qpropertyanimation.html">QPropertyAnimation</a> can be used for <a href="qgraphicsitem.html">QGraphicsItem</a>s. The example below shows how this is done. Another possibility is to inherit <a href="qgraphicswidget.html">QGraphicsWidget</a>, which already is a <a href="qobject.html">QObject</a>.</p>
<pre class="cpp"> <span class="keyword">class</span> Pixmap : <span class="keyword">public</span> <span class="type"><a href="qobject.html">QObject</a></span><span class="operator">,</span> <span class="keyword">public</span> <span class="type"><a href="qgraphicspixmapitem.html">QGraphicsPixmapItem</a></span>
{
Q_OBJECT
Q_PROPERTY(<span class="type"><a href="qpointf.html">QPointF</a></span> pos READ pos WRITE setPos)
<span class="operator">.</span><span class="operator">.</span><span class="operator">.</span></pre>
<p>As described in the previous section, we need to define properties that we wish to animate.</p>
<p>Note that <a href="qobject.html">QObject</a> must be the first class inherited as the meta-object system demands this.</p>
<a name="easing-curves"></a>
<h2>Easing Curves</h2>
<p>As mentioned, <a href="qpropertyanimation.html">QPropertyAnimation</a> performs an interpolation between the start and end property value. In addition to adding more key values to the animation, you can also use an easing curve. Easing curves describe a function that controls how the speed of the interpolation between 0 and 1 should be, and are useful if you want to control the speed of an animation without changing the path of the interpolation.</p>
<pre class="cpp"> <span class="type"><a href="qpushbutton.html">QPushButton</a></span> button(<span class="string">"Animated Button"</span>);
button<span class="operator">.</span>show();
<span class="type"><a href="qpropertyanimation.html">QPropertyAnimation</a></span> animation(<span class="operator">&</span>button<span class="operator">,</span> <span class="string">"geometry"</span>);
animation<span class="operator">.</span>setDuration(<span class="number">3000</span>);
animation<span class="operator">.</span>setStartValue(<span class="type"><a href="qrect.html">QRect</a></span>(<span class="number">0</span><span class="operator">,</span> <span class="number">0</span><span class="operator">,</span> <span class="number">100</span><span class="operator">,</span> <span class="number">30</span>));
animation<span class="operator">.</span>setEndValue(<span class="type"><a href="qrect.html">QRect</a></span>(<span class="number">250</span><span class="operator">,</span> <span class="number">250</span><span class="operator">,</span> <span class="number">100</span><span class="operator">,</span> <span class="number">30</span>));
animation<span class="operator">.</span>setEasingCurve(<span class="type"><a href="qeasingcurve.html">QEasingCurve</a></span><span class="operator">::</span>OutBounce);
animation<span class="operator">.</span>start();</pre>
<p>Here the animation will follow a curve that makes it bounce like a ball as if it was dropped from the start to the end position. <a href="qeasingcurve.html">QEasingCurve</a> has a large collection of curves for you to choose from. These are defined by the <a href="qeasingcurve.html#Type-enum">QEasingCurve::Type</a> enum. If you are in need of another curve, you can also implement one yourself, and register it with <a href="qeasingcurve.html">QEasingCurve</a>.</p>
<a name="putting-animations-together"></a>
<h2>Putting Animations Together</h2>
<p>An application will often contain more than one animation. For instance, you might want to move more than one graphics item simultaneously or move them in sequence after each other.</p>
<p>The subclasses of <a href="qanimationgroup.html">QAnimationGroup</a> (<a href="qsequentialanimationgroup.html">QSequentialAnimationGroup</a> and <a href="qparallelanimationgroup.html">QParallelAnimationGroup</a>) are containers for other animations so that these animations can be animated either in sequence or parallel. The <a href="qanimationgroup.html">QAnimationGroup</a> is an example of an animation that does not animate properties, but it gets notified of time changes periodically. This enables it to forward those time changes to its contained animations, and thereby controlling when its animations are played.</p>
<p>Let's look at code examples that use both <a href="qsequentialanimationgroup.html">QSequentialAnimationGroup</a> and <a href="qparallelanimationgroup.html">QParallelAnimationGroup</a>, starting off with the latter.</p>
<pre class="cpp"> <span class="type"><a href="qpushbutton.html">QPushButton</a></span> <span class="operator">*</span>bonnie <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qpushbutton.html">QPushButton</a></span>(<span class="string">"Bonnie"</span>);
bonnie<span class="operator">-</span><span class="operator">></span>show();
<span class="type"><a href="qpushbutton.html">QPushButton</a></span> <span class="operator">*</span>clyde <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qpushbutton.html">QPushButton</a></span>(<span class="string">"Clyde"</span>);
clyde<span class="operator">-</span><span class="operator">></span>show();
<span class="type"><a href="qpropertyanimation.html">QPropertyAnimation</a></span> <span class="operator">*</span>anim1 <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qpropertyanimation.html">QPropertyAnimation</a></span>(bonnie<span class="operator">,</span> <span class="string">"geometry"</span>);
<span class="comment">// Set up anim1</span>
<span class="type"><a href="qpropertyanimation.html">QPropertyAnimation</a></span> <span class="operator">*</span>anim2 <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qpropertyanimation.html">QPropertyAnimation</a></span>(clyde<span class="operator">,</span> <span class="string">"geometry"</span>);
<span class="comment">// Set up anim2</span>
<span class="type"><a href="qparallelanimationgroup.html">QParallelAnimationGroup</a></span> <span class="operator">*</span>group <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qparallelanimationgroup.html">QParallelAnimationGroup</a></span>;
group<span class="operator">-</span><span class="operator">></span>addAnimation(anim1);
group<span class="operator">-</span><span class="operator">></span>addAnimation(anim2);
group<span class="operator">-</span><span class="operator">></span>start();</pre>
<p>A parallel group plays more than one animation at the same time. Calling its <a href="qabstractanimation.html#start">start()</a> function will start all animations it governs.</p>
<pre class="cpp"> <span class="type"><a href="qpushbutton.html">QPushButton</a></span> button(<span class="string">"Animated Button"</span>);
button<span class="operator">.</span>show();
<span class="type"><a href="qpropertyanimation.html">QPropertyAnimation</a></span> anim1(<span class="operator">&</span>button<span class="operator">,</span> <span class="string">"geometry"</span>);
anim1<span class="operator">.</span>setDuration(<span class="number">3000</span>);
anim1<span class="operator">.</span>setStartValue(<span class="type"><a href="qrect.html">QRect</a></span>(<span class="number">0</span><span class="operator">,</span> <span class="number">0</span><span class="operator">,</span> <span class="number">100</span><span class="operator">,</span> <span class="number">30</span>));
anim1<span class="operator">.</span>setEndValue(<span class="type"><a href="qrect.html">QRect</a></span>(<span class="number">500</span><span class="operator">,</span> <span class="number">500</span><span class="operator">,</span> <span class="number">100</span><span class="operator">,</span> <span class="number">30</span>));
<span class="type"><a href="qpropertyanimation.html">QPropertyAnimation</a></span> anim2(<span class="operator">&</span>button<span class="operator">,</span> <span class="string">"geometry"</span>);
anim2<span class="operator">.</span>setDuration(<span class="number">3000</span>);
anim2<span class="operator">.</span>setStartValue(<span class="type"><a href="qrect.html">QRect</a></span>(<span class="number">500</span><span class="operator">,</span> <span class="number">500</span><span class="operator">,</span> <span class="number">100</span><span class="operator">,</span> <span class="number">30</span>));
anim2<span class="operator">.</span>setEndValue(<span class="type"><a href="qrect.html">QRect</a></span>(<span class="number">1000</span><span class="operator">,</span> <span class="number">500</span><span class="operator">,</span> <span class="number">100</span><span class="operator">,</span> <span class="number">30</span>));
<span class="type"><a href="qsequentialanimationgroup.html">QSequentialAnimationGroup</a></span> group;
group<span class="operator">.</span>addAnimation(<span class="operator">&</span>anim1);
group<span class="operator">.</span>addAnimation(<span class="operator">&</span>anim2);
group<span class="operator">.</span>start();</pre>
<p>As you no doubt have guessed, <a href="qsequentialanimationgroup.html">QSequentialAnimationGroup</a> plays its animations in sequence. It starts the next animation in the list after the previous is finished.</p>
<p>Since an animation group is an animation itself, you can add it to another group. This way, you can build a tree structure of animations which specifies when the animations are played in relation to each other.</p>
<a name="animations-and-states"></a>
<h2>Animations and States</h2>
<p>When using a <a href="statemachine-api.html">state machine</a>, we can associate one or more animations to a transition between states using a <a href="qsignaltransition.html">QSignalTransition</a> or <a href="qeventtransition.html">QEventTransition</a> class. These classes are both derived from <a href="qabstracttransition.html">QAbstractTransition</a>, which defines the convenience function <a href="qabstracttransition.html#addAnimation">addAnimation()</a> that enables the appending of one or more animations triggered when the transition occurs.</p>
<p>We also have the possibility to associate properties with the states rather than setting the start and end values ourselves. Below is a complete code example that animates the geometry of a <a href="qpushbutton.html">QPushButton</a>.</p>
<pre class="cpp"> <span class="type"><a href="qpushbutton.html">QPushButton</a></span> <span class="operator">*</span>button <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qpushbutton.html">QPushButton</a></span>(<span class="string">"Animated Button"</span>);
button<span class="operator">-</span><span class="operator">></span>show();
<span class="type"><a href="qstatemachine.html">QStateMachine</a></span> <span class="operator">*</span>machine <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qstatemachine.html">QStateMachine</a></span>;
<span class="type"><a href="qstate.html">QState</a></span> <span class="operator">*</span>state1 <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qstate.html">QState</a></span>(machine);
state1<span class="operator">-</span><span class="operator">></span>assignProperty(button<span class="operator">,</span> <span class="string">"geometry"</span><span class="operator">,</span> <span class="type"><a href="qrect.html">QRect</a></span>(<span class="number">0</span><span class="operator">,</span> <span class="number">0</span><span class="operator">,</span> <span class="number">100</span><span class="operator">,</span> <span class="number">30</span>));
machine<span class="operator">-</span><span class="operator">></span>setInitialState(state1);
<span class="type"><a href="qstate.html">QState</a></span> <span class="operator">*</span>state2 <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qstate.html">QState</a></span>(machine);
state2<span class="operator">-</span><span class="operator">></span>assignProperty(button<span class="operator">,</span> <span class="string">"geometry"</span><span class="operator">,</span> <span class="type"><a href="qrect.html">QRect</a></span>(<span class="number">250</span><span class="operator">,</span> <span class="number">250</span><span class="operator">,</span> <span class="number">100</span><span class="operator">,</span> <span class="number">30</span>));
<span class="type"><a href="qsignaltransition.html">QSignalTransition</a></span> <span class="operator">*</span>transition1 <span class="operator">=</span> state1<span class="operator">-</span><span class="operator">></span>addTransition(button<span class="operator">,</span>
SIGNAL(clicked())<span class="operator">,</span> state2);
transition1<span class="operator">-</span><span class="operator">></span>addAnimation(<span class="keyword">new</span> <span class="type"><a href="qpropertyanimation.html">QPropertyAnimation</a></span>(button<span class="operator">,</span> <span class="string">"geometry"</span>));
<span class="type"><a href="qsignaltransition.html">QSignalTransition</a></span> <span class="operator">*</span>transition2 <span class="operator">=</span> state2<span class="operator">-</span><span class="operator">></span>addTransition(button<span class="operator">,</span>
SIGNAL(clicked())<span class="operator">,</span> state1);
transition2<span class="operator">-</span><span class="operator">></span>addAnimation(<span class="keyword">new</span> <span class="type"><a href="qpropertyanimation.html">QPropertyAnimation</a></span>(button<span class="operator">,</span> <span class="string">"geometry"</span>));
machine<span class="operator">-</span><span class="operator">></span>start();</pre>
<p>For a more comprehensive example of how to use the state machine framework for animations, see the states example (it lives in the <tt>examples/animation/states</tt> directory).</p>
</div>
<!-- @@@animation-overview.html -->
</div>
</div>
</div>
<div class="ft">
<span></span>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2015 The Qt Company Ltd.
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>
Qt and respective logos are trademarks of The Qt Company Ltd
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>
<script src="scripts/functions.js" type="text/javascript"></script>
</body>
</html>
