Hi,
I’ve been working on dragging and dropping rectangles onto each other using drop areas and mouse areas, both containg rectangles (got to have something nice to look at). When one of them is dropped I want it to animate nicely to its new home (what it’s dropped on) or back to where it started.
From the docs and examples I get that I need to do some reparenting and changing of anchors. And to use parent and anchor animations for the transitions. I got it working to a point but I get some flickering back and fourth during the animation. When I “pick up” a rectangle and move it, it flickers like it doesn’t know if it should be in its original place or under my mouse. This flickering lasts as long as I’ve defined the animation.
My guess would be that it’s something to do with the interpolation going on to animate.
Here is a simplified bit of code:
import QtQuick 2.3
Rectangle {
id: root
width: 360
height: 360
DropArea{
x: 0
id: dropArea
width: 100
height: 100
Rectangle{
id: dropRectangle
height: 100
width: 100
color: 'dimgray'
}
}
MouseArea{
id: mouseArea
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
drag.target: tile
enabled: true
height: 100
width: 100
onReleased: parent = tile.Drag.target !== null ? tile.Drag.target : root;
Rectangle{
id: tile
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
height: 100
width:100
color: 'indigo'
Drag.active: mouseArea.drag.active
Drag.hotSpot.x: width/2
Drag.hotSpot.y: height/2
states: [State {
name: 'dragging'
when: {mouseArea.drag.active}
ParentChange { target: tile; parent: root}
AnchorChanges { target: tile; anchors.verticalCenter: undefined; anchors.horizontalCenter: undefined }
}
]
transitions: [
Transition {
ParentAnimation {
AnchorAnimation{duration: 100}
}
}
]
}
}
}
To show I’ve been trying, I have come up with a solution involving extra states and transitions:
states: [State {
name: 'dragging'
when: {mouseArea.drag.active}
ParentChange { target: tile; parent: root}
AnchorChanges { target: tile; anchors.verticalCenter: undefined; anchors.horizontalCenter: undefined }
},
State{
name: 'home'
when: parent == root
AnchorChanges { target: tile; anchors.verticalCenter: parent.verticalCenter; anchors.horizontalCenter: parent.horizontalCenter }
},
State{
name: 'dropped'
when: parent !== row && parent !== root
AnchorChanges { target: tile; anchors.verticalCenter: parent.verticalCenter; anchors.horizontalCenter: parent.horizontalCenter }
}
]
transitions: [
Transition {
from: 'home'
to: 'dragging'
ParentAnimation {
AnchorAnimation{duration: 1}
}
},
Transition{
from: 'dropped'
to: 'dragging'
ParentAnimation {
AnchorAnimation{duration: 1}
}
},
Transition{
from: 'dragging'
to: '*'
ParentAnimation {
AnchorAnimation{duration: 100}
}
}
]
This does work but doesn’t seem like a very elegant solution. And clearly I don’t really understand what’s going on with the parent and anchor animations. The drag and drop example doesn’t use any fancy transitions, it just has the items instantaneously move. The ParentAnimation doc gives an example using NumberAnimation on x and y but I don’t think that’s appropriate here because of the anchors.
So my question is, is there a proper/better way of doing this?
I hope I’ve explained this well enough. If not I’ll happily try again.
↧