Qt Animation

Qt

Animation

2010-05-19William.L

[email protected]

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 - 100QTimeLine *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.

Animation Framework (2/5)� 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

Animation Framework (3/5)� 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();

Animation Framework (4/5)� 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(0.5, QRect(500, 450, 100, 30));animation.setKeyValueAt(0.75, QRect(500, 250, 100, 30));animation.setKeyValueAt(1, QRect(250, 250, 100, 30));

animation->start();

Animation Framework (5/5)� 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.

Qt State Machine Framework (2/7)� 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


� 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


� QSignalTransition

� Provides a transition based on a Qt signal.

Qt State Machine Framework (5/7)

Qt State Machine Framework (6/7)� 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);machine.addState(state2);machine.addState(state3);QObject::connect(&machine, SIGNAL(finished()),QApplication::instance(), SLOT(quit()));machine.setInitialState(state1);

machine.start();

Qt State Machine Framework (7/7)� 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.)

GraphicsView Framework (2/8)

Scene(Canvas)

Line item

Text item

Rectangle item

View

Vertical

Scrollbar

ThumbHorizontal 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 GraphicsViewframework and Clutter

Gtk_Clutter_ViewportGraphicsViewViewport

ActorGraphicsItemVisual Element

Represnetation

Stage

Clutter

GraphicsScene

GraphicsView

Framework

The place where visual elements exist (canvas)

GraphicsView Framework (7/8)� 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()

GraphicsView Framework (8/8)� 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

Technology

Qt Animation