Animating anchors.bottom change



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



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



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



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


Log in to reply
 

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