Animating anchors.bottom change

h3nk3

Hi,

I would like to animate when I change anchors.bottom. Like this:

@Rectangle
{
color: "#444444"
objectName: "view"

TextInput {
    id: firstEdit
    font.family: "Lato Black"
    font.pixelSize: 26
    anchors.left: parent.left
    anchors.leftMargin: 30
    anchors.right: parent.right
    anchors.rightMargin: 30
    anchors.bottom: firstButton.top
    anchors.bottomMargin: 30
    text: qsTr("input")
}

TextInput {
    id: secondEdit
    opacity: 0
    font.family: "Lato Black"
    font.pixelSize: 26
    anchors.left: parent.left
    anchors.leftMargin: 30
    anchors.right: parent.right
    anchors.rightMargin: 30
    anchors.bottom: firstButton.top
    anchors.bottomMargin: 30
    text: "Peekaboo!"
}

Button {
    id: firstButton
    text: qsTr("Login")
    anchors.left: parent.left
    anchors.leftMargin: 30
    anchors.right: parent.right
    anchors.rightMargin: 30
    anchors.bottom: parent.bottom
    anchors.bottomMargin: 30
    onClicked: login();
}

property variant showAnimation :
        ParallelAnimation {
    NumberAnimation { target: secondEdit; property: "opacity"; to: 1; duration: 1000; }
    NumberAnimation { target: firstEdit; property: "bottom"; to: secondEdit.top; duration: 1000 }

}

function onStartAnimation()
{
    showAnimation.start();
    secondEdit.focus = true;
}@

But the anchors animation does not happen. Only the Opacity animation. What am I missing?

andre

-I noticed the same. You can achieve the animation if you don't use anchor but use x and y directly. I guess te problem is that your induvidual anchors are not really properties, so they can not be animated.-

The above is nonsense, as per the excellent reply below. Use AnchorAnimation.

Kxyu

@NumberAnimation { target: firstEdit; property: "bottom"; to: secondEdit.top; duration: 1000 }@

You know, that string does not have any sense. What do you expect to happen? This should make firstEdit.bottom=secondEdit.top smoothly in 1 second. But: 1) firstEdit.bottom is read-only 2) it's not a number
So, to animate anchors change use AnchorAnimation.

h3nk3

Thanks for the tip about AnchorAnimation. Will try that and from the looks of the documentation it's exactly what I want.