Revision as of 09:28, 15 June 2012 by hamishwillee (Talk | contribs)

Archived:Animated effects with the Qt Graphics View Framework

From Nokia Developer Wiki
Jump to: navigation, search

Archived.pngArchived: This article is archived because it is not considered relevant for third-party developers creating commercial solutions today. If you think this article is still relevant, let us know by adding the template {{ReviewForRemovalFromArchive|user=~~~~|write your reason here}}.

Qt Quick should be used for all UI development on mobile devices. The approach described in this article (using C++ for the Qt app UI) is deprecated.

This code snippet shows how to create animated graphics effect with the Qt's Graphics View Framework.

Article Metadata
Code ExampleCompatibility
Platform(s): any
Keywords: QGraphicsEffect
Created: gnuton (29 Dec 2010)
Last edited: hamishwillee (15 Jun 2012)


The right way to apply effects to Graphics items is to use QGraphicsEffect based classes. Few pre-build effects are already part of the framework and those are not animated. Since QGraphicsEffect is a QObject derived class, creating animated effects is possible. To achieve that, you need a timer which is started by QObject::startTimer(int interval) and which will call the virtual timerEvent() function of your QObject derived class every N milliseconds as specified by the interval.

Using an interval of 17 ms permits the animation to run at about 58 FPS, which is a good frame-rate.

So every 17ms the timerEvent slot updates the parameter (the rotation angle in this case) which drives the animation and it calls update() to draw again the item using MyQGraphicsEffect::draw function.

Since painter transformations don't affect QGraphicsEffect::drawSource (at least in the case shown here), a QImage has been used as device buffer for an ad-hoc painter. Eventually the buffer, which contains the animation frames, is drawn on the screen by the application painter.


Here is the graphics effect class which rotates the items around the Y axis.

#include <QGraphicsEffect>
#include <QGraphicsItem>
#include <QPainter>
class MyQGraphicsEffect : public QGraphicsEffect
MyQGraphicsEffect(QObject *parent = 0)
QObject::startTimer(17); // About 60 FPS
virtual ~MyQGraphicsEffect(){};
virtual void draw(QPainter *painter){
QSizeF s = this->sourceBoundingRect().size();
QImage buff(s.width(), s.height(), QImage::Format_ARGB32);
QPainter p(&buff);
p.fillRect(0, 0, s.width(), s.height(), Qt::black);
QTransform t;
t.rotate(mAngle, Qt::YAxis);
p.setTransform(t, true);
QRectF target(0, 0, s.width(), s.height());
QRectF source(0, 0, s.width(), s.height());
painter->drawImage(target, buff, source);
void timerEvent(QTimerEvent *event){
mAngle = (mAngle >= 360) ? 0 : mAngle+= 1;
qreal mAngle;

This effect, as any other effect, can be applied to any item as shown in the following code:

#include <QtGui/QApplication>
#include <QGraphicsView>
#include <QGraphicsScene>
#include <QGraphicsPixmapItem>
#include <QGraphicsEffect>
#include "graphicseffect.h"
int main(int argc, char *argv[])
QApplication a(argc, argv);
QGraphicsView view;
view.setScene(new QGraphicsScene);
QGraphicsPixmapItem *p = view.scene()->addPixmap(QPixmap(":/meditate.png"));
MyQGraphicsEffect e;
return a.exec();

Full code

Full source code is available here: Media:Graphicseffects-animated.zip

85 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.


Thank you!

We appreciate your feedback.