×
Namespaces

Variants
Actions

Twisted Carousel Animation with the Qt graphics view framework

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Code ExampleCompatibility
Platform(s): any
Symbian
Article
Keywords: QGraphicsView, carousel, animations
Created: gnuton (31 Dec 2010)
Last edited: hamishwillee (30 Jan 2013)

Introduction

During the creation of the carouse animation I wondered how can I achieve a more cool and complex animation... then I got the idea; why not play with the coordinate system? So I wrote this article to show you this example which wants to empathize one time more the powerful of the QTransform class which translates, scales, shears, rotates or projects the coordinate system. Thanks to the help of this class achieving more complex animations or shapes is child's play.

Goal

Goal of this example is using QTransform to create a twisted carousel animation which is achieved rotating the coordinate system. The video below shows better what we are going to achieve in this article: The media player is loading...

Code

Here I want to show you just the class which animate the items along the twisted ellipse. Basically the code is pretty much the same what we have seen in the article: Carousel Animation with the Qt graphics view framework, but the trick is done by rotating the coordinate system.

void carousel::doAnimation(const QVariant& angle){
if (!scene())
return;
 
const int steps = items.count();
int step = angle.toInt();
 
foreach(QGraphicsItem* i, items){
step += 360/steps;
 
const double alpha = step * (pi/180.0); // Converts degree into radians
const double beta = -phi * (pi/180.0);
 
double x = (a * cos(alpha) * cos(beta)) - (b * sin(alpha) * sin(beta));
double y = (a * cos(alpha) * sin(beta)) + (b * sin(alpha) * cos(beta));
 
/* Scaling and Fading */
{
// Setting parameters
const qreal range = 2 * b; // y range [-b,b]
const qreal max = 1.5; // bigger value at b
const qreal min = 0.4; // lower value at -b
 
// linear equation: y = mx +c
qreal adjustedY = y + b;
qreal scaleFactor = ((max - min)/range)* adjustedY + min;
 
i->setScale(scaleFactor);
i->setOpacity(qBound(0.0, scaleFactor, 1.0));
}
 
/* Stack position */
{
// Setting parameters
const qreal range = 2 * b; // y range [-b,b]
const qreal max = 1.0; // bigger value at b
const qreal min = 0.0; // lower value at -b
 
// linear equation: y = mx +c
qreal adjustedY = y + b;
qreal z = ((max - min)/range)* adjustedY + min;
 
i->setZValue(z);
}
 
QTransform t;
 
/* Rotation */
{
// Setting parameters
const qreal range = 2 * b; // y range [-b,b]
const qreal max = 360; // bigger value at b
const qreal min = 180; // lower value at -b
 
// linear equation: y = mx +c
qreal adjustedY = y + b;
qreal r = ((max - min)/range)* adjustedY + min;
 
t.rotate(r, Qt::YAxis);
}
 
/* Moving items using the item's center as origin */
{
 
// bounding rectangle is in item coordinates, so it is not affected by transformations such as scale
x -= i->sceneBoundingRect().width()/2;
y -= i->sceneBoundingRect().height()/2;
t.translate(x,y);
}
 
i->setTransform(t);
}
}

You can download the full code from here Media:TwistedCarousel-Example.zip

This page was last modified on 30 January 2013, at 04:28.
39 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.

×