[Solved] Motion blur moving a rectangle

osfesa

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?

Thanks.

How can I make this movement looks better?

podsvirov

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 }
    }
}

}
@

osfesa

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.

onek24

Hey,

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

osfesa

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.

onek24

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!

osfesa

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

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

Thanks.

onek24

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.

osfesa

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.