How to animate line around fixed point in Qt?

Question

I'm trying to animate a line around a fixed point in Qt. I assume I need to use the QPropertyAnimation class to do this but cannot figure out which property to use.

For clarity, here's what I'm trying to do.

|        (5, 10)
|       /
|      /
|     /
|    /          (10, 5)   
|   /          .
|  /
| /           
|/
|--------------------------
 ^
 |---(0,0)

Given (x1, y1) = (0, 0) & (x2, y2) = (5, 10), this would be the first frame of the animation. I'd like to then do a smooth animation from (x1, y1), (x2, y2), (with (x1, y1) being one end of the line and (x2, y2) being the other end) to (x1, y1), (x3, y3), with (x3, y3) = (10, 5). Similar to how a clock hand is animated. And before someone posts the analog clock example it uses a rotating pixmap which is not what I need.

I haven't found a whole lot of information on Qt animations, just a lot of basic GUI tutorials.

I have tried doing the following

QPropertyAnimation *anim = new QPropertyAnimation(widget, "geometry")

and the problem with this method is that in this technique the widget is moved between 2 points based on (0, 0) of the widget using the ->setStartValue(startX, startY, ...) and does not allow me to keep one of my lines at a fixed point.

and

QPropertyAnimation *anim = new QPropertyAnimation(widget, "rotation")

The problem with this method being similar to geometry in that it rotates said widget along a (0, 0) point.

Can someone tell me how to achieve the desired effect?

Thanks.

Answer 1

QGraphicsXXXItem do not support q-properties so they can not be used with QPropertyAnimation directly. So the solution is to create a class that inherits QObject and QGraphicsLineItem, plus we must add a q-property that handles the p2 position of the QLineF associated with the line as shown below:

lineitem.h

#ifndef LINEITEM_H
#define LINEITEM_H

#include <QGraphicsLineItem>
#include <QObject>

class LineItem: public QObject, public QGraphicsLineItem {
    Q_OBJECT
    Q_PROPERTY(QPointF p1 READ p1 WRITE setP1)
    Q_PROPERTY(QPointF p2 READ p2 WRITE setP2)

public:
    using QGraphicsLineItem::QGraphicsLineItem;

    QPointF p1() const {
        return  line().p1();
    }

    void setP1(const QPointF & p){
        QLineF l = line();
        l.setP1(p);
        setLine(l);
    }

    QPointF p2() const {
        return  line().p2();
    }

    void setP2(const QPointF & p){
        QLineF l = line();
        l.setP2(p);
        setLine(l);
    }
};

#endif // LINEITEM_H

main.cpp

#include "lineitem.h"

#include <QApplication>
#include <QGraphicsView>
#include <QPropertyAnimation>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    QGraphicsScene scene(-100, -100, 200, 200);
    QGraphicsView view(&scene);

    QGraphicsLineItem *item = scene.addLine(QLine(0, 100, 100, 0));
    item->setPen(QPen(Qt::red, 5));

    LineItem *lineItem = new LineItem(QLineF(QPointF(0, 0), QPointF(0, 100)));
    scene.addItem(lineItem);
    lineItem->setPen(QPen(Qt::green, 2));

    QPropertyAnimation *anim = new QPropertyAnimation(lineItem, "p2");
    anim->setStartValue(QPointF(0, 100));
    anim->setEndValue(QPointF(100, 0));
    anim->setDuration(2000);
    anim->start();

    view.resize(640, 480);
    view.show();
    return a.exec();
}

---

Another way is to use QVariantAnimation:

#include <QApplication>
#include <QGraphicsView>
#include <QPropertyAnimation>
#include <QGraphicsLineItem>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    QGraphicsScene scene(-100, -100, 200, 200);
    QGraphicsView view(&scene);

    scene.addLine(QLine(0, 100, 100, 0), QPen(Qt::green));

    QGraphicsLineItem *item = scene.addLine(QLine(0, 0, 0, 100));
    item->setPen(QPen(Qt::red, 5));

    QVariantAnimation * anim = new QVariantAnimation(&scene);
    anim->setStartValue(QPointF(0, 100));
    anim->setEndValue(QPointF(100, 0));
    anim->setDuration(2000);
    anim->start();

    QObject::connect(anim, &QVariantAnimation::valueChanged, [item](const QVariant & val){
        QLineF l = item->line();
        l.setP2(val.toPointF());
        item->setLine(l);
    });

    view.resize(640, 480);
    view.show();
    return a.exec();
}