×
Namespaces

Variants
Actions
Revision as of 04:13, 11 October 2012 by hamishwillee (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Archived:Animating graphics item rotation

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.

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


Contents

Overview

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 fw.zip


Preconditions

Qt 4.6 has been installed.


Header file

Define rotationAngleY property and setter/getter function.

class PictureItem: public QObject, public QGraphicsPixmapItem
{
Q_OBJECT
 
// Rotating picture property for QPropertyAnimation
Q_PROPERTY(qreal rotationAngleY READ rotationAngleY WRITE setRotationAngleY)
 
public:
// For rotationAngleY property
void setRotationAngleY(qreal angle);
qreal rotationAngleY() const;
 
// Animate angle of this class
void animateAngle(int startAngle, int endAngle);
 
private:
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());
setTransform(t);
}
}
 
void PictureItem::animateAngle(int startAngle, int endAngle)
{
// Start animate this class
QPropertyAnimation* anim = new QPropertyAnimation(this, "rotationAngleY");
 
// 2 second duration animation
anim->setDuration(2000);
// angle to start animation
anim->setStartValue(startAngle);
// end angle of animation
anim->setEndValue(endAngle);
// easing curve
anim->setEasingCurve(QEasingCurve::InOutBack);
 
// Listen animation finished signal
QObject::connect(anim, SIGNAL(finished()), this, SLOT(animationFinished()));
 
// Start animation and delete QPropertyAnimation class on the end
anim->start(QAbstractAnimation::DeleteWhenStopped);
}


Postconditions

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 04:13.
115 page views in the last 30 days.