Parent and Anchor Animations done well



  • 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.


Log in to reply
 

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