Qt World Summit: Submit your Presentation

[Solved] Motion blur moving a rectangle

  • Hello:

    I'm trying to add some motion blur to the movement of a rectangle.

    Mi rectangle is this one:

    @ Rectangle{
    color: "red"
    height: 20
    width: height
    radius: height/2
    x: myPlayer.playpoint.x
    y: myPlayer.playpoint.y

    where 'x' and 'y' are given by C++ side as Q_PROPERTY.
    As you can see, I only wanna make better transitions between diferent positions.

    I tryed painting this rectangle in diferentes positions with a QQuickPaintedItem and the result is more or less the same.
    Have you got any better idea?


    How can I make this movement looks better?

  • Use Behavior

    import QtQuick 2.0

    Rectangle {
    id: screen
    width: 1000
    height: 100
    color: "black"

    // myPlayer.playpoint.x
    property int pointX: 0
    Timer {
        running: true
        interval: 1000
        repeat: true
        onTriggered: if (pointX < 100) {pointX += 10} else pointX = 0
    Rectangle {
        radius: 10
        width: radius * 2; height: radius * 2
        x: pointX / 100 * parent.width
        anchors.verticalCenter: parent.verticalCenter
        color: "red"
        Behavior on x {
            enabled: true // Play with it
            NumberAnimation { duration: 1000 }


  • Thank you for your help. But isn't what I'm trying to do.

    My rectangle already is moving at the time I want and the positions I want.
    What I'm trying to do is a tail, as a comet, with diferent positions changes, 'x' and 'y' together, not only one.

    I could do with QQuickPaintedItem something like this. My rectangle with a tail. But I'm looking for the easiest way to do it.

  • Hey,

    please take a look at this example: "MotionBlur":https://github.com/capisce/motionblur/blob/master/Blur.qml

  • Thanks for you help onek24.

    Very complicated for my skills. I'm looking the whole example. The file you pointed needs other parts and I don't understand most of code.
    I need to know more about Qt, and graphics programing.

    I'll look for another easy solution.
    Thank you.

  • I would say that the example is a good way of doing this, but yes, it is complicated at the beginning. You'll find the full example here: "MotionBlur Project":https://github.com/capisce/motionblur .

    Due to the fact that it is too complicated i would recommend you to take a look at "QtGraphicalEffects":http://qt-project.org/doc/qt-5.0/qtgraphicaleffects/graphicaleffects.html#motion-blur . A "DirectionalBlur ":http://qt-project.org/doc/qt-5.0/qtgraphicaleffects/qml-qtgraphicaleffects1-directionalblur.html would probably be the solution you are searching. It looks really simple and good-looking. I would go for it!

  • Yes, really complicated. I#ve got so much to learn...

    With DirectionalBlur I think can make something. I'll give a try.


  • You're welcome. Glad i could help you.
    I'm also interested in the DirectionalBlur but i don't have too much time this days. Would you mind posting if it worked good, please? i would appreciate it.

  • Hi onek24.

    I try the directional blur. It's great!
    In my case, moving a rounded rectangle, with no image inside. The effect is low. But great improvement. Gives a better movement sensation.

    Some details:
    1- Because is a rounded rectangle. By default the blured area is defined by this rectangle, so I marked "transparentBorder = true". And play with the length of the blur.
    2- I'm giving a direction, with each new position, to make the directionalBlur goes in the same way as the movement.

    Thanks for your help.

Log in to reply