Qt Animation

Qt
Animation
William.L 2010-05-19
wiliwe@gmail.com

Outline
What is animation?
Timer
Timeline
Animation Framework
State Machine Framework
GraphicsView Framework

What is animation?
A series of pictures, each of which is shown for a
fixed period

Timer (1/2)
Class – QTimer
Provides repetitive and single-shot timers
Emit the timeout() signal at constant intervals.
Usage
Create a QTimer
Connect its timeout() signal to the appropriate slots
Call start() with constant interval(in millisecond) parameter
From then on it will emit the timeout() signal at constant intervals.
QTimer *timer = new QTimer(this);
connect(timer, SIGNAL(timeout()),
this, SLOT(doSomethingWhenTimeout()));
timer-start(1000);

Timer (2/2)
Example
Timer-Button
A QPushButton moving between two points

Timeline (1/3)
Class – QTimeLine
Introduced in Qt 4.2
Most commonly used to animate a GUI control by calling
a slot periodically.
Usage
Construct a QTimeLine object with duration value in
milliseconds
The duration describes for how long the animation will run.
Set a suitable frame range by calling setFrameRange().
Connect the frameChanged() signal to a suitable slot in the
widget you wish to animate.
Ex : call setValue() in QProgressBar
Finally calling start(), QTimeLine will enter Running state
When done, QTimeLine enters NotRunning state, and emits
finished().

Timeline (2/3)
Usage
// Construct a 1-second(1000ms) timeline with a frame range of 0 - 100
QTimeLine *timeLine = new QTimeLine (1000, Parent);
timeLine-setFrameRange (0, 100);
connect ( timeLine, SIGNAL(frameChanged(int)),
widget, SLOT(Widget-Slot()) );

Timeline (3/3)
Other Methods
setLoopCount()
Holds the number of times the timeline should loop before it's
finished.
0 means that the timeline will loop forever.
setUpdateInterval()
Holds the time in milliseconds between each time QTimeLine
updates its current time
Default is 40ms (e.g. 25 frames per second)
setCurveShape()
Holds the shape of the timeline curve (how the timeline’s velocity
change)
Default is EaseInOutCurve
Example
Timeline-Progressbar
Use timeline to increase the progress of the progress bar.

Animation Framework (1/5)
Introduced in 4.6
Part of the Kinetic project
Makes it easy to animate QObjects, including QWidgets,
by allowing Qt properties to be animated.
Animations are controlled using Easing Curves and can
be grouped together.

Perform animation of a Qt property (color, size,
location, etc.)
QPropertyAnimation class
Containers for animating animations together
QSequentialAnimationGroup class
Contains animations are animating in sequence
QParallelAnimationGroup class
Contains animations are animating in parallel

Usage
Create a widget instance wanted to be animated.
Create a QPropertyAnimation instance passed widget instance
and the widget’s property name wanted to be animated
Set animation duration
Set animated widget’s star/end property value through
QPropertyAnimation methods, setStartValue() / setEndValue()
Call QPropertyAnimation’s start() method to start animating
QPropertyAnimation *animation = new QPropertyAnimation(Widget, geometry);
animation-setDuration(10000); // 10 seconds
animation-setStartValue(QRect(250, 250, 100, 30));
animation-setEndValue(QRect(500, 450, 100, 30));
animation-start();

Fine Control
setKeyValueAt (step, value)
Creates a key frame at the given step with the given value. The given
step must be in the range 0 to 1.
QPropertyAnimation *animation = new QPropertyAnimation(Widget, geometry);
animation-setDuration(10000); // 10 seconds
animation.setKeyValueAt(0, QRect(250, 250, 100, 30));
animation.setKeyValueAt(0.25, QRect(250, 450, 100, 30));
animation.setKeyValueAt(1, QRect(250, 250, 100, 30));
animation-start();

Example
AnimFmwk-BounceEasyCurve-ParalSequ
Three buttons animating in sequential and parallel animations
with easing curve
AnimFmwk-SetKeyValue
An animating button controlled by setKeyValueAt()

Qt State Machine Framework (1/7)
Classes – QStateMachine, QState, QFinalState,
QSignalTransition
For creating and executing state graphs.
Provides an API and execution model that can be used
to effectively embed the elements and semantics of
statecharts in Qt applications.
Qt's event system is used to drive the state machines.
The animation framework also plugs into the new Qt
state machine by allowing an animation to be played
when transitions are triggered.

Components
QStateMachine
Manages a set of states and transitions
Hierarchical
Use the addState() function to add a top-level state(QState) to the
state machine.
Before the machine can be started, use setInitialState() method to
set the initial state
Call start() method to start the state machine
The started() signal is emitted when the initial state is entered
Call stop() to stop the state machine explicitly
S1
S1-1 S1-2
S2

Components
QState
Represents a general-purpose state for QStateMachine
Can have child states
Can have transitions to other states
Use addTransition(sender,signal,target-state) method to add a
transition, this will return a QSignalTransition object
Call addAnimation() of the returned QSignalTransition object and
pass a QPropertyAnimation object to create a transition
animation
QFinalState
Represents a final state
Used to communicate that a QStateMachine has finished its work
finished() signal will be emitted when entering the final state

Components
QSignalTransition
Provides a transition based on a Qt signal.

Usage
QPushButton button(StateMachine Button);
button.show();
QStateMachine machine;
QState *state1 = new QState();
state1-assignProperty(button, geometry, QRect(200, 200, 100, 100));
QState *state2 = new QState();
state2-assignProperty(button, geometry, QRect(450, 450, 100, 100));
QFinalState *state3 = new QFinalState();
QSignalTransition *transition1 = state1-addTransition(button, SIGNAL(clicked()), state2);
transition1-addAnimation(new QPropertyAnimation(button, geometry));
state2-addTransition(button, SIGNAL(clicked()), state3);
machine.addState(state1);
QObject::connect(machine, SIGNAL(finished()),QApplication::instance(), SLOT(quit()));
machine.setInitialState(state1);
machine.start();

Example
StateMachine-AnimButton
A QPushButton moves and changes its states when it is
pressed. When reaching final state, the application will quit.

GraphicsView Framework (1/8)
Introduced in Qt 4.2
Replaced its predecessor, QCanvas
Item-based
Provides
A surface(scene) for managing and interacting with a large
number of custom-made 2D graphical items
A view widget for visualizing the items, with support for zooming
and rotation.
Items are varying geometric shapes(rectangle, line, circle, etc.)

Scene(Canvas)
Line item
Text item
Rectangle item
View
Vertical
Scrollbar
Thumb
Horizontal Scrollbar
Thumb
Ellipse
item
The dash-line
rectangle is the
visible area to
human

Components
The Scene - QGraphicsScene
Serves as a container for QGraphicsItem objects
Manages a large number of items
Propagating events from QGraphicsView to each item
Managing item state, such as item selection and focus.

Components
The View - QGraphicsView
Provides the view widget
To visualize the contents of a scene
It is a scroll area
Can attach several views to the same scene
provide several viewports into the same data set.
Receives input events from the keyboard and mouse, and translates
these to scene events

Components
The Item – QGraphicsItem
The base class for graphical items in a scene
Detect mouse events
Grab keyboard input focus
Drag Drop
Grouping
Collision detection

Comparison between GraphicsView
framework and Clutter
Clutter
Stage
GraphicsView
Framework
GraphicsScene
The place where
visual elements
exist (canvas)
Visual Element GraphicsItem Actor
Represnetation
Viewport GraphicsView Gtk_Clutter_Viewport

Usage
Create a QGraphicsScene object
Add objects of QGraphicsItem to the QGraphicsScene object
using addXXX() method, where “XXX” means the type of
graphics item.
Create a QGraphicsView object and set the created
QGraphicsScene object with the method setScene()
Finally, let QGraphicsView object be visible by calling show()
method. Or add created QGraphicsView object to a
QMainWindow object by calling setCentralWidget()

Example
GrphView-SimpleAnim
Shows how scene/view/items work together and an animation
that a rectangle graphic item moves and fades out.

Example Source Codes Download
The example codes for this slide (GitHub).
https://github.com/wiliwe/qt-animation-example.git
Using Git tool to download:
git clone https://github.com/wiliwe/qt-animation-example.git

References
http://doc.qt.nokia.com/4.6/qtimer.html
http://doc.qt.nokia.com/4.6/qtimeline.html
http://doc.qt.nokia.com/4.6/qtimeline.html#CurveShape-enum
http://doc.qt.nokia.com/4.6/animation-overview.html
http://doc.qt.nokia.com/4.6/statemachine-api.html
http://doc.qt.nokia.com/4.6/graphicsview.html
http://doc.qt.nokia.com/4.6/qgraphicsscene.html
http://doc.qt.nokia.com/4.6/qgraphicsitem.html

Qt Animation

More Related Content

Viewers also liked (10)

Similar to Qt Animation (20)

More from William Lee (20)

Recently uploaded (20)

Qt Animation