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

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

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:
http://www.symbolchart.com/step1.png
...
-Step n:
http://www.symbolchart.com/step2.png
...
-Final step:
http://www.symbolchart.com/step3.png

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


Only changing the showing property to show or hide.

Thank you very much!!