如何为底部显示的消息设置动画？

Posted 2023-02-16

【中文标题】如何为底部显示的消息设置动画？

【英文标题】：How to animate a message that appears on bottom?

【发布时间】：2015-07-26 14:48:30

【问题描述】：

我在底部显示一条消息：

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"
        
    

如何使表单从底部平滑显示？ 动画结束后，如果窗口调整大小，消息必须始终位于底部。

【参考方案1】：

您可以使用anchors.bottomMargin 属性从底部提升消息项。

import QtQuick 2.4

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

    MsgForm 
        id: mf
        property bool showing: false

        width: parent.width
        anchors
            bottom: parent.bottom
            bottomMargin: mf.showing ? 0 : -mf.height
            Behavior on bottomMargin
                NumberAnimation  
            
        
    

【讨论】：

它不起作用。该消息出现在最后一个位置并位于底部。好像QML初始化boottomMargin为0，初始化bottomMargin为-mf.height的时候，然后动画。

【参考方案2】：

谢谢大家。最后，我按照qtcentre forum 中收到的建议解决了这个问题。

通过定义用于绑定到anchors.XXXXmargin 或y 属性表达式的本地数字属性，可以轻松实现所需的效果。

按照这种方法，可能的解决方案如下：

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

【讨论】：

将其标记为答案，我在此之前测试了所有其他解决方案，唯一对我有用！

【参考方案3】：

您可以在opacity 更改上制作动画：

Msg.qml

import QtQuick 2.4

Item 
    property alias text: mf.text
    anchors.fill: parent
    antialiasing: false
    opacity: 0.9
    z: 100
    MouseArea
        anchors.fill: parent
        onClicked: mf.opacity = !mf.opacity
    
    MsgForm 
        id: mf
        //y: parent.height - height - 5
        opacity:0
        Behavior on opacity 
            NumberAnimation
                duration:600
            
        
        width: parent.width
        anchors.bottom: parent.bottom 
    

或任何其他NumberAnimation。我建议您创建 States，在其中执行一些 propertyChanges，并在某些操作上，例如按钮单击更改状态。 在您的 MsgForm.ui.qml 中添加示例：

MouseArea
    anchors.fill: parent
    onClicked: mf.state= "show"
   

在行动中，例如： 在我的 mouseArea 中，我更改了 mf 的状态

MouseArea
    anchors.fill: parent
    onClicked: mf.state= "show"

如果你想在y 上制作动画，试试这个：

MsgForm.ui.qml

import QtQuick 2.4

Item 
    id: message
    property alias text: msg.text
    width: parent.width
    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"
        
    
    Behavior on y 
        NumberAnimation
            duration:300
        
    
    states: [
        State 
            name: "show"
            PropertyChanges 
                target: message
                y: parent.height - height
            
        ,
        State 
            name: "hide"
            PropertyChanges 
                target: message
                y: parent.height + height + 5
            
        
    ]

Msg.qml

import QtQuick 2.4

Rectangle 
    property alias text: mf.text
    width:800
    height: 480
    antialiasing: false
    opacity: 0.9
    z: 100
    MouseArea
        anchors.fill: parent
        onClicked:  mf.state= "show"
    
    MsgForm 
        id: mf
        //y: parent.height - height - 5
        y: parent.height +height + 5
        width: parent.width
    

【讨论】：

与 Jairo 响应相同。出现在最后一个地方。

你能发布你的代码吗，因为我没有这种行为

这个解决方案对我有用。将 onClicked 语句修改为 onClicked: mf.state = mf.state === "show" ? "hide" : "show" 提供反向动画。