如何在属性更改 QML 上实现行为动画

Posted 2023-02-16

【中文标题】如何在属性更改 QML 上实现行为动画

【英文标题】：How to implement behavior animation on property changes QML

【发布时间】：2021-09-15 13:32:12

【问题描述】：

单击图像时，我正在尝试更改scale 属性，但我希望它慢慢更改。现在，当我单击图像时，我立即拥有它（图像变大）。 这是我的图片：

在这里，我点击了第一张图片，它比其他图片稍大。 这是我的代码：

    width: 1920
    height: 1080
    visible: true
    title: qsTr("Hello World")
    color:'black'

    XmlListModel 
        id: xmlModel
        source: "movies.xml"
        query: "/Movies/Movie"

        XmlRole  name: "id"; query: "id/string()" 
        XmlRole  name: "name"; query: "name/string()" 
        XmlRole  name: "year"; query: "year/number()" 
        XmlRole  name: "rating"; query: "rating/string()" 
        XmlRole  name: "path"; query: "path/string()" 
    

   ScrollView
       width:parent.width
       height: 400
       clip: true
    ListView 
        id:list
        spacing:20
        width: parent.width; height: parent.width*0.5
        anchors.verticalCenter: parent.verticalCenter
        model: xmlModel
        clip:true
        orientation: ListView.Horizontal
        delegate:
            Rectangle id: rect; width: 300;height: 300; color:'gray'
            Image
                id:id
                anchors.fill: parent
                source:path
                fillMode: Image.PreserveAspectFit
                scale:focus?1.2:1
                MouseArea
                    id:area1
                    width:parent.width
                    height: parent.height
                    anchors.fill:parent
                    Behavior on scale 
                                PropertyAnimation duration: 4000 
                    

                    onClicked: 
                        id.scale=1.2
                    

                    //hoverEnabled: true

                    /*onEntered: 
                             // hobbit.scale=1.2
                              id.focus=true
                           

                    onExited: 
                              // hobbit.scale=1
                               id.focus=false
                           */
                
             

所以，在我的代码中，我有 Behavior on scale 部分，但没有任何变化。我尝试了不同的选择，但什么也没有。有什么建议吗？非常感谢您的帮助。

【参考方案1】：

将Behavior 对象移到MouseArea 对象之外。

Image 
    id: img
    scale: focus ? 1.2 : 1

    Behavior on scale 
        PropertyAnimation duration: 4000 
    

    MouseArea 
        onClicked: 
            img.scale = 1.2