Create a marquee animation with QGraphicsScene



  • 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();
    

    }
    @



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



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



  • 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";@



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



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



  • 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!



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



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



  • hmm , I test on Linux with gcc


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.