[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

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