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

Question

单击图像时，我正在尝试更改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 部分，但没有任何变化。我尝试了不同的选择，但什么也没有。有什么建议吗？非常感谢您的帮助。

Answer 1

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

Image {
    id: img
    scale: focus ? 1.2 : 1

    Behavior on scale {
        PropertyAnimation{ duration: 4000 }
    }

    MouseArea {
        onClicked: {
            img.scale = 1.2
        }
    }
}