Animation on changing anchor property [Solved]

[luca]

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?

[zanes]

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}
}@

[luca]

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{
^
@

[luca]

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

[deimos]

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

[luca]

[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
      }
 }

@