Create a marquee animation with QGraphicsScene

[plitex]

Hi all,

I'm looking to create a marquee like the ones we could watch on TV, normally horizontal scrolls. What I'm having is a lot of flickering on the animation, and I would like to have other opinions because I'm a newbie on Qt Graphics.

If I resize the window, the animation stops, is there a way to avoid that? I don't know if there is a way to have a thread for the scene.

Here is the main code I'm using:

@
MainWindow::MainWindow(QWidget *parent) :
QMainWindow(parent),
ui(new Ui::MainWindow)
{
ui->setupUi(this);

QGraphicsScene *scene = new QGraphicsScene();
scene->setBackgroundBrush(Qt::black);

ui->graphicsView->setViewport(new QGLWidget(QGLFormat(QGL::SampleBuffers | QGL::DoubleBuffer)));
ui->graphicsView->setScene(scene);
ui->graphicsView->setSceneRect(0,0,960,230);

QGraphicsItemGroup *itemGroup = new QGraphicsItemGroup();
scene->addItem(itemGroup);

for (int i = 0; i < 50; i++)
{
    QGraphicsRectItem *item = new QGraphicsRectItem(0,0,300,230);
    itemGroup->addToGroup(item);
    item->setPos(item->boundingRect().width() * i, 0);
    item->setBrush(Qt::red);
}

QTimeLine *timer = new QTimeLine();
timer->setCurveShape(QTimeLine::LinearCurve);
timer->setUpdateInterval(16);
timer->setFrameRange(0, 500);
timer->setDuration(itemGroup->childItems().size() * 2000);

QGraphicsItemAnimation *animation = new QGraphicsItemAnimation;
animation->setItem(itemGroup);
animation->setTimeLine(timer);

animation->setPosAt(0.0, QPointF(0.0, 0.0));
animation->setPosAt(1.0, QPointF(-(itemGroup->childrenBoundingRect().width()), 0.0));

timer->start();

}
@

[bjanuario]

You should use QML for that, otherwise u will have always that problem ...

[plitex]

What's the difference? Why QML can do that and not from classic UI ?

[bjanuario]

Because classic UI uses timer. Timer is by far not the best option to do this. QML exactly to avoid this problem.
Here some example for Left to Right in QML:
@ if(_direction==LEFT){
out += " NumberAnimation on x {\n";
out += " loops: Animation.Infinite\n";
out += " to: -" + getObjectName() + ".width;\n";
out += " from: " + getObjectName() + ".parent.width;\n";
out += " duration: ("+getObjectName()+".width + " + getObjectName()+".parent.width)*15/"+QString::number(_scrollSpeed) +"\n";
out += " }\n";@

[plitex]

Is there a way to port my QGraphicItems to QML? or I have to write everything in a whole new way?

[bjanuario]

I dunno if is possible. I think the best way is to rewrite this way.

[plitex]

I tried to do a simple animation with Qt Quick, but I get also a lot of "jumps" on the animation. Here is the code I used:

@
import QtQuick 1.1

Rectangle {
id: window
width: 960
height: 360
color: "#000000"

states : State {
    name: "left"
    PropertyChanges { target: item1; x: -962 }
}

MouseArea {
    id: mouseArea
    onClicked: if (window.state == '') window.state = "left"; else window.state = ''
    anchors.fill: parent
    anchors.margins: -5 // Make MouseArea bigger than the rectangle, itself
}

transitions: Transition {
    NumberAnimation { properties: "x"; easing.type: Easing.Linear; duration: 4000 }
}

Item {
    id: item1
    x: 0
    y: 274
    width: 1923
    height: 86

    Item {
        id: pos1
        x: 0
        y: 0
        width: 960
        height: 86
        smooth: false
        clip: false

        Rectangle {
            id: rectangle3
            x: 0
            y: 0
            width: 960
            height: 41
            color: "#424242"
            radius: 5
            Text {
                id: text3
                x: 0
                y: 0
                width: 791
                height: 41
                color: "#ffffff"
                text: qsTr("Some Text")
                font.pixelSize: 40
                font.family: "Helvetica"
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
            }
        }

        Rectangle {
            id: rectangle4
            x: 0
            y: 45
            width: 960
            height: 41
            color: "#424242"
            radius: 5
            Text {
                id: text4
                x: 0
                y: 0
                width: 791
                height: 41
                color: "#ffffff"
                text: qsTr("Some Text")
                font.family: "Helvetica"
                font.pixelSize: 40
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
            }
        }
    }

    Item {
        id: pos2
        x: 962
        y: 0
        width: 959
        height: 86
        clip: false
        smooth: false

        Rectangle {
            id: rectangle7
            x: 0
            y: 0
            width: 960
            height: 41
            color: "#424242"
            radius: 5
            Text {
                id: text7
                x: 0
                y: 0
                width: 960
                height: 41
                color: "#ffffff"
                text: qsTr("Some other text")
                font.family: "Helvetica"
                font.pixelSize: 40
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
            }
        }

        Rectangle {
            id: rectangle8
            x: 0
            y: 45
            width: 960
            height: 41
            color: "#424242"
            radius: 5
            Text {
                id: text8
                x: 0
                y: 0
                width: 960
                height: 41
                color: "#ffffff"
                text: qsTr("Some other text")
                font.family: "Helvetica"
                font.pixelSize: 40
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
            }
        }
    }
}

}
@

Could be a problem with my system? I think is a really simple animation... But it looks very bad.

Thanks!

[bjanuario]

I tried it here and works fine, are u using virtual machine ?

[plitex]

No, I'm using Windows 7 & Qt 4.8.4 VS2010 Opensource with an 8 cores Intel I7.

[bjanuario]

hmm , I test on Linux with gcc