[Solved] QAnimations: what's the best way to print flippable cards?

[Pippin]

@mrjj Okay thanks, I'll look into it. Do you have any idea how to use an animation based on a QTransform object? Is it even possible? Like, putting the starting value at Id, and the ending value at the matrix we want?

Or should I rather create 3 animations on the same object (1 translation + 1 scale x-wise OR 1 rotation round Y + 1 rotation round Z) ? Does Qt allow more than 1 animation at a time for a given object?

[mrjj]

@Pippin

Well I only used QPropertyAnimation which needs a property.
Not seen any that took a QTransform. So I think it can't out of the box but
it might be possible in some way.

--Does Qt allow more than 1 animation at a time for a given object
That I never tried. But if different props, I see no reason why not.

[SGaist]

QParallelAnimationGroup to apply several animations at once

There's no QTransform property put that can be added to a custom object

[Pippin]

Okay I'm almost there! Switching the 2 Pixmaps is done successfully, the card is moved, rotated and scaled at the same time.

But the overall process doesn't look natural because, while the translation's speed is constant, the QGraphicsItem is not centered. (If I move the item to the position (x, y), the top left corner of the item will match (x, y) instead of its center.) Because of this, the item first seems to move slowly (typically when I'm scaling it from 1 to 0), and then faster (typically when I'm scaling it back from 0 to 1).

How can I specify that I want my items centered on the position I draw them onto?

[mrjj]

@Pippin
Hi
Good work.
Maybe its stupid question but if you draw it yourself, cant you just draw it centered ?
All you need is size of area and sixe of item, then you can offset x,y
sort of like this:
Draws images centered.

QImage source;
QPainter painter(...);
QRect rect(source.rect());
QRect devRect(painter.device()->width(), painter.device()->height());
rect.moveCenter(devRect.center());
painter.drawImage(rect.topLeft(), source);

[Pippin]

@mrjj

I don't understand, how can I draw it myself? I'm doing everything through animations. I'm not using any QImage or QPainter at this point. Qt is basically drawing everything itself from Point A to Point B, and I'm looking for a way to make it do that in a centered manner.

[mrjj]

@Pippin
Ok. Just read "on the position I draw them onto?" that you did draw it yourself.
So I guess you cannot adjust x,y yourself. sorry.

[Pippin]

So does this mean there's no way to solve this problem with animations? I've tried to set the "TransformOriginPoint" to the center of the item but that didn't change anything apparently. I've also looked for an option that would allow "drawing on center" but I couldn't find anything.

[mrjj]

@Pippin said:
Hi its just means that I dont know :)
You can do many things with Transform
like
QTransform trans;
trans.translate(500, 250);
item->setTransform(trans);

so there can easy be a way to do it.

I suggest you make a nice new question for it in forum asking how to
animated using center and see if anyone knows.

[Pippin]

Okay I've managed it. Let me show you the code of the class I created for flippable QGraphicsPixmapItems. It's very tricky because the "transformOriginPoint" is just the origin used for rotations. So if you decide to scale the item horizontally, you would have to center it afterwards on the "transformOriginPoint" because Qt won't do that for you.

Thank you @mrjj for your help and patience. That was immensely appreciated :-)

QSpecialGraphicsPixmapItem.hpp

#pragma once

#include <QGraphicsPixmapItem>
#include <QObject>

class QSpecialGraphicsPixmapItem : public QObject, public QGraphicsPixmapItem
{
	Q_OBJECT
	Q_PROPERTY(qreal stage READ stage WRITE setStage)
	
	private:
	
		const QPixmap& faceUp;
		const QPixmap& faceDown;
		
		qreal xInitialSpot;
		qreal yInitialSpot;
		qreal xFinalSpot;
		qreal yFinalSpot;
		qreal initialRotation;
		qreal finalRotation;
		qreal step;
		
		bool isFaceUp;
		bool isFlipped;

	public:
	
		QSpecialGraphicsPixmapItem(const QPixmap&, const QPixmap&, const QPointF&, qreal);
		~QSpecialGraphicsPixmapItem(void);
		
		qreal stage(void) const;
		void setStage(qreal);
		void prepareAnimation(const QPointF&, qreal, bool);
};

QSpecialGraphicsPixmapItem.cpp

#include <QtMath>
#include "QSpecialGraphicsPixmapItem.hpp"

QSpecialGraphicsPixmapItem::QSpecialGraphicsPixmapItem(const QPixmap& pixmap, const QPixmap& pixmap2, const QPointF& location, qreal rotation) :
	QObject(),
	QGraphicsPixmapItem(pixmap2),
	faceUp(pixmap),
	faceDown(pixmap2),
	xInitialSpot(0.),
	yInitialSpot(0.),
	xFinalSpot(location.x()),
	yFinalSpot(location.y()),
	initialRotation(0.),
	finalRotation(rotation),
	step(0.),
	isFaceUp(false),
	isFlipped(false)
{
	QGraphicsItem::setTransformOriginPoint(CARD_WIDTH/2., CARD_HEIGHT/2.);
	QGraphicsItem::setRotation(rotation);
	QGraphicsItem::setPos(location.x() - CARD_WIDTH/2., location.y() - CARD_HEIGHT/2.);
}

QSpecialGraphicsPixmapItem::~QSpecialGraphicsPixmapItem(void)
{
}

qreal QSpecialGraphicsPixmapItem::stage(void) const
{
	return step;
}

void QSpecialGraphicsPixmapItem::setStage(qreal foo)
{
	if (isFlipped && foo >= .5 && step < .5)
	{
		isFaceUp ? QGraphicsPixmapItem::setPixmap(faceDown) : QGraphicsPixmapItem::setPixmap(faceUp);
		isFaceUp = not isFaceUp;
	}

	if (foo < 1.)
	{
		qreal r = initialRotation + foo*(finalRotation - initialRotation);
	
		if (isFlipped)
		{
			qreal dis1 = (1. - qFabs(1. - 2.*foo))*CARD_WIDTH/2.;
			qreal dis2 = (1. - qFabs(1. - 2.*foo))*CARD_HEIGHT/2.;
			qreal cosX = qCos(qDegreesToRadians(r));
			qreal sinX = qSin(qDegreesToRadians(r));
		
			QGraphicsItem::setTransform(QTransform().rotate(-r)*QTransform().scale(qFabs(1 - 2*foo), 1.)*QTransform().rotate(r));
			QGraphicsItem::setPos(xInitialSpot + foo*(xFinalSpot - xInitialSpot) - CARD_WIDTH/2. + (dis1 + dis2*sinX/2.)*cosX,
				yInitialSpot + foo*(yFinalSpot - yInitialSpot) - CARD_HEIGHT/2. + (dis2 + dis1*cosX/2.)*sinX);
		}
		else
			QGraphicsItem::setPos(xInitialSpot + foo*(xFinalSpot - xInitialSpot) - CARD_WIDTH/2., 
				yInitialSpot + foo*(yFinalSpot - yInitialSpot) - CARD_HEIGHT/2.);
		
		QGraphicsItem::setRotation(r);
	}
	else
	{
		QGraphicsItem::resetTransform();
		QGraphicsItem::setRotation(finalRotation);
		QGraphicsItem::setPos(xFinalSpot - CARD_WIDTH/2., yFinalSpot - CARD_HEIGHT/2.);
	}
	
	step = foo;
}

void QSpecialGraphicsPixmapItem::prepareAnimation(const QPointF& foo, qreal goo, bool bar)
{
	if (xFinalSpot == foo.x() && yFinalSpot == foo.y() && finalRotation == goo && isFlipped == bar)
		return;

	xInitialSpot = xFinalSpot;
	yInitialSpot = yFinalSpot;
	xFinalSpot = foo.x();
	yFinalSpot = foo.y();
	initialRotation = finalRotation;
	finalRotation = goo;	
	isFlipped = bar;
	step = 0.;
}

So with this class I can flip, translate and rotate a QGraphicsPixmapItem at the same time in 1 move. I named the property stage although I had to give the variable another name for compilation purposes (step). This variable has no real meaning, except that it always starts at 0 and always ends at 1, so it could represent the progress of the animation. In my project all my QGraphicsPixmapItems have the same height and width, so I took the liberty of using two constant variables CARD_WIDTH and CARD_HEIGHT for all of them. When you declare the object, you have to specify its face-up pixmap, its face-down pixmap, its initial location and its initial rotation value:

item = new QSpecialGraphicsPixmapItem(pix, pix2, QPointF(150., 150.), 0.);
WindowScene.addItem(item);

After that we want to move that object. Before creating an animation, you have to provide the object with its final location, its final rotation value, and if you flip it in the process or not. This is what QSpecialGraphicsPixmapItem::prepareAnimation is for. For example, we want to move the object to [500, 500], rotate it by 90 degrees and flip it.

item->prepareTransform(QPointF(500., 500.), 90., true);
	
QPropertyAnimation *anim = new QPropertyAnimation(item, "stage");
anim->setDuration(1000);
anim->setEndValue(1.);
anim->start();

And that will do. A few things:

• If you provide the location [x, y] (either in the constructor or later when you call prepareAnimation), the class will actually set it to [x - CARD_WIDTH/2, y - CARD_HEIGHT/2] so that it's centered on the location.
• If you take a look at setStage, you'll see weird numbers like (dis1 + dis2*sinX/2.)*cosX and (dis2 + dis1*cosX/2.)*sinX. If you decide to flip, rotate and translate an object at the same time, its trajectory can be a bit weird so I had to do a little math to make it look more natural. Unfortunately, these are not the correct numbers. Tests showed that [dis1*cosX, 0] is the appropriate (x-wise) gap if you flip a stationary, vertical card. Likewise, tests showed that [0, dis2*sinX] is the appropriate (y-wise) gap if you flip a stationary, horizontal card. But I failed to find out the appropriate gaps when you flip, rotate and translate the object at the same time. However, [(dis1 + dis2*sinX/2.)*cosX, (dis2 + dis1*cosX/2.)*sinX] seems decent enough. If someone has a deeper understanding of how QTransform works than me (...shouldn't be that hard ^^), and figures out the appropriate gaps, please share it!
• I took me several days to think, try, despair, rethink, retry... before getting there. I'm only doing it because I need Qt in my project for other things. If you don't really need Qt for your project, you really should use the SFML instead. As a newbie I could do all this with the SFML within a few hours (and then months later, I painfully realized that I needed to do that with Qt). Really, the SFML is great. It's very user-friendly, simple, and very optimized. I haven't compared anything yet, but I have no doubt that all this dreadful code I had to write for Qt will turn out awfully slower than any code using the SFML...

If someone knows how to improve my code, in any way (simplicity, optimization), please share it! :)

[mrjj]

@Pippin
Most welcome.
And thank you for the nice followup.