沿 QPainterPath 动画椭圆

Question

我有一堆椭圆，它们最初排列在一条路径的顶部，应该沿着 QPainterPath 移动。我让它为第一个椭圆工作，但我不知道如何为其他椭圆找到正确的位置。

有没有办法检查它是否经过了路径的终点并将其移回起点？

class Animation : public QAbstractAnimation
{
  public:
    Animation(const QPainterPath& path, QObject *parent = Q_NULLPTR);
    virtual void updateCurrentTime(int ms) override;
    virtual int duration() const override;
    QPainterPath mPath;
    QVector<EllipseGraphicsItem*> mAnimationElements;
};


Animation::Animation (const QPainterPath& path, QObject *parent) : QAbstractAnimation(parent)
, mPath(path)
{
    qreal pos = 0;
    qreal length = mPath.length();
    while (pos < length)
    {
        qreal percent = path.percentAtLength(pos);
        QPointF pointAtPercent = path.pointAtPercent(percent);
        pos += 40;
        EllipseGraphicsItem * item = new EllipseGraphicsItem(parentItem());
        mAnimationElements.append(item);
        item->setPos(pointAtPercent);
    }
}

void Animation::updateCurrentTime(int ms)
{
     QPointF point = mPath.pointAtPercent(qreal(ms) / 6000);

     if (mAnimationElements.size() > 0)
          mAnimationElements[0]->setPos(point);

     for (int i = 0; i < mAnimationElements.size(); i++) {
         // how to update each circle's position?
     }
}

开始动画：

QPainterPath path;
path.moveTo(10, 10);
path.lineTo(QPointF(500, 10));
path.lineTo(QPointF(500, 700));
path.lineTo(QPointF(10, 700));
Animation *animation = new Animation(path, this);
animation->setLoopCount(-1);
animation->start();

Answer 1

恕我直言，使用 QGraphicsObject 和 QPropertyAnimation 会更容易：

使用在 0 和路径长度之间变化的属性并通过根据元素的值和它们在列表中的位置计算它们的位置来放置元素。

一个简单的例子：

class AnimatedEllipses: public QGraphicsObject
{
    Q_OBJECT
    Q_PROPERTY(int progress READ progress WRITE setProgress)
private:
    QGraphicsPathItem path;
    QList<QGraphicsEllipseItem*> ellipses;
    int propProgress;
public:
    int progress() const { return propProgress;}
    void setProgress(int value)
    {
        propProgress = value;
        int index = 0;
        for (QGraphicsEllipseItem* ellipse: ellipses)
        {
            // Keep value between 0 and length.
            int lgt = (propProgress + index * 40) % int(path.path().length());
            qreal percent = path.path().percentAtLength(lgt);
            ++index;
            ellipse->setPos(path.path().pointAtPercent(percent));
        }
    }
    AnimatedEllipses(QPainterPath const& path): QGraphicsObject(), path(path), propProgress(0)
    {
        qreal pos = 0;
        qreal length = path.length();
        while (pos < length)
        {
            qreal percent = path.percentAtLength(pos);
            QPointF pointAtPercent = path.pointAtPercent(percent);
            pos += 40;
            QGraphicsEllipseItem * item = new QGraphicsEllipseItem(-10, -10, 20, 20, this);
            item->setPos(pointAtPercent);
            ellipses << item;
        }

        QPropertyAnimation* animation = new QPropertyAnimation(this, "progress");
        animation->setStartValue(0);
        animation->setEndValue(length);
        animation->setDuration(10000);
        animation->setLoopCount(-1);
        animation->start();
    }



    // QGraphicsItem interface
public:
    QRectF boundingRect() const { return path.boundingRect();}
    void paint(QPainter* painter, const QStyleOptionGraphicsItem* option, QWidget* widget){}
};

模数允许您为每个椭圆创建无限循环。

沿 QPainterPath 动画椭圆

Animate ellipses along QPainterPath

animation

qt

qgraphicsitem

qpainterpath