Qt沿圆圈动画椭圆

Question

我是Qt的新手，我很困惑如何使用QGraphicsScene。如果我将10个椭圆添加到场景中并沿路径设置动画，我该怎么做？它变得更加复杂，因为如果我沿着椭圆绘制了10个椭圆，我想要为这些椭圆设置动画，使它们远离它们所在的椭圆的中心。在图片中，您可以看到省略号。这些是用QPainter绘制的我还没弄明白如何将它们添加到场景中，但我希望灰色椭圆在内圈和外圈之间移动。我已经通过了一些例子，但不能真正适应我的情况。

用于使用QPainter绘制省略号的代码：

QPainter drElps;
drElps.setBrush(QBrush(QColor(0xaf, 0xaf, 0xaa)));
drElps.setPen(QPen(QColor(0xaf, 0xaf, 0xaa), 2));
double nrElps = 30;
int degree = (int)(360./nrElps);
painter.translate(QPointF(big_elps_circle_center));
while(--nrElps){
 painter.drawEllipse(0, -60, 3, 3);
 painter.rotate(degree);
}
painter.translate(QPOintF(back_to_origin));

Answer 1

Qt有一组面向动画的类，为此你必须首先创建一个继承自QGraphicsObject的对象，在这个类中你必须实现方法paint和boundingRect。

ellipseobject.h

#ifndef ELLIPSEOBJECT_H
#define ELLIPSEOBJECT_H

#include <QGraphicsObject>

class EllipseObject : public QGraphicsObject
{
    Q_OBJECT
public:
    EllipseObject(QGraphicsItem * parent = 0);

    void paint(QPainter * painter, const QStyleOptionGraphicsItem * option, QWidget * widget = 0);
    QRectF boundingRect() const;
};

#endif // ELLIPSEOBJECT_H

ellipseobject.cpp

#include "ellipseobject.h"

#include <QPainter>

EllipseObject::EllipseObject(QGraphicsItem *parent):QGraphicsObject(parent)
{

}

void EllipseObject::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget)
{
    Q_UNUSED(option)
    Q_UNUSED(widget)
    painter->setRenderHint(QPainter::Antialiasing);
    painter->setPen(QColor(0xaf, 0xaf, 0xaa));
    painter->setBrush(QBrush(QColor(0xaf, 0xaf, 0xaa)));
    QRectF rect = boundingRect();
    painter->drawEllipse(rect);
}

QRectF EllipseObject::boundingRect() const
{
    return QRectF(-4, -4, 8, 8);
}

然后我们可以使用QPropertyAnimation类，用这个我们将动画的位置。

EllipseObject *item = new EllipseObject;
QPropertyAnimation *animation = new QPropertyAnimation(item, "pos");
for(int j = 0; j < p; j++){
    animation->setKeyValueAt( 1.0*j/(p-1),
                               (r+ delta*sin(2*M_PI*j/p) )*QPointF(qSin(2*M_PI*i/number_of_items), qCos(2*M_PI*i/number_of_items)));
}
animation->setDuration(2000);

由于我们有几个并行动画的元素，我们可以使用QParallelAnimationGroup来处理每个动画。

group = new QParallelAnimationGroup(this);
[...]
group->addAnimation(animation);

如果我们想要连续，我们可以制作以下代码。

group->start();
connect(group, &QParallelAnimationGroup::finished,[=](){
    group->start();
});

完整的代码是here。

Answer 2

如果你用QPainter绘制它们，那么你就在你的身上。 QGraphivsScene的要点是从QGraphicsItem继承，绘制你需要在paintEvent上绘制的内容，将它们添加到场景中。

你在paintEvent上绘制了超过1个项目 - 所以你是独立的 - 而且QGraphicsScene无法帮助你。

现在，如何正确地做到这一点：

• 继承自QGraphicsScene或QGraphivsView
• 继承自QGraphicsEllipseItem并创建MovableEllipseItem
• 在MovableEllipseItem构造函数中，创建一个QTimer，将它的timeout（）信号与您将定义的移动槽连接起来

在移动槽上，对椭圆的位置进行计算并移动（x，y）它。

Answer 3

您可以使用自定义图形项，QGraphicsScene::advance机制以及QTimeLine来控制动画。

大纲是这样的：

QGraphicsScene *sc = new QGraphicsScene;
QTimeLine *tl = new QTimeLine(1000);
tl->setFrameRange(-20, 20);
connect(tl, &QTimeLine::frameChanged, sc, &QGraphicsScene::advance);
connect(tl, &QTimeLine::finished, tl, &QTimeLine::toggleDirection);
connect(tl, &QTimeLine::finished, tl, &QTimeLine::start);

for (int i = 0; i < 30; ++i) {
    sc->addItem(new AnimItem(360./30*i, tl));
}

在自定义AnimItem中，您实现绘图/动画逻辑。一个很好的基础是QGraphicsEllipseItem。例如：

AnimItem::AnimItem(qreal angle, QTimeLine *timer, QGraphicsItem *parent)
    : QGraphicsEllipseItem(0, 0, 3, 3, parent),
      m_timer(timer)
{
    QTransform t;
    t.rotate(angle);
    t.translate(0, -120);
    setTransform(t);
    setBrush(QBrush(QColor(0xaf, 0xaf, 0xaa)));
}

void AnimItem::advance(int phase)
{
    if (phase == 1) {
        QTransform t = transform();
        t.translate(0, m_timer->currentFrame()/5);
        setTransform(t);
    }
}