The more I tinker with my code the more odd behaviors I encounter.



  • I made a post a while ago about SpringAnimation not behaving as one would expect it should.

    I have continued playing with that code adding stuff ant tinkering with settings. Currently it looks like this:

    import QtQuick 2.2
    import QtGraphicalEffects 1.0
    
    Item {
        property bool wasDragged: false
        property real epsilon: 0.001
        property int itemSize: 80; // The height of an item, including padding.
        property int stickiness: 20; // How "sticky" an item is as you start to track left.
        property bool overdamp: true; // How "sticky" an item is as you start to track left.    
        property real basePosX: (menuButton.width / 2) - (menuButtonIcon.width / 2) //menuButton.horizontalCenter
        property real basePosY: (menuButton.height / 2) - (menuButtonIcon.height / 2) //menuButton.verticalCenter
    
        id: menuButton
        x: parent.width - 55
        y: parent.height - 60
        state: "Closed"
    
        Rectangle {
            id: menuBackColor
            anchors.centerIn: parent
            color: "black"
            width: 40;
            height: 40;
            radius: width * 0.5
            antialiasing: true
            opacity: 0
        }
    
        Text{
            id: menuButtonLabel
            text: "Cancel"
            x: basePosX + 2
            y: basePosY + 20
            color: "white"
            font.family: "Roboto-Regular"
            font.pixelSize: 18
            opacity: menuButton.state === "Open" ? 100 : BaseFunctions.clamp(1 + (menuButtonIcon.x - x - 70) / 50, 0, 100)
            //opacity: BaseFunctions.clamp(1 + (menuButtonIcon.x - x - 70) / 50, 0, 100)
        }
    
        Rectangle {
            id: menuButtonIcon
            //anchors.centerIn: parent
            x: basePosX
            y: basePosY
            color: "#D23F31" // Qt.lighter("#C02A25", 1.25)
            width: 65;
            height: 65;
            radius: width * 0.5
            antialiasing: true
            smooth: true
            visible: false;
        }
    
        DropShadow {
            id: menuButtonIconShadow
            source: menuButtonIcon
            anchors.fill: source
            width: source.width
            height: source.height
            cached: true
            radius: 8.0
            samples: 16
            color: "#60000000"
            smooth: true
            horizontalOffset: 0.0
            verticalOffset: 0.0
            spread: 0.2
            transparentBorder: true
        }
    
        Rectangle {
            id: menuButtonIconBar1
            anchors.centerIn: menuButtonIcon
            width: 17
            height: 3
            antialiasing: true
        }
    
        Rectangle {
            id: menuButtonIconBar2
            anchors.centerIn: menuButtonIcon
            width: 17
            height: 3
            antialiasing: true
            rotation: 90
        }
    
        MouseArea {
            id: mouseArea
            anchors.fill: menuButtonIconShadow
            onPressed: menuButton.state = menuButton.state === "Open" ? "Closed" : "Open"
            //onClicked: menuButton.state = menuButton.state === "Open" ? "Closed" : "Open"
    
            onReleased: {
                if (wasDragged) {
                    wasDragged = false
                    menuButton.state = "Closed"
                    onClicked: console.log("Closed")
                }
            }
    
            onPositionChanged:
            {
                onClicked: console.log(menuButtonIcon.x)
                wasDragged = true
                var currentPosition = mapToItem(parent, mouse.x, mouse.y)
                var newMouseX = currentPosition.x
                var newMouseY = currentPosition.y
                updateButtonPosition(newMouseX, newMouseY)
            }
        }
    
        function updateButtonPosition(mouseX, mouseY)
        {
            menuButtonIcon.x = mouseX - (menuButtonIcon.width / 2);
            menuButtonIcon.y = mouseY - (menuButtonIcon.height / 2);
        }
    
        states: [
            State {
                name: "Closed"
                PropertyChanges { target: menuButtonIcon; x: basePosX; y: basePosY}
            },
            State {
                name: "Open"
                PropertyChanges { target: menuButtonIcon; x: basePosX; y: basePosY}
                PropertyChanges { target: menuButtonIconBar1; rotation: 135; scale: 0.85}
                PropertyChanges { target: menuButtonIconBar2; rotation: 225; scale: 0.85}
                PropertyChanges { target: menuButtonIconShadow; scale: 0.85}
                PropertyChanges { target: menuButtonLabel; x: parent.width - 120}
                PropertyChanges { target: menuBackColor; scale: 118}
                PropertyChanges { target: menuBackColor; opacity: .65}
            }
        ]
    
        transitions: [
            Transition {
                //RotationAnimation { target: menuButtonIconBar1; properties: "rotation"; duration: 400; easing.type: Easing.InOutQuad }
                //PropertyAnimation { target: menuButtonIconBar2; properties: "rotation"; duration: 400; easing.type: Easing.InOutQuad }
                //PropertyAnimation { target: menuButtonIconShadow; properties: "scale"; duration: 400; easing.type: Easing.InOutQuad }
                SpringAnimation { target: menuButtonIcon; properties: "x, y"; spring: 3; damping: 0.25; epsilon: 0.2; mass: 1; modulus: 0; velocity: 0 }
                SpringAnimation { target: menuButtonIconShadow; properties: "scale"; spring: 3; damping: 0.25; epsilon: 0.2; mass: 1; modulus: 0; velocity: 0 }
                SpringAnimation { target: menuButtonIconBar1; properties: "rotation, scale"; spring: 3; damping: 0.25; epsilon: 0.5; mass: 1; modulus: 0; velocity: 0 }
                SpringAnimation { target: menuButtonIconBar2; properties: "rotation, scale"; spring: 3; damping: 0.25; epsilon: 0.5; mass: 1; modulus: 0; velocity: 0 }
                SpringAnimation { target: menuButtonLabel; properties: "x"; spring: 3; damping: 0.25; epsilon: 0.5; mass: 1; modulus: 0; velocity: 0 }
                PropertyAnimation { target: menuBackColor; properties: "scale"; duration: 400; easing.type: Easing.InOutQuad }
                PropertyAnimation { target: menuBackColor; properties: "opacity"; duration: 200; easing.type: Easing.InOutCirc }
            }
        ]
    }
    

    It can be simply called from your main **qml **file like this:

    import QtQuick 2.0
    
    Item {
        id: menuButton
        width: 300
        height: 400
    
        Image {
            source: "images/Background.jpg"
        }
    
        MenuButton {
            id: baseButton/*
            width:150
            height: 150
            */
        }
    }
    

    What I was expecting is for someone to be able to drag the button and if released it will return to its original position following some easing function.

    That is not the case though. Just quickly move the button at a certain position and hold still, the button will return to its original position even though you never released it.

    This I believe should not be happening and to me at least it makes no sense.

    Do you have any idea on where the problem lies?

    EDIT:
    The reason why this happens is because the rotation animation has not yet finished wile you move the button. If you wait for the animation to finish, and then move the button then everything is fine. I do not yet know what is the best way of fixing this though.



  • I was thinking about reporting this as a bug, but I am not sure. Here is a gif displaying the problem.

    I am mostly sure that this is a bug, because I tried with two different methods, including making the item draggable. Is it ok if I simply report it anyway?


Log in to reply
 

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