How animate a message that appears on bottom?

[lqsa]

I'm showing a message on the bottom:

Msg.qml

import QtQuick 2.4
 
Item {
    property alias text: mf.text
    anchors.fill: parent
    antialiasing: false
    opacity: 0.9
    z: 100
 
    MsgForm {
        id: mf
        width: parent.width
        y: parent.height - height - 5
    }
}

import QtQuick 2.4

Item {
    property alias text: mf.text
    anchors.fill: parent
    antialiasing: false
    opacity: 0.9
    z: 100

    MsgForm {
        id: mf
        width: parent.width
        y: parent.height - height - 5
    }
}

To copy to clipboard, switch view to plain text mode 

MsgForm.ui.qml

import QtQuick 2.4
 
Item {
    property alias text: msg.text
 
    width: 200
 
    id: message
    height: msg.height+10
 
    Rectangle {
        id: rectangle
        color: "#fb9191"
        anchors.fill: parent
        border.color: "#fd6666"
        border.width: 2
 
        Text {
            id: msg
            anchors.top: parent.top
            anchors.topMargin: 2
            textFormat: Text.PlainText
            anchors.right: parent.right
            anchors.rightMargin: 4
            anchors.left: parent.left
            anchors.leftMargin: 4
            wrapMode: Text.WordWrap
            clip: false
            font.bold: true
            font.pointSize: 12
            font.family: "Tahoma"
        }
    }
}

import QtQuick 2.4

Item {
    property alias text: msg.text

    width: 200

    id: message
    height: msg.height+10

    Rectangle {
        id: rectangle
        color: "#fb9191"
        anchors.fill: parent
        border.color: "#fd6666"
        border.width: 2

        Text {
            id: msg
            anchors.top: parent.top
            anchors.topMargin: 2
            textFormat: Text.PlainText
            anchors.right: parent.right
            anchors.rightMargin: 4
            anchors.left: parent.left
            anchors.leftMargin: 4
            wrapMode: Text.WordWrap
            clip: false
            font.bold: true
            font.pointSize: 12
            font.family: "Tahoma"
        }
    }
}

To copy to clipboard, switch view to plain text mode 

How can animate the form to appears from bottom smoothly?

[anda_skoa]

How can animate the form to appears from bottom smoothly?

I am afraid I don't understand what you mean with "appear from bottom".
Can you describe the visual effect you want to achieve?

Cheers,
_

[lqsa]

Please, see these images:

- Step 1:

...
-Step n:

...
-Final step:


I hope it serves as an example.

Cheers.

[anda_skoa]

Well, that depends on how you position the element, e.g whether you are using anchors or y-values for vertical positioning.

In both cases you probably want a local numerical property that you animate and then use that property to bind to either an anchor margin or the y property expression.

If I assume that MsgForm is the element, then it is the latter. Instead of the (- height - 5) part you use the new property, which you start at 0 and then animate to (-height - 5)

Cheers,
_

[lqsa]

It works!

MsgForm {
        property bool showing: false
        property int position: showing ? height : 0
        width: parent.width
        y: parent.height - position
        Behavior on position {
            NumberAnimation {duration: 500}
        }
}

MsgForm {
        property bool showing: false
        property int position: showing ? height : 0
        width: parent.width
        y: parent.height - position
        Behavior on position {
            NumberAnimation {duration: 500}
        }
}

To copy to clipboard, switch view to plain text mode 

Only changing the showing property to show or hide.

Thank you very much!!