The more I tinker with my code the more odd behaviors I encounter.
-
I made a post a while ago about
SpringAnimationnot 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?
