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:Animating graphics item rotation

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.

Article Metadata
Code ExampleTested with
Devices(s): Symbian, Windows
Platform(s): S60 3rd Edition, FP1
S60 3rd Edition, FP2
S60 5th Edition
S60 5th Edition
S60 3rd Edition FP2
S60 3rd Edition FP1
Keywords: QGraphicsItem, QPropertyAnimation
Created: tepaa (17 Dec 2009)
Last edited: hamishwillee (11 Oct 2012)



This series of snippets demonstrates how to implement nice animation effects into your Qt UI application. Qt 4.6 has Qt Animation Framework as a built-in feature. Documentation can be found here: [1]

This snippet shows how to animate QGraphicsPixmapItem with a rotate effect.

See full example code here: File:Animation


Qt 4.6 has been installed.

Header file

Define rotationAngleY property and setter/getter function.

class PictureItem: public QObject, public QGraphicsPixmapItem
// Rotating picture property for QPropertyAnimation
Q_PROPERTY(qreal rotationAngleY READ rotationAngleY WRITE setRotationAngleY)
// For rotationAngleY property
void setRotationAngleY(qreal angle);
qreal rotationAngleY() const;
// Animate angle of this class
void animateAngle(int startAngle, int endAngle);
qreal m_rotationAngleY;

Source file

Implement setter/getter for rotationAngleY property.

The animation is executed from the animateAngle() method.

qreal PictureItem::rotationAngleY() const
return m_rotationAngleY;
void PictureItem::setRotationAngleY(qreal angle)
if (m_rotationAngleY != angle) {
m_rotationAngleY = angle;
QPointF c = boundingRect().center();
QTransform t;
t.translate(c.x(), c.y());
t.rotate(m_rotationAngleY, Qt::YAxis);
t.translate(-c.x(), -c.y());
void PictureItem::animateAngle(int startAngle, int endAngle)
// Start animate this class
QPropertyAnimation* anim = new QPropertyAnimation(this, "rotationAngleY");
// 2 second duration animation
// angle to start animation
// end angle of animation
// easing curve
// Listen animation finished signal
QObject::connect(anim, SIGNAL(finished()), this, SLOT(animationFinished()));
// Start animation and delete QPropertyAnimation class on the end


PictureItem rotation can be animated by calling PictureItem::animateAngle().

Animation Framework snippet series

Full example code package

This page was last modified on 11 October 2012, at 01:13.
103 page views in the last 30 days.