Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Archived:Animated effects with the Qt Graphics View Framework

From 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 (30 Jan 2013)

The media player is loading...


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:

This page was last modified on 30 January 2013, at 04:27.
65 page views in the last 30 days.