QML：仅当鼠标进入图像时动画

Question

我想在鼠标移至图像上时制作动画，但不在鼠标离开图像时制作动画。

Item{
width: 800
height:800
Rectangle{
    id: blueRec
    width: 100; height: 100; color: "blue"
    MouseArea{
        anchors.fill: parent
        onClicked: {
            im1.visible = true
            im1.source = "1.png"
        }
    }
}
Image {
    id: im1
    scale: im1MouseArea.containsMouse ? 0.8 : 1.0
    Behavior on scale {
        NumberAnimation{
            id: anim
            from: 0.95
            to: 1
            duration: 400
            easing.type: Easing.OutBounce
        }
    }
    MouseArea{
        id: im1MouseArea
        hoverEnabled: true
        anchors.fill: parent
    }
}

}

当鼠标离开图像时，上面的代码也会生成动画。

有人可以帮忙吗？

Answer 1

设置比例，然后触发改变比例的动画似乎是一种奇怪的方法。如果我是你，我会将其分解为状态并将动画设置为在适当的转换上触发。

以下是如何完成此操作的示例：

Image {
    id: im1

    states: [ "mouseIn", "mouseOut" ]
    state: "mouseOut"

    transitions: [
        Transition {
            from: "*"
            to: "mouseIn"
            NumberAnimation {
                target: im1
                properties: "scale"
                from: 0.95
                to: 1
                duration: 400
                easing.type: Easing.OutBounce
            }
        }
    ]

    MouseArea{
        id: im1MouseArea
        hoverEnabled: true
        anchors.fill: parent

        onContainsMouseChanged: {
            im1.state = containsMouse ? "mouseIn" : "mouseOut"
        }
    }
}