CODEWITHSUNDEEP
qtqmlqtquick2qt-quick
Alberto Jiménez
Alberto Jiménez

Reputation: 401

PropertyAction doesn't work with an "AnchorChanges" element

This is a test showing my problem:

Window {
visible: true;width: 360;height: 360

MouseArea{
    anchors.fill: parent
    onClicked: container.state = (container.state=="estado1"?"estado2":"estado1")
}

Rectangle {
    id: container
    anchors.fill: parent
    color: "red"
    state: "estado1"
    onStateChanged:console.log("state -> "+state)

    Rectangle {
        id: prueba
        anchors.left: parent.left
        height: 100
        color: "blue"
        onWidthChanged:console.log("width -> "+width)
        onHeightChanged:console.log("height -> "+height)
        onOpacityChanged:console.log("opacity -> "+opacity)
        onYChanged: console.log("coordY -> "+y)

    }
    states: [
        State {
            name: "estado1"
            PropertyChanges {
                target: prueba
                width: 300
                opacity: 1
            }
            AnchorChanges {
                target: prueba
                anchors.bottom: container.bottom
            }
        },
        State {
            name: "estado2"
            PropertyChanges {
                target: prueba
                width: 50
                opacity: 0.5
            }
            AnchorChanges {
                target: prueba
                anchors.top: container.top
            }
        }
    ]
    transitions:[
        Transition {
            ParallelAnimation {
                PropertyAnimation {
                    target: prueba
                    properties: "width"
                    duration: 3000
                }
                PropertyAction {
                    target: prueba
                    property: "opacity"
                }
                /*PropertyAction {
                    target: prueba
                    property: "anchors.top" //doesn't work
                    //property: "anchors" //doesn't work neither
                }*/
                AnchorAnimation {
                    //works, but doesn't seem to be the most
                    //elegant solution to the problem
                    duration: 0
                }
            }
        }
    ]
}
}

Here, you can see an item with two States, changing several properties with PropertyChanges, and also an AnchorChanges. Also, a Transition is defined to control the state change. In that transition, the width property is animated with a PropertyChanges element, and the opacity is changed at the beginning of the transition without animations, with a PropertyAction.

The problem is that i would like to change also the anchor without animations. But, if i try to use a PropertyAction, it doesn't work. I can use an animation with duration 0, but i don't think this is the correct approach. Is there any problem with the syntax, or maybe another approach must be used?

Upvotes: 3

Views: 612

Answers (1)

Filip Hazubski
Filip Hazubski

Reputation: 1728

I asked Qt support and here is what they say:

The reason this is happening is because the anchor is being dealt with differently and not as a property animation. What you need to do is use the AnchorAnimation instead and set a duration for it so that it does the move at the rate you want. If you want the anchor change to have an effect right away then you can do:

AnchorAnimation { 
    duration: 1  
}

and it will instantly move first before the rest of the animation takes place.

The answer is: your approach is correct. There is no simple way to omit using AnchorAnimation.

Upvotes: 3

Related Questions