Animation on changing anchor property [Solved]



  • Hi all,
    I have this situation:
    @
    Rectangle {

    id: window
    width: 800
    height: 600
    
    property string statoattuale: "statologin"
    
    FrecciaSx {
        id: frecciasx
        anchors {
            left: window.left
            verticalCenter: window.verticalCenter
        }
    }
    
    FrecciaDx {
        id: frecciadx
        anchors {
            right: window.right
            verticalCenter: window.verticalCenter
        }
    }
    
    PagePanel {
        id: panelpage
        state: statoattuale
        anchors {
            //left: window.left
            leftMargin: frecciasx.width
            //right: window.right
            rightMargin: frecciadx.width
            //top: window.top
            //bottom: window.bottom
            fill: window
    
        }
    }
    

    }
    @

    Now I'd like to hide in some situations the items FrecciaSx and FrecciaDx behind the PagePanel.
    To do that I'm trying with:
    @
    states: [
    State {
    name: "statologin"

            PropertyChanges {
                target: frecciasx
                anchors.left: panelpage.left
                restoreEntryValues: true
            }
            PropertyChanges {
                target: frecciadx
                anchors.right: panelpage.right
                restoreEntryValues: true
            }
        }
    ]
    

    @

    It works but I don't know how to animate the movements when hiding the two items.

    Is there a solution?



  • you can try

    @transitions:
    Transition{
    from:*
    to:"statologin"
    NumberAnimation{target: frecciadx;duration:100;easing.type:Easing.outExpo}
    }
    @
    and i guess, Behavior should also work on anchors
    Add the following to frecciadx and frecciasx
    @Behaviour on anchors{
    NumberAnimation{easing.type:Easing.OutExpo;duration:1000}
    }@



  • Thanks but the solutions doesn't seems to works.

    The first one do nothing without warning or error messages.

    With the second one my application stops and I get this message:
    @
    Invalid property assignment: "anchors" is a read-only property
    Behavior on anchors{
    ^
    @



  • I know I should position the FrecciaSx and FrecciaDx and set their x propery to move behind the PagePanel but I'd like to position the items with anchor property because I want keep scaling when moving main windows dimensions...



  • you must use AnchorChanges in states and AnchorAnimation to animate the changes in transitions



  • [quote author="deimos" date="1322998581"]you must use AnchorChanges in states and AnchorAnimation to animate the changes in transitions[/quote]

    Thanks deimos, it works!

    This is the code I used:
    @
    states: [
    State {
    name: "statologin"

            AnchorChanges {
                target: frecciasx
                anchors.left: panelpage.left
            }
            AnchorChanges {
                target: frecciadx
                anchors.right: panelpage.right
            }
        },
        State {
            name: "statoriepilogo"
        }
    ]
    
    transitions:
       Transition{
          AnchorAnimation{
          duration:1000
          }
     }
    

    @


Log in to reply
 

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