##### Actions

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 over the next few weeks. Thanks for all your past and future contributions.

# Twisted Carousel Animation with the Qt graphics view framework

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);    }}`