[SOLVED] Object rotating twice on Transition

valorcurse

Hi,

I've been having problems with animating an object's rotation.
I have a component which has a State with a rotation change using a random value inside a PropertyChange and whenever I try to use a transition to animate the rotation, it somehow applies two values to the rotation: one before the animation starts and one after. This is annoying because when the animation finishes for the first rotation values, it "jerks" to the value of the second rotation value.

I recreated the problem "here.":https://gist.github.com/valorcurse/f688baf5e6dcfd714e69

Any idea what I'm doing wrong?

p3c0

Hi,

I suspect mouse.pressed is causing the problem. Use onClicked handler in MouseArea and there change the state.

valorcurse

I'm afraid it still sets the rotation value twice.
I updated "it.":https://gist.github.com/valorcurse/f688baf5e6dcfd714e69

p3c0

Remove the when binding

valorcurse

I believe I did, it's commented out. "I deleted the comment just to be sure.":https://gist.github.com/valorcurse/f688baf5e6dcfd714e69

Any other idea about what might be the problem?

p3c0

"this":http://qt-project.org/doc/qt-5/qml-qtquick-propertychanges.html#explicit-prop should help you.

valorcurse

That's exactly it, works perfectly now. Thank you.

I added the code below in case someone has the same problem:

@import QtQuick 2.2
import QtQuick.Window 2.1

Window {
visible: true
width: 360
height: 360

MouseArea {
    id: mouseArea
    anchors.fill: parent
    onClicked: {
        rect.state = rect.state === "clicked" ? "" : "clicked";
    }
}

Rectangle {
    id: rect
    width: 50
    height: 50
    color: "blue"
    anchors.centerIn: parent

    function getRandom() {
        var rand = Math.floor(Math.random() * 360) + 1;

        console.log("Random: " + rand);

        return rand;
    }

    states: [
        State {
            name: "clicked"

            PropertyChanges {
                target: rect
                explicit: true
                rotation: getRandom()
            }
        }
    ]

    transitions: Transition {
        to: "clicked"

        RotationAnimation {
            target: rect
            duration: 500
        }
    }
}

}
@